@import './mixins/mixins.scss';
@import './themes/vars.scss';

@include b(collapse) {
  width: 100%;
}

@include themes-mixin {
  @include b(collapse) {
    @include b(collapse-item) {
      @include once {
        overflow: hidden;
        font-size: 14px;
        transition: border-color .3s $default-cubic-bezier;
        margin-top: 16px;
        &:first-child {
          margin-top: 0px;
        }
        &:first-child > {
          @include e(title) {
            padding-top: 0px;
          }
        }
        @include b(collapse-item) {
          margin-left: 32px;
        }
        @include e(content-wrapper) {
          @include fade-in-height-expand-transition($duration: .15s);
          overflow: hidden;
        }
        @include m(active) {
          @include e(title) {
            @include m(active) {
              @include b(icon) {
                transform: rotate(90deg);
              }
            }
          }
        }
      }
      &:not(:first-child) {
        border-top: 1px solid $--n-border-color;
      }
      @include e(title) {
        @include once {
          transition: color .3s $default-cubic-bezier;
          position: relative;
          cursor: pointer;
          margin-left: 18px;
          padding: 16px 0 0 0;
          @include b(icon) {
            transition: transform .15s $default-cubic-bezier, fill .3s $default-cubic-bezier;
            font-size: 16px;
            position: absolute;
            left: -18px;
            bottom: 0px;
          }
        }
        color: $--n-text-color;
        @include b(icon) {
          fill: $--n-text-color;
        }
      }
      @include e(content-inner) {
        @include once {
          transition: color .3s $default-cubic-bezier;
          padding-top: 16px;
        }
        color: $--n-secondary-text-color;
      }
    }
  }
}