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

.ui-accordion {
  // Core Structure
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  
  // Base styles
  font-family: $semantic-typography-font-family-sans;
  
  // Default styles (md variant as default)
  .ui-accordion__header {
    padding: $semantic-spacing-component-sm $semantic-spacing-component-md;
    font-size: $semantic-typography-font-size-md;
  }
  
  .ui-accordion__content {
    padding: $semantic-spacing-component-sm $semantic-spacing-component-md;
    font-size: $semantic-typography-font-size-md;
  }
  
  // Size variants
  &--sm {
    .ui-accordion__header {
      padding: $semantic-spacing-component-xs $semantic-spacing-component-sm;
      font-size: $semantic-typography-font-size-sm;
    }
    
    .ui-accordion__content {
      padding: $semantic-spacing-component-xs $semantic-spacing-component-sm;
      font-size: $semantic-typography-font-size-sm;
    }
  }
  
  &--md {
    .ui-accordion__header {
      padding: $semantic-spacing-component-sm $semantic-spacing-component-md;
      font-size: $semantic-typography-font-size-md;
    }
    
    .ui-accordion__content {
      padding: $semantic-spacing-component-sm $semantic-spacing-component-md;
      font-size: $semantic-typography-font-size-md;
    }
  }
  
  &--lg {
    .ui-accordion__header {
      padding: $semantic-spacing-component-md $semantic-spacing-component-lg;
      font-size: $semantic-typography-font-size-lg;
    }
    
    .ui-accordion__content {
      padding: $semantic-spacing-component-md $semantic-spacing-component-lg;
      font-size: $semantic-typography-font-size-lg;
    }
  }
  
  // Variant styles
  &--elevated {
    .ui-accordion__item {
      background: $semantic-color-surface-primary;
      border: $semantic-border-width-1 solid $semantic-color-border-subtle;
      border-radius: $semantic-border-radius-md;
      box-shadow: $semantic-shadow-elevation-1;
      margin-bottom: $semantic-spacing-component-xs;
      
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  
  &--outlined {
    .ui-accordion__item {
      background: $semantic-color-surface-primary;
      border: $semantic-border-width-1 solid $semantic-color-border-primary;
      border-radius: $semantic-border-radius-md;
      margin-bottom: $semantic-spacing-component-xs;
      
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  
  &--filled {
    .ui-accordion__item {
      background: $semantic-color-surface-secondary;
      border: $semantic-border-width-1 solid $semantic-color-surface-secondary;
      border-radius: $semantic-border-radius-md;
      margin-bottom: $semantic-spacing-component-xs;
      
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  
  // State variants
  &--disabled {
    opacity: 0.38;
    cursor: not-allowed;
    pointer-events: none;
  }
  
  // Individual accordion item
  &__item {
    position: relative;
    overflow: hidden;
    transition: all $semantic-motion-duration-fast $semantic-easing-standard;
    
    &--expanded {
      .ui-accordion__header {
        .ui-accordion__icon {
          transform: rotate(180deg);
        }
      }
    }
    
    &--disabled {
      opacity: 0.38;
      cursor: not-allowed;
      
      .ui-accordion__header {
        cursor: not-allowed;
        pointer-events: none;
      }
    }
  }
  
  // Header/trigger area
  &__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    color: $semantic-color-text-primary;
    font-weight: $semantic-typography-font-weight-medium;
    text-align: left;
    transition: all $semantic-motion-duration-fast $semantic-easing-standard;
    
    &:hover:not(:disabled) {
      background: $semantic-color-surface-secondary;
    }
    
    &:focus-visible {
      outline: 2px solid $semantic-color-primary;
      outline-offset: 2px;
    }
    
    &:active:not(:disabled) {
      background: $semantic-color-surface-elevated;
    }
    
    &:disabled {
      cursor: not-allowed;
      opacity: 0.38;
    }
  }
  
  // Header content area
  &__header-content {
    flex: 1;
    display: flex;
    align-items: center;
    gap: $semantic-spacing-component-sm;
  }
  
  // Icon container
  &__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: $semantic-sizing-icon-inline;
    height: $semantic-sizing-icon-inline;
    color: $semantic-color-text-secondary;
    transition: transform $semantic-motion-duration-fast $semantic-easing-standard;
    flex-shrink: 0;
  }
  
  // Content area
  &__content {
    overflow: hidden;
    background: $semantic-color-surface-primary;
    color: $semantic-color-text-primary;
    line-height: $semantic-typography-line-height-relaxed;
    
    // Animation states
    &--collapsed {
      max-height: 0;
      padding-top: 0;
      padding-bottom: 0;
      transition: 
        max-height $semantic-motion-duration-normal $semantic-easing-standard,
        padding $semantic-motion-duration-normal $semantic-easing-standard;
    }
    
    &--expanded {
      max-height: 1000px; // Large enough for most content
      transition: max-height $semantic-motion-duration-normal $semantic-easing-standard;
    }
    
    &--expanding {
      transition: 
        max-height $semantic-motion-duration-normal $semantic-easing-standard,
        padding $semantic-motion-duration-normal $semantic-easing-standard;
    }
  }
  
  // Content inner wrapper for proper padding animation
  &__content-inner {
    padding-top: $semantic-spacing-component-xs;
  }
  
  // Multiple expand mode styling
  &--multiple {
    .ui-accordion__item:not(:last-child) {
      border-bottom: $semantic-border-width-1 solid $semantic-color-border-subtle;
    }
  }
  
  // Dark mode support
  :host-context(.dark-theme) & {
    .ui-accordion__item {
      background: $semantic-color-surface-elevated;
      border-color: $semantic-color-border-secondary;
    }
    
    .ui-accordion__header {
      color: $semantic-color-text-primary;
      
      &:hover:not(:disabled) {
        background: $semantic-color-surface-secondary;
      }
    }
    
    .ui-accordion__content {
      background: $semantic-color-surface-elevated;
      color: $semantic-color-text-primary;
    }
  }
  
  // Responsive design
  @media (max-width: $semantic-breakpoint-md - 1) {
    &--lg {
      .ui-accordion__header {
        padding: $semantic-spacing-component-sm $semantic-spacing-component-md;
        font-size: $semantic-typography-font-size-md;
      }
      
      .ui-accordion__content {
        padding: $semantic-spacing-component-sm $semantic-spacing-component-md;
        font-size: $semantic-typography-font-size-md;
      }
    }
  }
  
  @media (max-width: $semantic-breakpoint-sm - 1) {
    &--md,
    &--lg {
      .ui-accordion__header {
        padding: $semantic-spacing-component-xs $semantic-spacing-component-sm;
        font-size: $semantic-typography-font-size-sm;
      }
      
      .ui-accordion__content {
        padding: $semantic-spacing-component-xs $semantic-spacing-component-sm;
        font-size: $semantic-typography-font-size-sm;
      }
    }
  }
}