@prefixCls: ant-collapse;
@borderStyle: 1px solid #d9d9d9;

#arrow {
  .common(){
    width: 0;
    height: 0;
    font-size: 0;
    line-height: 0;
  }
  .right(@w, @h, @color) {
    border-top: @w solid transparent;
    border-bottom: @w solid transparent;
    border-left: @h solid @color;
  }

  .bottom(@w, @h, @color) {
    border-left: @w solid transparent;
    border-right: @w solid transparent;
    border-top: @h solid @color;
  }
}

.@{prefixCls} {
  background-color: #f3f5f7;
  border-radius: 3px;
  border-top: @borderStyle;
  border-left: @borderStyle;
  border-right: @borderStyle;

  &-content {
    height: 0;
    opacity: 0;
    transition-property: all;
    transition-duration: .3s;
    transition-timing-function: ease-in;
    overflow: hidden;
    color: #999;
    padding: 0 16px;
    background-color: #fbfbfb;
    > p, div {
      margin-top: 10px;
      margin-bottom: 10px;
    }
  }

  &-content-active {
    opacity: 1;
    height: auto;
    border-bottom: @borderStyle;
  }

  &-header {
    height: 38px;
    line-height: 38px;
    text-indent: 16px;
    color: #666;
    border-bottom: @borderStyle;
    &:before {
      display: inline-block;
      content: '\20';
      #arrow > .common();
      #arrow > .right(3px, 4px, #666);
      vertical-align: middle;
      margin-right: 8px;
    }
  }

  &-item-active {
    .@{prefixCls}-header::before {
      #arrow > .bottom(3px, 4px, #666);
    }
  }
}