@import '../settings/colors';
@import '../settings/core';
@import '../settings/accordion';
@import '../settings/list-item';
@import '../tools/mixins/accordion';
@import '../settings/fonts';
@import '../tools/mixins/core';
@import 'node_modules/@collabui/icons/scss/mixins';

@include exports('cui-accordion') {
  .#{$accordion__class} {
    margin-bottom: 0;
    width: 100%;

    &__group {
      display: block;
      margin-bottom: 0;
      width: 100%;
      @include accordion--light();
      @include accordion--dark();

      &.#{$accordion__class}__group--disabled {
        > .#{$accordion__class}__header {
          opacity: $accordion-header__opacity--disabled;
          pointer-events: none;
        }
      }

      > .#{$accordion__class}__header {
        display: flex;
        padding: $accordion-header__padding;
        font-family: $accordion-header__font-family;
        font-size: $accordion__font-size;
        font-weight: normal;
        cursor: pointer;
        justify-content: space-between;
        align-items: center;
        width: 100%;

        > .#{$accordion__class}__header-icon:before {
          @include icon-arrow-down_16;
          font-family: $icon-font-name;
          font-size: $accordion-arrow__font-size;
          font-weight: normal;
        }

        &.#{$accordion__class}__header {
          &--56 {
            height: rem-calc(56);
          }
        }
      }
      > .#{$accordion__class}__content {
        display: none;
        width: 100%;

        .#{$list-item__class} {
          height: $accordion-list-item__height;
          padding: 0 $accordion-list-item__padding 0
            $accordion-list-item__padding;
          font-family: $accordion-list-item__font-family;
          font-size: $accordion__font-size;
        }
      }
      &.#{$accordion__class}__group--active {
        > .#{$accordion__class}__content {
          display: block;
        }

        .#{$accordion__class}__header-icon:before {
          @include icon-arrow-up_16;
        }
      }
    }
  }
}

/**
* @component accordion
* @section default
* @html
  <div class="cui-accordion">
    <div
      aria-expanded="true"
      class="cui-accordion__group cui-accordion__group--active">
      <div role="button" class="cui-accordion__header">
        <div>Accordion 1</div>
        <span class="cui-accordion__header-icon"></span>
      </div>
      <div class="cui-accordion__content">
        <div
          aria-current="false"
          class="cui-list-item"
          id="cui-list-item-12"
          role="listItem"
          title="Content 1">Content 1</div>
      </div>
    </div>
    <div aria-expanded="false" class="cui-accordion__group">
      <div role="button" class="cui-accordion__header">
        <div>Accordion 2</div>
        <span class="cui-accordion__header-icon"></span>
      </div>
      <div class="cui-accordion__content">
        <div
          aria-current="false"
          class="cui-list-item"
          id="cui-list-item-13"
          role="listItem"
          title="Content 2">Content 2</div>
      </div>
    </div>
  </div>
*/

/**
* @component accordion
* @section multi-open
* @html
  <div class="cui-accordion">
    <div
      aria-expanded="true"
      class="cui-accordion__group cui-accordion__group--active">
      <div role="button" class="cui-accordion__header">
        <div>Accordion 1</div>
        <span class="cui-accordion__header-icon"></span>
      </div>
      <div class="cui-accordion__content">
        <div
          aria-current="false"
          class="cui-list-item"
          id="cui-list-item-14"
          role="listItem"
          title="Content 1">Content 1</div>
      </div>
    </div>
    <div
      aria-expanded="true"
      class="cui-accordion__group cui-accordion__group--active">
      <div role="button" class="cui-accordion__header">
        <div>Accordion 2</div>
        <span class="cui-accordion__header-icon"></span>
      </div>
      <div class="cui-accordion__content">
        <div
          aria-current="false"
          class="cui-list-item"
          id="cui-list-item-15"
          role="listItem"
          title="Content 2">Content 2</div>
      </div>
    </div>
  </div>
*/