@use 'sass:math';
@use '../../_styles/variables' as *;
@use '../../_styles/mixins' as *;
@use "pkg:@ohu-mobile/styles" as *;

$collapsePrefixClass: #{$prefix}collapse;

.#{$collapsePrefixClass} {
  &-item {
    // @include hair-border($colorDivider, bottom) {
    //   border-style: solid;
    // }
    &__header {
      position: relative;
      padding: 30px 32px;
      font-size: 32px;
      color: $colorTextBase;
      line-height: math.div(44, 32) * 1em;
      @include ellipsis;
      cursor: pointer;
      @include tap-component();
      background: $collapseHeaderBackground;
      &:active {
        background: $collapseHeaderActiveColor;
      }
      &__icon {
        top: 30px;
        position: absolute;
        display: inline-block;
        text-align: center;
        width: 48px;
        height: 48px;
        color: $collapseExpandIconColor;
        transition: all 400ms easing(out-quint);
        transform: rotate(0);
        &.is-expand {
          transform: rotate(-180deg);
        }
        > .#{$prefix}icon {
          transform: scale(1.2, 1.2);
        }
      }
      &.is-right {
        padding-right: 72px;
        .#{$collapsePrefixClass}-item__header__icon {
          right: 30px;
        }
      }
      &.is-left {
        padding-left: 96px;
        .#{$collapsePrefixClass}-item__header__icon {
          left: 28px;
        }
      }
    }
    &__content {
      color: $collapseContntColor;
      padding: 0 0 0 28px;
      overflow: hidden;
      &__inner {
        padding: 30px 28px 30px 0;
        font-size: 32px;
        @include text-wrap;
        &.has-list {
          padding: 0;
          .#{$prefix}list-item {
            font-size: 32px;
            color: $collapseContntColor;
            &:last-of-type {
              &::after {
                display: none;
              }
            }
          }
        }
      }
    }
    &.is-disabled {
      .#{$collapsePrefixClass}-item__header {
        opacity: .4;
        cursor: not-allowed;
        &:active {
          background: $collapseHeaderBackground;
        }
      }
    }
  }
}