/* © 2026 iPrime | CssUiCompDropDown.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(--prime-space-8);
        inline-size: 100%;
        
        /* Interaction */
        cursor: pointer;
        user-select: none;
        
        /* Appearance */
        background: var(--prime-dropdown-trigger-background);
        border: var(--prime-border-width-1) solid var(--prime-dropdown-trigger-border);
        border-radius: var(--prime-border-radius-12);
        padding-block: var(--prime-padding-10);
        padding-inline: var(--prime-padding-12);
        
        /* Typography */
        font-family: var(--prime-font-primary);
        font-size: var(--prime-font-size-14);
        color: var(--prime-dropdown-trigger-text);
        
        /* Transitions */
        transition: 
            border-color var(--prime-duration-150) var(--prime-ease-smooth),
            background var(--prime-duration-150) var(--prime-ease-smooth);
        
        &:hover {
            border-color: var(--prime-dropdown-trigger-border-hover);
            background: var(--prime-dropdown-trigger-background-hover);
        }
        
        &:focus-visible {
            outline: var(--prime-outline-width-2) solid var(--prime-dropdown-trigger-outline-focus);
            outline-offset: var(--prime-outline-offset-2);
        }
        
        /* Disabled state */
        &:disabled,
        [data-dropdown-id].is-Disabled & {
            cursor: not-allowed;
            opacity: var(--prime-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(--prime-dropdown-text-placeholder);
        }
    }
    
    /* Arrow indicator */
    .DropDown-Arrow {
        flex-shrink: 0;
        inline-size: var(--prime-icon-16);
        block-size: var(--prime-icon-16);
        color: var(--prime-dropdown-arrow-color);
        
        /* Transitions */
        transition: transform var(--prime-duration-150) var(--prime-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(--prime-z-index-dropdown);
        
        /* Default: below trigger, left-aligned */
        top: 100%;
        left: 0;
        margin-top: var(--prime-dropdown-gap, var(--prime-space-8));
        
        /* Sizing */
        min-width: var(--prime-dropdown-min-width, 12rem);
        max-height: var(--prime-dropdown-max-height, 20rem);
        
        /* Hidden by default */
        display: none;
        
        /* Appearance */
        background: var(--prime-dropdown-panel-background);
        border: var(--prime-border-width-1) solid var(--prime-dropdown-panel-border);
        border-radius: var(--prime-border-radius-12);
        box-shadow: var(--prime-dropdown-panel-shadow);
        
        /* Overflow */
        overflow-x: hidden;
        overflow-y: auto;
        
        /* Padding for options */
        padding: var(--prime-padding-8);
        
        /* Animation */
        opacity: 0;
        transform: translateY(calc(-1 * var(--prime-space-4)));
        transition: 
            opacity var(--prime-duration-150) var(--prime-ease-smooth),
            transform var(--prime-duration-150) var(--prime-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(--prime-dropdown-gap, var(--prime-space-8));
            transform: translateY(var(--prime-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(--prime-space-8);
        
        /* Spacing */
        padding-block: var(--prime-padding-10);
        padding-inline: var(--prime-padding-12);
        
        /* Typography */
        font-size: var(--prime-font-size-14);
        color: var(--prime-dropdown-option-text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        
        /* Appearance */
        border-radius: var(--prime-border-radius-8);
        
        /* Interaction */
        cursor: pointer;
        user-select: none;
        
        /* Transitions */
        transition: 
            background var(--prime-duration-150) var(--prime-ease-smooth),
            color var(--prime-duration-150) var(--prime-ease-smooth);
        
        &:hover {
            background: var(--prime-dropdown-option-background-hover);
            color: var(--prime-dropdown-option-text-hover);
        }
        
        &:focus-visible {
            outline: var(--prime-outline-width-2) solid var(--prime-dropdown-option-outline-focus);
            outline-offset: var(--prime-outline-offset-n2);
            background: var(--prime-dropdown-option-background-hover);
            color: var(--prime-dropdown-option-text-hover);
        }
        
        /* Selected state */
        &.is-Selected {
            background: var(--prime-dropdown-option-selected-background);
            color: var(--prime-dropdown-option-selected-text);
            
            &:hover {
                background: var(--prime-dropdown-option-background-hover);
            }
        }
        
        /* Disabled state */
        &.is-Disabled {
            cursor: not-allowed;
            opacity: var(--prime-opacity-50);
            pointer-events: none;
        }
    }
    
    /* Option icon (optional) */
    .DropDown-Option-Icon {
        flex-shrink: 0;
        inline-size: var(--prime-icon-16);
        block-size: var(--prime-icon-16);
    }
    
    /* Option text */
    .DropDown-Option-Text {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* =============================================================================
       DIVIDER — Separator between option groups
       ============================================================================= */
    
    .DropDown-Divider {
        block-size: var(--prime-height-1);
        background: var(--prime-dropdown-divider-background);
        margin-block: var(--prime-margin-8);
    }
    
    /* =============================================================================
       HEADER — Optional section header inside panel
       ============================================================================= */
    
    .DropDown-Header {
        padding-block: var(--prime-padding-8);
        padding-inline: var(--prime-padding-12);
        
        /* Typography */
        font-size: var(--prime-font-size-12);
        font-weight: var(--prime-font-weight-600);
        color: var(--prime-dropdown-header-text);
        text-transform: uppercase;
        letter-spacing: var(--prime-letter-spacing-50);
    }
    
    /* =============================================================================
       REDUCED MOTION
       ============================================================================= */
    
    @media (prefers-reduced-motion: reduce) {
        .DropDown-Arrow {
            transition: none;
        }
        
        .DropDown-Panel {
            transition: none;
            transform: none;
            
            &.is-Above {
                transform: none;
            }
        }
    }
    
    } /* End @layer components */