@use '../mixins/mixins.scss' as *;

@include b(collapse-item) {
  position: relative;
  width: 100%;
  overflow: hidden;

  transition: height 0.3s ease;

  /* 标题 start */
  @include e(title) {
    position: relative;
    width: 100%;
    height: 100rpx;
    padding: 0rpx 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .arrow {
      transition: transform 0.3s;
      transform: rotate(0deg);
    }
  }
  /* 标题 end */

  /* 内容 start */
  @include e(content) {
    position: relative;
    width: 100%;
    padding: 30rpx;
    height: auto;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  /* 内容 end */

  /* 激活状态 start */
  @include when(active) {
    @include e(title) {
      .arrow {
        transform: rotate(90deg);
      }
    }
    @include e(content) {
      opacity: 1;
    }
  }
  /* 激活状态 end */

  /* 禁用状态 start */
  @include when(disabled) {
    opacity: 0.6;
    background-color: var(--tn-color-gray-light);
  }
  /* 禁用状态 end */
}