@import "../vars.less";
@import "../mixins/index.less";

.ten-collapse {
  background: @collapse-bg;
  &-item {
    
    color: #000;
    font-size: @font-size;
    &__head {
      position: relative;
      margin-left: @collapse-margin-left;
      padding-left: @collapse-icon-right + @collapse-icon-width;
      font-size: @text-level-1-size;
      line-height: @text-level-1-line;
      padding-top: @collapse-title-padding-ver;
      padding-bottom: @collapse-title-padding-ver;
      color: @text-color;
      border-bottom: @border-main-2;
      cursor: pointer;
      &-icon {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        transition: transform .2s;
        color: @icon-color;
        font-size: @collapse-icon-width;
      }
    }
    &__content {
      background: @collapse-item-bg;
      line-height: @text-level-1-line;
      &-item {
        margin-left: @collapse-margin-left;
        padding: @collapse-item-padding;
        margin-left: @collapse-margin-left;
        border-bottom: @border-main-2;
        color: @text-color-lighter-1;
      }
    }
    &--active &__head {
      &-icon {
        transform: translateY(-50%) rotate(90deg);
      }
    }
  }
}