@use "../core/variables" as *;
@use "../core/mixins" as *;
@use "sass:color";

// =============================================================
// Barre de recherche — bloc .search-bar
// =============================================================
// Bloc autonome réutilisable pour les listes filtrables.

.search-bar {
    display: flex;
    align-items: center;
    gap: $spacing-sm;
    margin-bottom: $spacing-lg;
}

.search-bar__input {
    flex: 1;
    padding: $spacing-sm $spacing-md;
    border: 1px solid $color-border;
    border-radius: $radius-md;
    font: inherit;
    line-height: $line-height-base;

    @include interactive-transition;

    &:focus-visible {
        @include focus-ring;
    }
}

.search-bar__btn {
    padding: $spacing-sm $spacing-md;
    background: $color-primary;
    color: $color-bg-white;
    border: 1px solid transparent;
    border-radius: $radius-md;
    font: inherit;
    font-weight: $font-weight-semibold;
    line-height: $line-height-tight;
    cursor: pointer;
    white-space: nowrap;

    @include interactive-transition;

    &:hover {
        background: color.scale($color-primary, $lightness: -16%);
    }

    &:focus-visible {
        @include focus-ring;
    }
}

.search-bar__reset {
    color: $color-text-muted;
    text-decoration: none;
    font-size: $font-size-sm;
    padding: $spacing-xs;
    line-height: $line-height-none;

    @include interactive-transition;

    &:hover {
        color: $color-danger;
    }

    &:focus-visible {
        @include focus-ring;
        border-radius: $radius-sm;
    }
}

.search-bar__info {
    margin: (-$spacing-sm) 0 $spacing-md;
    font-size: $font-size-sm;
    color: $color-text-muted;
}

@include mobile {
    .search-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .search-bar__btn {
        width: 100%;
    }
}