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

// =============================================================
// Boutons — bloc composant .btn
// =============================================================

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: $spacing-xs;
    padding: $spacing-sm $spacing-md;
    border: 1px solid transparent;
    border-radius: $radius-md;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
    line-height: $line-height-tight;
    font: inherit;
    font-weight: $font-weight-semibold;

    @include interactive-transition;

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

    &:disabled,
    &--disabled {
        opacity: 0.65;
        cursor: not-allowed;
    }
}

.btn--primary {
    background: $color-primary;
    color: $color-bg-white;

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

.btn--secondary {
    background: $color-text-muted;
    color: $color-bg-white;

    &:hover {
        background: color.scale($color-text-muted, $lightness: -14%);
    }
}

.btn--danger {
    background: $color-danger;
    color: $color-bg-white;

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

.btn--sm {
    padding: $spacing-xs $spacing-sm;
    font-size: $font-size-sm;
}

// Modificateur taille — boutons principaux dans les formulaires centrés
.btn--lg {
    padding: $spacing-sm $spacing-lg;
}

// Modificateur largeur — occupe toute la largeur de son conteneur
.btn--full {
    width: 100%;
}

// Variante de lien textuel.
// Utiliser la combinaison BEM `.btn.btn--link`.
.btn--link {
    background: none;
    border: none;
    color: $color-primary;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
    font-size: inherit;
    line-height: $line-height-base;

    &:hover {
        text-decoration: none;
    }

    &:focus-visible {
        outline: 2px solid $focus-ring-color;
        outline-offset: 2px;
        box-shadow: none;
    }
}