// Dropdown/Submenu component - CSS-only, Shadcn inspired
// Perfect for navigation bars with hover-triggered submenus

/**
 * @section Dropdown Base
 */

/** @public Dropdown container - relative positioning for absolute submenu */
.dropdown {
  position: relative;
  display: inline-block;

  // Dropdown trigger - the clickable/hoverable element
  /** @public Dropdown trigger element */
  .dropdown-trigger {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    
    // Chevron icon indicator
    &::after {
      content: '';
      display: inline-block;
      width: 0;
      height: 0;
      margin-left: var(--spacing-1);
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-top: 4px solid currentColor;
    }

    // Rotate chevron when open (CSS-only mode)
    &:hover::after,
    &:focus::after {
      transform: rotate(180deg);
    }
  }

  // When JS is initialized, override hover/focus and use .open class for chevron rotation
  &[data-dropdown-initialized] {
    .dropdown-trigger {
      // Force chevron to NOT rotate on hover/focus when dropdown is closed
      &:hover::after,
      &:focus::after {
        transform: rotate(0deg);
      }
    }

    // Only rotate chevron when dropdown is actually open
    &.open .dropdown-trigger::after {
      transform: rotate(180deg);
    }
  }

  /** @public Dropdown content - the submenu that appears */
  .dropdown-content {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 50;
    min-width: 12rem; // 192px
    margin-top: var(--spacing-2);
    
    // Hidden by default
    opacity: 0;
    visibility: hidden;
    
    // Styling
    background: hsl(var(--popover));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-1);
    overflow: hidden;
  }

  // Show dropdown on hover (only when not using JS)
  &:hover .dropdown-content,
  &:focus-within .dropdown-content {
    opacity: 1;
    visibility: visible;
  }

  // When JS is initialized, override hover and use .open class instead
  &[data-dropdown-initialized] {
    // Disable hover trigger when JS is active
    &:hover .dropdown-content {
      opacity: 0;
      visibility: hidden;
    }

    // Enable click-based interaction via .open class
    &.open .dropdown-content {
      opacity: 1;
      visibility: visible;
    }

    // Highlight trigger button when dropdown is open
    &.open .dropdown-trigger.btn-subtle {
      color: hsl(var(--primary-foreground));
      background-color: hsl(var(--primary));
    }

    // Keep keyboard accessibility
    &:focus-within .dropdown-content {
      opacity: 1;
      visibility: visible;
    }
  }

  /** @public Dropdown item - menu item in dropdown */
  .dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    width: 100%;
    padding: var(--spacing-2) var(--spacing-4);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: hsl(var(--popover-foreground));
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    transition: all var(--transition-base);
    white-space: nowrap;

    // Default hover - matches btn-ghost hover behavior
    &:hover,
    &:focus {
      background: hsl(var(--muted));
      color: hsl(var(--muted-foreground));
      outline: none;
    }

    // Icon in dropdown item
    i, .icon {
      width: 1rem;
      font-size: var(--text-sm);
      opacity: 0.7;
    }

    // Active state - for current page indication
    &.active {
      color: hsl(var(--primary-foreground));
      background: hsl(var(--primary));
      
      &:hover,
      &:focus {
        background: hsl(var(--primary) / 0.9);
        color: hsl(var(--primary-foreground));
      }
    }

    // Disabled state
    &:disabled,
    &.disabled {
      opacity: 0.5;
      cursor: not-allowed;
      pointer-events: none;
    }

    // Destructive variant - matches btn-destructive hover behavior
    &.dropdown-item-destructive {
      color: hsl(var(--destructive));
      
      &:hover,
      &:focus {
        background: hsl(var(--destructive) / 0.9);
        color: hsl(var(--destructive-foreground));
      }
    }

    // Primary variant - for emphasized actions
    &.dropdown-item-primary {
      color: hsl(var(--primary));
      
      &:hover,
      &:focus {
        background: hsl(var(--primary) / 0.9);
        color: hsl(var(--primary-foreground));
      }
    }

    // Secondary variant - alternative styling
    &.dropdown-item-secondary {
      color: hsl(var(--secondary-foreground));
      
      &:hover,
      &:focus {
        background: hsl(var(--secondary) / 0.8);
        color: hsl(var(--secondary-foreground));
      }
    }
  }

  /** @public Dropdown label - non-interactive header */
  .dropdown-label {
    padding: var(--spacing-2) var(--spacing-4);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: hsl(var(--muted-foreground));
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  /** @public Dropdown separator */
  .dropdown-separator {
    height: 1px;
    margin: var(--spacing-1) 0;
    background: hsl(var(--border));
  }

  /** @public Dropdown shortcut text */
  .dropdown-shortcut {
    margin-left: auto;
    font-size: var(--text-xs);
    color: hsl(var(--muted-foreground));
    opacity: 0.6;
  }

  /** @public Right-aligned dropdown (e.g., for user menu in top-right) */
  &.dropdown-right .dropdown-content {
    left: auto;
    right: 0;
  }

  /** @public Center-aligned dropdown */
  &.dropdown-center .dropdown-content {
    left: 50%;
    transform: translateX(-50%);
  }

  /** @public Animated dropdown - opt-in for slide/fade animations */
  &.dropdown-animated {
    .dropdown-trigger::after {
      transition: transform var(--transition-base);
    }

    .dropdown-content {
      transform: translateY(-8px);
      transition: opacity var(--transition-base), 
                  transform var(--transition-base),
                  visibility 0s linear 0.2s;
    }

    &:hover .dropdown-content,
    &:focus-within .dropdown-content,
    &[data-dropdown-initialized].open .dropdown-content,
    &[data-dropdown-initialized]:focus-within .dropdown-content {
      transform: translateY(0);
      transition-delay: 0s;
    }

    &[data-dropdown-initialized]:hover .dropdown-content {
      transform: translateY(-8px);
    }

    &.dropdown-center .dropdown-content {
      transform: translateX(-50%) translateY(-8px);
    }

    &.dropdown-center:hover .dropdown-content,
    &.dropdown-center:focus-within .dropdown-content,
    &.dropdown-center[data-dropdown-initialized].open .dropdown-content,
    &.dropdown-center[data-dropdown-initialized]:focus-within .dropdown-content {
      transform: translateX(-50%) translateY(0);
    }

    &.dropdown-center[data-dropdown-initialized]:hover .dropdown-content {
      transform: translateX(-50%) translateY(-8px);
    }
  }
}

