/** @component accordion */

@include exports('md-accordion') {
  @include brand-font-face-light;
  @include brand-font-face-regular;
  .#{$accordion__class} {
    width: 100%;
    margin-bottom: 0;
    line-height: $body-line-height;

    &__group {
      display: block;
      width: 100%;
      margin-bottom: 0;

      @include accordion--light();
      @include accordion--dark();

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

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

        .#{$accordion__class}__header-text {
          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: 450;
        }

        &.#{$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
          > .#{$accordion__class}__header-icon:before {
          @include icon-arrow-up_16;
        }
      }
    }
  }
}