@collapse-prefix: ~"@{prefix}collapse";
@collapse-item-prefix: ~"@{prefix}collapse-item";
.@{collapse-prefix}{
  display: block;
}
.@{collapse-item-prefix}{
  display: block;
  &:last-of-type {
    border-bottom: 1px solid @gray2-color;
  }
  &-header{
    height: 40px;
    line-height: 40px;
    border-top: 1px solid @gray2-color;
    padding: 0 10px;
    font-size:  13px;
    transition: all .2s;
    &:hover{
      cursor: pointer;
      color: @primary-color;
    }
  }
  &-expand{
    margin-top: 13px;
    margin-right: 5px;
    transform: rotateZ(0deg);
    transition: all .2s;
    font-size: 12px;
  }
  &-content{
    word-break: break-all;
    &-box{
      padding: 10px 20px;
    }
  }

  &.@{collapse-item-prefix}-active{
    .@{collapse-item-prefix}-header{
      .@{collapse-item-prefix}-expand{
        transform: rotateZ(90deg);
      }
    }
  }
}

.h-collapse-transition {
  transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;
}