@use "variables" as *;

// =============================================================
// Mixins
// =============================================================

// Breakpoint mobile — au-dessous de cette largeur, les composants
// basculent en layout colonne (ex: .card)
@mixin mobile {
    @media (max-width: $breakpoint-mobile) {
        @content;
    }
}

// Transitions interactives cohérentes sur les composants cliquables
@mixin interactive-transition {
    transition:
        color $transition-fast,
        background-color $transition-fast,
        border-color $transition-fast,
        box-shadow $transition-fast,
        opacity $transition-fast,
        transform $transition-fast,
        text-decoration-color $transition-fast;
}

// Ring de focus accessible et homogène
@mixin focus-ring {
    outline: none;
    border-color: $color-primary;
    box-shadow: 0 0 0 $focus-ring-width $focus-ring-color;
}