@import "./abstracts/variable";
@import "./abstracts/mixin";

@include b(collapse-item) {
  @include e(header) {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: $-collapse-header-padding;
    overflow: hidden;
    user-select: none;
  }

  @include e(title) {
    color: $-collapse-title-color;
    font-weight: $-fw-medium;
    font-size: $-collapse-title-fs;
  }

  @include e(arrow) {
    display: block;
    font-size: $-collapse-arrow-size;
    color: $-collapse-arrow-color;
    transition: transform 0.3s;

    @include when(retract) {
      transform: rotate(-180deg);
    }
  }

  @include e(wrapper) {
    position: relative;
    transition: height 0.3s ease-in-out;
    overflow: hidden;
    will-change: height;
  }

  @include e(body) {
    color: $-collapse-body-color;
    font-size: $-collapse-body-fs;
    padding: $-collapse-body-padding;
    line-height: 1.43;
  }

  @include when(disabled) {
    .wd-collapse-item__title {
      color: $-collapse-disabled-color;
    }
    .wd-collapse-item__arrow {
      color: $-collapse-disabled-color;
    }
  }
}