@use 'ui-design-system/src/styles/semantic/index' as *;

// Tokens available globally via main application styles

// ==========================================================================
// MENU CONTAINER COMPONENT
// ==========================================================================
// Container component for menu items with elevation, spacing, and orientation
// Provides consistent layout and styling using semantic design tokens
// ==========================================================================

.menu-container {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  background-color: $semantic-color-surface-primary;
  position: relative;
  overflow: hidden;
  
  // ==========================================================================
  // ORIENTATION
  // ==========================================================================
  
  &--vertical {
    flex-direction: column;
  }
  
  &--horizontal {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }

  // ==========================================================================
  // ELEVATION VARIANTS
  // ==========================================================================
  
  &--elevation-none {
    box-shadow: none;
  }
  
  &--elevation-sm {
    box-shadow: $semantic-shadow-elevation-1;
  }
  
  &--elevation-md {
    box-shadow: $semantic-shadow-elevation-3;
  }
  
  &--elevation-lg {
    box-shadow: $semantic-shadow-elevation-4;
  }

  // ==========================================================================
  // SPACING VARIANTS
  // ==========================================================================
  
  &--spacing-none {
    padding: 0;
    gap: 0;
  }
  
  &--spacing-xs {
    padding: $semantic-spacing-component-xs;
    gap: $semantic-spacing-component-xs;
  }
  
  &--spacing-sm {
    padding: $semantic-spacing-component-sm;
    gap: $semantic-spacing-micro-tight;
  }
  
  &--spacing-md {
    padding: $semantic-spacing-component-md;
    gap: $semantic-spacing-component-xs;
  }
  
  &--spacing-lg {
    padding: $semantic-spacing-component-lg;
    gap: $semantic-spacing-component-sm;
  }

  // ==========================================================================
  // LAYOUT MODIFIERS
  // ==========================================================================
  
  &--scrollable {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    
    // Custom scrollbar styling
    &::-webkit-scrollbar {
      width: 6px;
    }
    
    &::-webkit-scrollbar-track {
      background: $semantic-color-surface-secondary;
      border-radius: 3px;
    }
    
    &::-webkit-scrollbar-thumb {
      background: $semantic-color-border-primary;
      border-radius: 3px;
      
      &:hover {
        background: $semantic-color-border-secondary;
      }
    }
    
    // Firefox scrollbar
    scrollbar-width: thin;
    scrollbar-color: $semantic-color-border-primary $semantic-color-surface-secondary;
  }
  
  &--max-height {
    height: var(--menu-max-height);
    max-height: var(--menu-max-height);
  }
  
  &--dense {
    &.menu-container--spacing-xs {
      padding: $semantic-spacing-micro-tight;
      gap: $semantic-spacing-micro-hairline;
    }
    
    &.menu-container--spacing-sm {
      padding: $semantic-spacing-component-xs;
      gap: $semantic-spacing-micro-tight;
    }
    
    &.menu-container--spacing-md {
      padding: $semantic-spacing-component-sm;
      gap: $semantic-spacing-micro-tight;
    }
    
    &.menu-container--spacing-lg {
      padding: $semantic-spacing-component-md;
      gap: $semantic-spacing-component-xs;
    }
  }
  
  &--rounded {
    border-radius: $semantic-border-radius-md;
    overflow: hidden;
  }

  // ==========================================================================
  // HORIZONTAL LAYOUT ADJUSTMENTS
  // ==========================================================================
  
  &--horizontal {
    .menu-item {
      flex-shrink: 0;
      
      &:not(:last-child) {
        margin-right: $semantic-spacing-component-xs;
      }
    }
    
    &.menu-container--spacing-none .menu-item:not(:last-child) {
      margin-right: 0;
    }
    
    &.menu-container--spacing-sm .menu-item:not(:last-child) {
      margin-right: $semantic-spacing-component-sm;
    }
    
    &.menu-container--spacing-md .menu-item:not(:last-child) {
      margin-right: $semantic-spacing-component-md;
    }
    
    &.menu-container--spacing-lg .menu-item:not(:last-child) {
      margin-right: $semantic-spacing-component-lg;
    }
  }
}

// ==========================================================================
// DYNAMIC HEIGHT SETUP
// ==========================================================================

