/**
 * Fluid Framework - Dropdown/Select Component
 * @layer components
 *
 * Standalone dropdown menus for actions, selections, and context menus.
 * Separate from nav dropdowns — usable anywhere in the page.
 *
 * Usage:
 *   <div class="dropdown">
 *     <button class="dropdown__trigger">
 *       Options
 *       <svg class="dropdown__chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
 *     </button>
 *     <div class="dropdown__menu">
 *       <a href="#" class="dropdown__item">Edit</a>
 *       <a href="#" class="dropdown__item">Duplicate</a>
 *       <div class="dropdown__divider"></div>
 *       <a href="#" class="dropdown__item" data-danger>Delete</a>
 *     </div>
 *   </div>
 *
 * Positions: data-position="top|bottom-end|top-end"
 * Widths: data-width="auto|full|fixed"
 */

@layer components {
  /* ========================================
     DROPDOWN CONTAINER
     ======================================== */

  .dropdown {
    position: relative;
    display: inline-block;
  }


  /* ========================================
     DROPDOWN TRIGGER
     ======================================== */

  .dropdown__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }

  .dropdown__chevron {
    inline-size: 1rem;
    block-size: 1rem;
    flex-shrink: 0;
    transition: transform var(--duration-fast) var(--ease-settle);
  }

  /* Rotate chevron when open */
  .dropdown[open] .dropdown__chevron,
  .dropdown[data-open] .dropdown__chevron {
    transform: rotate(180deg);
  }


  /* ========================================
     DROPDOWN MENU
     ======================================== */

  .dropdown__menu {
    /* Positioning */
    position: absolute;
    z-index: var(--z-dropdown);
    inset-block-start: calc(100% + var(--space-1));
    inset-inline-start: 0;

    /* Sizing */
    min-inline-size: 12rem;
    max-inline-size: min(calc(100vw - 2rem), 20rem);
    max-block-size: 20rem;
    overflow-y: auto;

    /* Visual */
    background: var(--color-background);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-card);
    padding: var(--space-1);

    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    /* Transitions */
    transition:
      opacity var(--duration-fast) var(--ease-fluid),
      visibility var(--duration-fast) var(--ease-fluid);
  }

  /* Show on hover or when open attribute/data-open is present */
  .dropdown:hover > .dropdown__menu,
  .dropdown:focus-within > .dropdown__menu,
  .dropdown[open] > .dropdown__menu,
  .dropdown[data-open] > .dropdown__menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Scrollbar styling */
  .dropdown__menu::-webkit-scrollbar {
    inline-size: 4px;
  }

  .dropdown__menu::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: var(--radius-full);
  }


  /* ========================================
     POSITION VARIANTS
     ======================================== */

  /* Bottom-end (right-aligned) */
  .dropdown[data-position="bottom-end"] .dropdown__menu {
    inset-inline-start: auto;
    inset-inline-end: 0;
  }

  /* Top (above trigger) */
  .dropdown[data-position="top"] .dropdown__menu {
    inset-block-start: auto;
    inset-block-end: calc(100% + var(--space-1));
  }

  .dropdown[data-position="top"]:hover > .dropdown__menu,
  .dropdown[data-position="top"]:focus-within > .dropdown__menu,
  .dropdown[data-position="top"][open] > .dropdown__menu,
  .dropdown[data-position="top"][data-open] > .dropdown__menu {
  }

  /* Top-end */
  .dropdown[data-position="top-end"] .dropdown__menu {
    inset-block-start: auto;
    inset-block-end: calc(100% + var(--space-1));
    inset-inline-start: auto;
    inset-inline-end: 0;
  }

  .dropdown[data-position="top-end"]:hover > .dropdown__menu,
  .dropdown[data-position="top-end"]:focus-within > .dropdown__menu,
  .dropdown[data-position="top-end"][open] > .dropdown__menu,
  .dropdown[data-position="top-end"][data-open] > .dropdown__menu {
  }


  /* ========================================
     WIDTH VARIANTS
     ======================================== */

  .dropdown[data-width="full"] .dropdown__menu {
    inline-size: 100%;
    min-inline-size: 100%;
  }

  .dropdown[data-width="fixed"] .dropdown__menu {
    inline-size: 16rem;
  }


  /* ========================================
     DROPDOWN ITEMS
     ======================================== */

  .dropdown__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-control);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition:
      background-color var(--duration-fast) var(--ease-fluid),
      color var(--duration-fast) var(--ease-fluid);
  }

  .dropdown__item:hover {
    background: color-mix(in oklab, var(--accent) 10%, var(--color-background));
    color: var(--accent-ink);
  }

  .dropdown__item:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-focus);
    outline-offset: -2px;
  }

  /* Active/selected item */
  .dropdown__item[aria-selected="true"],
  .dropdown__item[data-active] {
    background: color-mix(in oklab, var(--accent) 12%, var(--color-background));
    color: var(--accent-ink);
    font-weight: var(--weight-medium);
  }

  /* Disabled item */
  .dropdown__item[aria-disabled="true"],
  .dropdown__item[disabled] {
    opacity: 0.5;
    pointer-events: none;
  }

  /* Danger item */
  .dropdown__item[data-danger] {
    color: var(--color-error);
  }

  .dropdown__item[data-danger]:hover {
    background: var(--color-error-subtle);
    color: var(--color-error);
  }


  /* ========================================
     DROPDOWN EXTRAS
     ======================================== */

  /* Divider line */
  .dropdown__divider {
    block-size: 1px;
    margin: var(--space-1) 0;
    background: var(--color-border-subtle);
  }

  /* Section header */
  .dropdown__header {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-text-subtle);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
  }

  /* Item icon slot */
  .dropdown__item-icon {
    inline-size: 1rem;
    block-size: 1rem;
    flex-shrink: 0;
    color: var(--color-text-muted);
  }

  .dropdown__item:hover .dropdown__item-icon {
    color: inherit;
  }

  /* Item description (secondary text) */
  .dropdown__item-desc {
    font-size: var(--font-size-xs);
    color: var(--color-text-subtle);
    font-weight: var(--weight-normal);
  }

  /* Keyboard shortcut hint */
  .dropdown__shortcut {
    margin-inline-start: auto;
    font-size: var(--font-size-xs);
    color: var(--color-text-subtle);
    font-family: var(--font-mono);
  }



  /* ========================================
     REDUCED MOTION
     ======================================== */

  /* Reduced motion: the reset shortens every transition. */
}