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

// Tokens available globally via main application styles

// ==========================================================================
// MENU SUBMENU COMPONENT
// ==========================================================================
// Collapsible submenu component with smooth animations
// ==========================================================================

.submenu-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
  
  // Ensure parent menu item doesn't interfere with submenu hover states
  > ui-menu-item {
    position: relative;
    z-index: 1;
  }
}

.submenu-content {
  overflow: hidden;
  transition: max-height $semantic-motion-duration-slow $semantic-motion-easing-ease-in-out, opacity $semantic-motion-duration-normal $semantic-motion-easing-ease-in-out;
  // Apply indentation to the entire submenu content block
  margin-left: calc($semantic-spacing-component-lg + $semantic-spacing-component-sm);
  // Fix z-index and positioning to prevent hover state conflicts
  position: relative;
  z-index: 1;
  
  .menu-submenu {
    //border-left: 2px solid $semantic-color-border-secondary;
    border-radius: 0;
    background-color: $semantic-color-surface-elevated;
    box-shadow: none;
    position: relative;
    z-index: 2;
  }
}

// ==========================================================================
// ANIMATION STATES
// ==========================================================================

.submenu-wrapper--open {
  .submenu-content {
    max-height: 1000px; // Large enough to accommodate content
    opacity: 1;
  }
}

.submenu-wrapper:not(.submenu-wrapper--open) {
  .submenu-content {
    max-height: 0;
    opacity: 0;
  }
}

// ==========================================================================
// NESTED SUBMENU STYLING
// ==========================================================================

.submenu-content {
  .menu-item {
    position: relative;
    // Ensure submenu items have proper stacking context
    z-index: 3;
    // Clear any potential interaction with parent items
    pointer-events: auto;
    
    &::before {
      content: '';
      position: absolute;
      left: -2px;
      top: 50%;
      width: 8px;
      height: 1px;
      background-color: $semantic-color-border-secondary;
      transform: translateY(-50%);
    }
  }
}

// Force vertical layout for all submenus
.menu-submenu {
  // Override any inherited horizontal layout
  .menu-container {
    flex-direction: column !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
  }
  
  // Ensure menu items stack vertically and take full width
  .menu-item {
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 0;
    // Create isolated interaction area to prevent hover conflicts
    isolation: isolate;
    
    &:not(:last-child) {
      margin-bottom: 0 !important;
    }
    
    // Ensure hover states don't bleed to adjacent items
    &:hover {
      z-index: 4;
    }
  }
}

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

@media (max-width: 768px) {
  .submenu-content {
    margin-left: calc($semantic-spacing-component-md + $semantic-spacing-component-sm);
  }
}

// ==========================================================================
// REDUCED MOTION SUPPORT
// ==========================================================================

@media (prefers-reduced-motion: reduce) {
  .submenu-content {
    transition: none;
  }
}