@import "../../../../styles/utils/admin_variables.less";
.dataTableHeader {
    --table-header-border-color: #e5e7eb;
    --table-header-icon-color: #9ca3af;
    --table-header-input-border-color: #d1d5db;
    --table-header-input-focus-color: #3b82f6;
    --table-header-input-focus-border-color: rgba(59, 130, 246, 0.1);

    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--table-header-border-color);

    &__title {
        font-size: 1.25rem;
        font-weight: 600;
        color: #111827;
        margin: 0;
    }

    &__searchWrapper {
        position: relative;
        width: 300px;
    }

    &__icon {
        &--search {
            position: absolute;
            left: 0.75rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--table-header-icon-color);
        }
    }

    &__input {
        width: 100%;
        padding: 0.5rem 0.75rem 0.5rem 2.5rem;
        border: 1px solid var(--table-header-input-border-color);
        border-radius: 0.375rem;
        font-size: 0.875rem;
        outline: none;
        transition: border-color 0.15s, box-shadow 0.15s;
        box-sizing: border-box;

        &:focus {
            border-color: var(--table-header-input-focus-color);
            box-shadow: 0 0 0 3px var(--table-header-input-focus-border-color);
        }
    }
}
