@include b(collapse) {
  overflow: hidden;

  &-item {
    @include e(title) {
      position: relative;
      height: var(--collapse-height);
      line-height: var(--collapse-height);
      padding: 0 var(--collapse-padding);
      @include onepx(bottom);

      &:after {
        left: r(15);
      }
    }

    @include e(content) {
      position: relative;
      height: 0;
      overflow: hidden;
      @include onepx(bottom);

      &:after {
        left: r(15);
      }

      &-inner {
        padding: var(--padding-v-lg) var(--collapse-padding);
      }

      @include m(anim) {
        transition: all 0.15s ease-out;
      }
    }

    @include e(arrow) {
      position: absolute;
      width: r(10);
      height: r(10);
      top: r(20);
      right: var(--collapse-padding);
      border-right: var(--collapse-arrow-border-width) solid var(--collapse-arrow-color);
      border-bottom: var(--collapse-arrow-border-width) solid var(--collapse-arrow-color);
      transform: rotate(45deg);
      transition: transform 0.15s ease-out;
      transform-origin: 50% 50%;

      @include m(hidden) {
        visibility: hidden;
      }
    }

    @include m(active) {
      @include e(content) {
        height: auto;
      }

      @include e(arrow) {
        transform: rotate(-135deg);
      }
    }

    @include m(disabled) {
      @include e(arrow) {
        border-right-color: var(--collapse-arrow-disabled-color);
        border-bottom-color: var(--collapse-arrow-disabled-color);
      }
    }

    @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
      @include e(title, content) {
        @include onepx(bottom);

        &:after {
          left: r(15);
        }
      }
    }
  }
}