/* FAF Search Tag Styles */

/* CSS Custom Properties (Variables) */
:root {
    /* Typography */
    --FAFSearchTags-font-size: 1rem;
    
    /* Spacing */
    --FAFSearchTags-padding: 8px 12px;
    --FAFSearchTags-gap: 0.5rem;
    --FAFSearchTags-container-padding: 1rem;
    --FAFSearchTags-container-margin-top: 2rem;
    
    /* Border & Shape */
    --FAFSearchTags-border-radius: 50px;
    --FAFSearchTags-border-width: 1px;
    --FAFSearchTags-min-width: 200px;
    
    /* Colors - Default State */
    --FAFSearchTags-background-default: #041e41;
    --FAFSearchTags-border-default: #134d9b;
    --FAFSearchTags-text-default: #fff;
    
    /* Colors - Hover State */
    --FAFSearchTags-background-hover: #003377;
    --FAFSearchTags-border-hover: #041e41;
    
    /* Colors - Active State */
    --FAFSearchTags-background-active: #4caf50;
    --FAFSearchTags-border-active: #2e7d32;
    --FAFSearchTags-text-active: white;
    
    /* Checkmark */
    --FAFSearchTags-checkmark-size: 16px;
    --FAFSearchTags-checkmark-font-size: 10px;
    --FAFSearchTags-checkmark-background: #2e7d32;
    --FAFSearchTags-checkmark-color: white;
    --FAFSearchTags-checkmark-position-top: -2px;
    --FAFSearchTags-checkmark-position-right: -2px;
    
    /* Container */
    --FAFSearchTags-container-background: #fafafa;
    --FAFSearchTags-container-width: fit-content;
    --FAFSearchTags-container-border-radius: 8px;
    
    /* Scrollbar */
    --FAFSearchTags-scrollbar-color: #ccc;
    --FAFSearchTags-scrollbar-color-hover: #999;
    --FAFSearchTags-scrollbar-height: 4px;
    --FAFSearchTags-scrollbar-border-radius: 2px;
    
    /* Animation */
    --FAFSearchTags-transition: all 0.2s ease;
}

/* Base tag styling */
.FAFSearchTag {
    cursor: pointer;
    padding: var(--FAFSearchTags-padding);
    background: var(--FAFSearchTags-background-default);
    border: var(--FAFSearchTags-border-width) solid var(--FAFSearchTags-border-default);
    border-radius: var(--FAFSearchTags-border-radius);
    color: var(--FAFSearchTags-text-default);
    transition: var(--FAFSearchTags-transition);
    font-size: var(--FAFSearchTags-font-size);
    position: relative;
    min-width: var(--FAFSearchTags-min-width);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Hover effects for inactive tags */
.FAFSearchTag:hover:not(.active) {
    background: var(--FAFSearchTags-background-hover);
    border-color: var(--FAFSearchTags-border-hover);
}

/* Active tag styling */
.FAFSearchTag.active {
    background: var(--FAFSearchTags-background-active);
    border-color: var(--FAFSearchTags-border-active);
    color: var(--FAFSearchTags-text-active);
}

/* Checkmark indicator */
.FAFSearchTag .checkmark {
    position: absolute;
    top: var(--FAFSearchTags-checkmark-position-top);
    right: var(--FAFSearchTags-checkmark-position-right);
    background: var(--FAFSearchTags-checkmark-background);
    color: var(--FAFSearchTags-checkmark-color);
    border-radius: 50%;
    width: var(--FAFSearchTags-checkmark-size);
    height: var(--FAFSearchTags-checkmark-size);
    font-size: var(--FAFSearchTags-checkmark-font-size);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Checkmark content */
.FAFSearchTag .checkmark::before {
    content: "✓";
}

/* Container styling for horizontal scroll on mobile */
.FAFSearchTagContainer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--FAFSearchTags-gap);
    width: var(--FAFSearchTags-container-width);
    margin-top: var(--FAFSearchTags-container-margin-top);
    background: var(--FAFSearchTags-container-background);
    padding: var(--FAFSearchTags-container-padding);
    border-radius: var(--FAFSearchTags-container-border-radius);
}

/* Mobile-specific styling (below 1024px) */
@media (max-width: 1023px) {
    .FAFSearchTagContainer {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
        scrollbar-color: var(--FAFSearchTags-scrollbar-color) transparent;
        padding: 8px 0;
        padding-left: 16px;
        padding-right: 16px;
        width: 100%;
    }
    
    .FAFSearchTagContainer::-webkit-scrollbar {
        height: var(--FAFSearchTags-scrollbar-height);
    }
    
    .FAFSearchTagContainer::-webkit-scrollbar-track {
        background: transparent;
    }
    
    .FAFSearchTagContainer::-webkit-scrollbar-thumb {
        background: var(--FAFSearchTags-scrollbar-color);
        border-radius: var(--FAFSearchTags-scrollbar-border-radius);
    }
    
    .FAFSearchTagContainer::-webkit-scrollbar-thumb:hover {
        background: var(--FAFSearchTags-scrollbar-color-hover);
    }
    
    .FAFSearchTag {
        flex: 0 0 auto;
        scroll-snap-align: start;
        white-space: nowrap;
        min-width: 40%;
    }
}