@include b(collapse) {
  @include define(border-color, var(--za-border-color));
  @include define(arrow-color, var(--za-arrow-color));
  @include define(arrow-size, var(--za-arrow-size));
  @include define(arrow-width, var(--za-arrow-width));
  @include define(arrow-disabled-color, #eee);
  @include define(header-height, 44px);
  @include define(header-padding-horizontal, 16px);
  @include define(header-padding-vertical, 15px);
  @include define(header-disable-color, var(--za-color-text-disabled));
  @include define(content-color, var(--za-color-text-caption));
  @include define(content-padding-vertical, var(--za-padding-v-sm));
  @include define(content-padding-horizontal, var(--za-padding-h-sm));

  position: relative;
  @include onepx(top bottom, var(--border-color));

  @include m(animated) {
    @include b(collapse-item) {
      &__content {
        transition: all 0.3s ease;
      }
    }
  }
}

@include b(collapse-item) {
  &:not(&--disabled) {
    @include e(header) {
      &:active {
        background-color: var(--za-background-active);
      }
    }
  }

  @include e(header) {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: var(--header-height);
    padding: 0 var(--header-padding-horizontal);
    transition-duration: 0.1s;
    transition-property: background-color, color;
    @include onepx(top, var(--border-color));

    &:after {
      left: var(--header-padding-horizontal);
    }
  }

  @include e(title) {
    flex: 1;
    font-size: 17px;
  }

  @include e(content) {
    position: relative;
    height: 0;
    overflow: hidden;
    font-size: 13px;
    color: var(--content-color);
    will-change: height;
    @include onepx(top, var(--border-color));

    &:after {
      left: var(--header-padding-horizontal);
    }
  }

  @include e(content__inner) {
    padding: var(--content-padding-vertical) var(--content-padding-horizontal);
  }

  @include e(arrow) {
    margin-top: -3px;
    margin-left: 5px;
    margin-right: 2px;

    &:after {
      display: inline-block;
      content: '';
      border-right: var(--arrow-width) solid var(--arrow-color);
      border-top: var(--arrow-width) solid var(--arrow-color);
      width: var(--arrow-size);
      height: var(--arrow-size);
      transform: rotate(135deg);
      transition: all 0.3s ease;
    }
  }

  @include m(disabled) {
    @include e(title) {
      color: var(--header-disable-color);
    }

    @include e(arrow) {
      &:after {
        border-right-color: var(--arrow-disabled-color);
        border-top-color: var(--arrow-disabled-color);
      }
    }
  }

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

    @include e(arrow) {
      margin-top: 0;

      &:after {
        transform: rotate(-45deg);
      }
    }
  }
}