/* UiUtilDropDown.css — Smart dropdown utility with viewport-aware positioning */
/* deps: { TokensFixed.css, TokensOklchDark.css, Foundation.css } */

@layer components {

    /* =============================================================================
       DROPDOWN — Root Container
       
       A reusable dropdown primitive that provides:
       - Smart viewport-aware positioning (above/below trigger)
       - Keyboard navigation (Arrow keys, Escape, Enter)
       - ARIA accessibility support
       - Click outside to close
       - Scroll/resize repositioning
       
       Usage:
       <div data-dropdown-id="unique-id">
           <button class="dropdown-trigger">Select...</button>
           <div class="dropdown-panel">
               <div class="dropdown-option" data-value="1">Option 1</div>
               <div class="dropdown-option" data-value="2">Option 2</div>
           </div>
       </div>
       
       Note: data-dropdown-id is the functional identifier. Add .dropdown class for default styling.
       ============================================================================= */
    
    .dropdown {
        position: relative;
        display: inline-block;
    }
    
    /* =============================================================================
       TRIGGER — Button that opens the dropdown
       ============================================================================= */
    
    .dropdown-trigger {
        /* Layout */
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--token-space-8);
        inline-size: 100%;
        
        /* Interaction */
        cursor: pointer;
        user-select: none;
        
        /* Appearance */
        background: var(--token-bg-surface);
        border: 1px solid var(--token-border-primary);
        border-radius: var(--token-radius-12);
        padding-block: var(--token-padding-10);
        padding-inline: var(--token-padding-12);
        
        /* Typography */
        font-family: var(--token-font-primary);
        font-size: var(--token-text-14);
        color: var(--token-text-primary);
        
        /* Transitions */
        transition: 
            border-color var(--token-duration-fast) var(--token-ease-smooth),
            background var(--token-duration-fast) var(--token-ease-smooth);
        
        &:hover {
            border-color: var(--token-border-hover);
            background: var(--token-bg-item-hover);
        }
        
        &:focus-visible {
            outline: var(--token-outline-width) solid var(--token-border-focus);
            outline-offset: var(--token-outline-offset-sm);
        }
        
        /* Disabled state */
        &:disabled,
        [data-dropdown-id].is-disabled & {
            cursor: not-allowed;
            opacity: var(--token-opacity-50);
            pointer-events: none;
        }
    }
    
    /* Text content inside trigger */
    .dropdown-text {
        flex: 1;
        text-align: start;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        
        /* Placeholder styling */
        &.is-placeholder {
            color: var(--token-text-tertiary);
        }
    }
    
    /* Arrow indicator */
    .dropdown-arrow {
        flex-shrink: 0;
        inline-size: var(--token-icon-16);
        block-size: var(--token-icon-16);
        color: var(--token-text-secondary);
        
        /* Transitions */
        transition: transform var(--token-duration-fast) var(--token-ease-smooth);
        
        /* Rotate when open */
        [data-dropdown-id].is-open & {
            transform: rotate(180deg);
        }
    }
    
    /* =============================================================================
       PANEL — The dropdown options container
       
       Positioning via CSS classes (JS toggles classes based on viewport):
       - Default: appears below trigger, left-aligned
       - .is-above: appears above trigger
       - .is-right: right-aligned instead of left
       ============================================================================= */
    
    .dropdown-panel {
        /* CSS-driven positioning */
        position: absolute;
        z-index: var(--token-z-dropdown);
        
        /* Default: below trigger, left-aligned */
        top: 100%;
        left: 0;
        margin-top: var(--dropdown-gap, var(--token-space-8));
        
        /* Sizing */
        min-width: var(--dropdown-min-width, 12rem);
        max-height: var(--dropdown-max-height, 20rem);
        
        /* Hidden by default */
        display: none;
        
        /* Appearance */
        background: var(--token-bg-card);
        border: 1px solid var(--token-border-secondary);
        border-radius: var(--token-radius-12);
        box-shadow: var(--token-shadow-dropdown);
        
        /* Overflow */
        overflow-x: hidden;
        overflow-y: auto;
        
        /* Padding for options */
        padding: var(--token-padding-8);
        
        /* Animation */
        opacity: 0;
        transform: translateY(calc(-1 * var(--token-space-4)));
        transition: 
            opacity var(--token-duration-fast) var(--token-ease-smooth),
            transform var(--token-duration-fast) var(--token-ease-smooth);
        
        /* Show when open */
        [data-dropdown-id].is-open & {
            display: block;
        }
        
        /* Animate in after display:block is applied */
        &.is-visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* When positioned above trigger */
        &.is-above {
            top: auto;
            bottom: 100%;
            margin-top: 0;
            margin-bottom: var(--dropdown-gap, var(--token-space-8));
            transform: translateY(var(--token-space-4));
            
            &.is-visible {
                transform: translateY(0);
            }
        }
        
        /* When right-aligned (near right edge of viewport) */
        &.is-right {
            left: auto;
            right: 0;
        }
    }
    
    /* =============================================================================
       OPTIONS — Individual selectable items
       ============================================================================= */
    
    .dropdown-option {
        /* Layout */
        display: flex;
        align-items: center;
        gap: var(--token-space-8);
        
        /* Spacing */
        padding-block: var(--token-padding-10);
        padding-inline: var(--token-padding-12);
        
        /* Typography */
        font-size: var(--token-text-14);
        color: var(--token-text-secondary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        
        /* Appearance */
        border-radius: var(--token-radius-8);
        
        /* Interaction */
        cursor: pointer;
        user-select: none;
        
        /* Transitions */
        transition: 
            background var(--token-duration-fast) var(--token-ease-smooth),
            color var(--token-duration-fast) var(--token-ease-smooth);
        
        &:hover {
            background: var(--token-bg-item-hover);
            color: var(--token-text-primary);
        }
        
        &:focus-visible {
            outline: var(--token-outline-width) solid var(--token-border-focus);
            outline-offset: var(--token-outline-offset-inset);
            background: var(--token-bg-item-hover);
            color: var(--token-text-primary);
        }
        
        /* Selected state */
        &.is-selected {
            background: var(--token-bg-item);
            color: var(--token-color-brand-orange);
            
            &:hover {
                background: var(--token-bg-item-hover);
            }
        }
        
        /* Disabled state */
        &.is-disabled {
            cursor: not-allowed;
            opacity: var(--token-opacity-50);
            pointer-events: none;
        }
    }
    
    /* Option icon (optional) */
    .dropdown-option-icon {
        flex-shrink: 0;
        inline-size: var(--token-icon-16);
        block-size: var(--token-icon-16);
    }
    
    /* Option text */
    .dropdown-option-text {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* =============================================================================
       DIVIDER — Separator between option groups
       ============================================================================= */
    
    .dropdown-divider {
        block-size: 1px;
        background: var(--token-border-secondary);
        margin-block: var(--token-margin-8);
    }
    
    /* =============================================================================
       HEADER — Optional section header inside panel
       ============================================================================= */
    
    .dropdown-header {
        padding-block: var(--token-padding-8);
        padding-inline: var(--token-padding-12);
        
        /* Typography */
        font-size: var(--token-text-12);
        font-weight: var(--token-weight-600);
        color: var(--token-text-tertiary);
        text-transform: uppercase;
        letter-spacing: var(--token-tracking-wider);
    }
    
    /* =============================================================================
       REDUCED MOTION
       ============================================================================= */
    
    @media (prefers-reduced-motion: reduce) {
        .dropdown-arrow {
            transition: none;
        }
        
        .dropdown-panel {
            transition: none;
            transform: none;
            
            &.is-above {
                transform: none;
            }
        }
    }
    
    } /* End @layer components */