// ==========================================================================
// Tag component - reusable clickable pill (filter bars, category selects...)
// Extracted from actualite-hub-page__filter-pill. BEM: .tag (Block)
// ==========================================================================

@use '../base/variables' as *;

.tag {
    border: 1px solid $color-primary;
    border-radius: 999px;
    padding: $spacing-xs $spacing-sm;
    background: transparent;
    cursor: pointer;
    white-space: nowrap;
    color: $color-primary;
    font-size: $font-size-sm;
    font-family: $font-family-sans;
    overflow: hidden;
    position: relative;

    &::before, &::after {
        content: '';
        position: absolute;
        width: 0;
        height: 100%;
        left: 0;
        top: 0;
        transition: width 0.2s ease-in-out;
    }
    
    &::before {
        background: $color-neutral;
        z-index: -2;
    }
    
    &::after {
        transition-delay: 0.2s;
        background: $color-light;
        z-index: -1;
    }

    &:hover {
        &::before {
            width: 100%;
        }

        &::after {
            width: 100%;
        }
    }

    &.is-active {
        background: $color-primary;

        // Placeholder inversion; real color tokens pending Figma extraction.
        color: $color-neutral;
        background-color: $color-primary;
    }

    &--light {
        background: $color-light;
        color: $color-primary-dark;
        border: none;
    }

    &.is-disabled {
        cursor: default;
        pointer-events: none;
    }
}