/** @public Dropdown group - nested dropdown items */
.dropdown-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

// Navigation bar integration - when dropdown is inside nav
nav .dropdown {
  .dropdown-trigger {
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-md);
    transition: background var(--transition-base);
  }
}

// Button as trigger styling
.btn.dropdown-trigger {
  &::after {
    margin-left: var(--spacing-2);
  }
}

// Dropdown items that extend button variants
.dropdown-item {
  // When dropdown item has button variant classes, inherit their hover behavior
  &.btn-default,
  &.btn-primary {
    &:hover,
    &:focus {
      background: hsl(var(--primary) / 0.9);
      color: hsl(var(--primary-foreground));
    }
  }

  &.btn-secondary {
    &:hover,
    &:focus {
      background: hsl(var(--secondary) / 0.8);
      color: hsl(var(--secondary-foreground));
    }
  }

  &.btn-destructive {
    &:hover,
    &:focus {
      background: hsl(var(--destructive) / 0.9);
      color: hsl(var(--destructive-foreground));
    }
  }

  &.btn-outline {
    border: 1px solid hsl(var(--border));
    background-color: transparent;
    color: hsl(var(--foreground));

    &:hover,
    &:focus {
      background: hsl(var(--muted));
      color: hsl(var(--muted-foreground));
    }
  }

  &.btn-ghost {
    &:hover,
    &:focus {
      background: hsl(var(--muted));
      color: hsl(var(--muted-foreground));
    }
  }

  &.btn-link {
    background: transparent;
    color: hsl(var(--primary));
    text-decoration: underline;
    text-underline-offset: 4px;

    &:hover,
    &:focus {
      text-decoration: none;
    }
  }
}

// Link as trigger styling
a.dropdown-trigger {
  text-decoration: none;
  
  &:hover {
    text-decoration: none;
  }
}

// Mobile responsive - ensure readable width on small screens
@media (max-width: 768px) {
  .dropdown {
    .dropdown-content {
      left: 0;
      // Prevent content from shrinking to parent width
      width: fit-content;
      right: 0;
      min-width: 100%;
    }
  }
}

// Dark mode adjustments
/** @public Dark mode dropdown styles */
.dark,
[data-theme="dark"] {
  .dropdown-content {
    // Slightly more prominent shadow in dark mode
    box-shadow: var(--shadow-xl);
  }
}