@import "../styles/vars.less";
@prefixCls : cuke-collapse;

.@{prefixCls} {
  border: 1px solid @border-color;
  border-radius: @border-radius;
  font-size: @font-size;
  position: relative;
  .@{prefixCls}-item-disabled {
    .@{prefixCls}-item-header {
      cursor: not-allowed;
      color: @disabled-font-color;
    }
  }
  &-item {
    &:not(:last-child) {
      border-bottom: 1px solid @border-color;
    }
    &:last-child {
      .@{prefixCls}-item-header {
        &.@{prefixCls}-item-header-has-radius {
          border-bottom-left-radius: @border-radius;
          border-bottom-right-radius: @border-radius;
        }
      }
    }
    &-arrow {
      font-size: 16px;
      vertical-align: middle;
      margin-right: 10px;
      svg {
        transition: @default-transition;
      }
    }
    &-arrow-active {
      svg {
        transform: rotate(90deg);
      }
    }
    &-right-arrow {
      .@{prefixCls}-item-arrow {
        float: right;
      }
    }
    &-header {
      padding: 15px 20px;
      cursor: pointer;
      color: fade(@font-color, 90%);
      background-color: @bg-color;
      border-top-left-radius: @border-radius;
      border-top-right-radius: @border-radius;
    }
    &-content {
      padding: 20px;
      color: @font-color;
      overflow: hidden;
      transition: all @collapse-animate-time;
    }
    &-hide {
      padding-bottom: 0;
      padding-top: 0;
      height: 0;
    }
  }
}
