@use "../../../styles/tools/generate";
@use "./config";
@use "./mixins";

@layer components {
  .accordion {
    $this: &;
    @include mixins.base();

    &__item {
      @include mixins.item();

      #{$this}--enclosed & {
        @include mixins.enclosed-item();
      }

      #{$this}--no-top-border &:first-child {
        border-top: none;
      }
    }

    &__header {
      @include mixins.header();
    }

    @each $size, $value in config.$spacing {
      &#{generate.variant-name($size)} &__header {
        @include mixins.header-size($size);
      }
    }

    &__button {
      @include mixins.button-base();
    }

    &__title {
      @include mixins.title();
    }

    &__body {
      @include mixins.body();
    }

    &__icon {
      @include mixins.icon();

      [aria-expanded="true"] > &,
      &.is-active {
        @include mixins.icon-active();
      }
    }
  }
}