// Accordion
.accordion {
  background: white;
  @include border-radius();
  @include box-shadow($shadow-sm);
  overflow: hidden;
  
  &__item {
    border-bottom: 1px solid $border-light;
    
    &:last-child {
      border-bottom: none;
    }
  }
  
  &__header {
    width: 100%;
    background: none;
    border: none;
    padding: $spacing-lg $spacing-xl;
    text-align: left;
    @include flex-between;
    cursor: pointer;
    font-size: $font-size-base;
    font-weight: $font-weight-medium;
    color: $text-color;
    @include transition();
    
    @include media-down('sm') {
      padding: $spacing-base $spacing-lg;
      font-size: $font-size-sm;
    }
    
    &:hover {
      background-color: $bg-secondary;
    }
    
    &:focus {
      outline: 2px solid $primary-color;
      outline-offset: -2px;
    }
    
    &[aria-expanded="true"] {
      background-color: $bg-secondary;
      color: $primary-color;
      
      .accordion__icon {
        transform: rotate(180deg);
      }
    }
  }
  
  &__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    @include transition(transform);
    position: relative;
    
    &::before,
    &::after {
      content: '';
      position: absolute;
      background-color: currentColor;
      @include transition();
    }
    
    &::before {
      top: 50%;
      left: 0;
      right: 0;
      height: 2px;
      transform: translateY(-50%);
    }
    
    &::after {
      top: 0;
      bottom: 0;
      left: 50%;
      width: 2px;
      transform: translateX(-50%);
    }
  }
  
  &__content {
    max-height: 0;
    overflow: hidden;
    @include transition(max-height 0.3s ease-out);
    
    &[aria-hidden="false"] {
      max-height: 1000px;
      @include transition(max-height 0.3s ease-in);
    }
  }
  
  &__body {
    padding: 0 $spacing-xl $spacing-lg;
    
    @include media-down('sm') {
      padding: 0 $spacing-lg $spacing-base;
    }
    
    p:last-child {
      margin-bottom: 0;
    }
  }
}

// Accordion variants
.accordion {
  &--flush {
    background: none;
    box-shadow: none;
    
    .accordion__item {
      background: white;
      margin-bottom: $spacing-base;
      @include border-radius();
      @include box-shadow($shadow-sm);
      border-bottom: none;
      
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  
  &--minimal {
    background: none;
    box-shadow: none;
    
    .accordion__header {
      padding: $spacing-base 0;
      border-bottom: 1px solid $border-light;
      
      &:hover {
        background: none;
        color: $primary-color;
      }
      
      &[aria-expanded="true"] {
        background: none;
        border-bottom-color: $primary-color;
      }
    }
    
    .accordion__body {
      padding: $spacing-base 0 $spacing-lg;
    }
    
    .accordion__item {
      border-bottom: none;
    }
  }
}

// Animation for smooth expand/collapse
.accordion__content {
  &.expanding {
    animation: expand 0.3s ease-out forwards;
  }
  
  &.collapsing {
    animation: collapse 0.3s ease-in forwards;
  }
}

@keyframes expand {
  from {
    max-height: 0;
  }
  to {
    max-height: 1000px;
  }
}

@keyframes collapse {
  from {
    max-height: 1000px;
  }
  to {
    max-height: 0;
  }
}