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

// Tokens available globally via main application styles

// ==========================================================================
// LIST CONTAINER COMPONENT
// ==========================================================================
// Container component for list items with elevation, spacing, and scrolling
// Provides consistent layout and styling using semantic design tokens
// ==========================================================================

.list-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  background-color: $semantic-color-surface-primary;
  position: relative;
  overflow: hidden;

  // ==========================================================================
  // 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;
    
    .list-item:not(:last-child) {
      margin-bottom: 0;
    }
  }
  
  &--spacing-xs {
    padding: $semantic-spacing-component-xs 0;
    
    .list-item:not(:last-child) {
      margin-bottom: $semantic-spacing-component-xs;
    }
  }
  
  &--spacing-sm {
    padding: $semantic-spacing-component-sm 0;
    
    .list-item:not(:last-child) {
      margin-bottom: $semantic-spacing-component-sm;
    }
  }
  
  &--spacing-md {
    padding: $semantic-spacing-component-md 0;
    
    .list-item:not(:last-child) {
      margin-bottom: $semantic-spacing-component-md;
    }
  }
  
  &--spacing-lg {
    padding: $semantic-spacing-component-lg 0;
    
    .list-item:not(:last-child) {
      margin-bottom: $semantic-spacing-component-lg;
    }
  }

  // ==========================================================================
  // 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(--list-max-height);
    max-height: var(--list-max-height);
  }
  
  &--dense {
    &.list-container--spacing-xs .list-item:not(:last-child) {
      margin-bottom: $semantic-spacing-micro-tight;
    }
    
    &.list-container--spacing-sm .list-item:not(:last-child) {
      margin-bottom: $semantic-spacing-component-xs;
    }
    
    &.list-container--spacing-md .list-item:not(:last-child) {
      margin-bottom: $semantic-spacing-component-sm;
    }
    
    &.list-container--spacing-lg .list-item:not(:last-child) {
      margin-bottom: $semantic-spacing-component-md;
    }
  }
  
  &--rounded {
    border-radius: $semantic-border-radius-md;
    overflow: hidden;
    
    .list-item:first-child {
      border-top-left-radius: $semantic-border-radius-md;
      border-top-right-radius: $semantic-border-radius-md;
    }
    
    .list-item:last-child {
      border-bottom-left-radius: $semantic-border-radius-md;
      border-bottom-right-radius: $semantic-border-radius-md;
    }
  }
}

// ==========================================================================
// FADE INDICATOR
// ==========================================================================

.list-container__fade-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 24px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    $semantic-color-surface-primary 100%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  
  .list-container--scrollable:not(.list-container--at-bottom) & {
    opacity: 1;
  }
}

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

// JavaScript will set this CSS custom property
.list-container--max-height {
  --list-max-height: 400px;
}

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

@media (max-width: 768px) {
  .list-container {
    &--spacing-md {
      padding: $semantic-spacing-component-sm 0;
      
      .list-item:not(:last-child) {
        margin-bottom: $semantic-spacing-component-sm;
      }
    }
    
    &--spacing-lg {
      padding: $semantic-spacing-component-md 0;
      
      .list-item:not(:last-child) {
        margin-bottom: $semantic-spacing-component-md;
      }
    }
  }
}

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

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

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

.list-container {
  // Smooth height transitions when content changes
  transition: height 0.2s ease-in-out;
}

// List item enter/leave animations
@keyframes list-item-enter {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

// Add these classes via JavaScript for dynamic content
.list-item-enter {
  animation: list-item-enter 0.2s ease-out;
}

.list-item-leave {
  animation: list-item-leave 0.2s ease-out;
}