.menu-container--max-height {
  --menu-max-height: 400px;
}

// ==========================================================================
// MENU DIVIDERS
// ==========================================================================

.menu-divider {
  height: 1px;
  background-color: $semantic-color-border-secondary;
  margin: $semantic-spacing-component-xs 0;
  
  .menu-container--spacing-none & {
    margin: 0;
  }
  
  .menu-container--spacing-sm & {
    margin: $semantic-spacing-component-sm $semantic-spacing-component-sm;
  }
  
  .menu-container--spacing-md & {
    margin: $semantic-spacing-component-md $semantic-spacing-component-md;
  }
  
  .menu-container--spacing-lg & {
    margin: $semantic-spacing-component-lg $semantic-spacing-component-lg;
  }
  
  .menu-container--horizontal & {
    height: auto;
    width: 1px;
    margin: 0 $semantic-spacing-component-xs;
    align-self: stretch;
  }
}

// ==========================================================================
// MENU SECTION HEADERS
// ==========================================================================

.menu-section-header {
  padding: $semantic-spacing-component-sm $semantic-spacing-component-md;
  font-size: $semantic-typography-font-size-xs;
  font-weight: $semantic-typography-font-weight-semibold;
  text-transform: uppercase;
  letter-spacing: $semantic-typography-letter-spacing-wider;
  color: $semantic-color-text-tertiary;
  background-color: $semantic-color-surface-secondary;
  
  .menu-container--spacing-sm & {
    padding: $semantic-spacing-component-xs $semantic-spacing-component-sm;
  }
  
  .menu-container--spacing-lg & {
    padding: $semantic-spacing-component-md $semantic-spacing-component-lg;
  }
  
  .menu-container--horizontal & {
    display: none; // Hide section headers in horizontal layout
  }
}

// ==========================================================================
// RESPONSIVE ADJUSTMENTS
// ==========================================================================

@media (max-width: 768px) {
  .menu-container {
    &--horizontal {
      flex-direction: column;
      align-items: stretch;
      
      .menu-item {
        margin-right: 0;
        
        &:not(:last-child) {
          margin-bottom: $semantic-spacing-component-xs;
        }
      }
    }
    
    &--spacing-md {
      padding: $semantic-spacing-component-sm;
      gap: $semantic-spacing-component-xs;
    }
    
    &--spacing-lg {
      padding: $semantic-spacing-component-md;
      gap: $semantic-spacing-component-sm;
    }
  }
}

// ==========================================================================
// ACCESSIBILITY ENHANCEMENTS
// ==========================================================================

.menu-container {
  &:focus-within {
    outline: 2px solid $semantic-color-border-focus;
    outline-offset: 2px;
  }
}

// ==========================================================================
// SUBMENU STYLES
// ==========================================================================

.menu-submenu {
  background-color: $semantic-color-surface-elevated;
  border: $semantic-border-width-1 solid $semantic-color-border-secondary;
  border-radius: $semantic-border-radius-md;
  box-shadow: $semantic-shadow-elevation-3;
  overflow: hidden;
  // Nested submenu indentation
  .menu-item {
    padding-left: calc($semantic-spacing-component-md + $semantic-spacing-component-lg);
  }
  
  .menu-container--spacing-sm & .menu-item {
    padding-left: calc($semantic-spacing-component-sm + $semantic-spacing-component-md);
  }
  
  .menu-container--spacing-lg & .menu-item {
    padding-left: calc($semantic-spacing-component-lg + $semantic-spacing-component-xl);
  }
}

// ==========================================================================
// ANIMATION UTILITIES
// ==========================================================================

.menu-container {
  // Smooth height transitions when content changes
  transition: height $semantic-motion-duration-fast $semantic-motion-easing-ease-in-out;
}

// Menu item enter/leave animations
@keyframes menu-item-enter {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes menu-item-leave {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-4px);
  }
}

// Add these classes via JavaScript for dynamic content
.menu-item-enter {
  animation: menu-item-enter $semantic-motion-duration-fast $semantic-motion-easing-ease-out;
}

.menu-item-leave {
  animation: menu-item-leave $semantic-motion-duration-fast $semantic-motion-easing-ease-out;
}