@w-collapse: ~'w-collapse';

.@{w-collapse} {
  background-color: #f7f7f7;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
  border-bottom: 0;
  & > &-item {
    border-bottom: 1px solid #d9d9d9;
  }
  & > &-item:last-child, & > &-item:last-child &-conten {
    border-radius: 0 0 5px 5px;
  }
  &-header {
    line-height: 22px;
    padding: 8px 0 8px 10px;
    color: rgba(0, 0, 0, .85);
    cursor: pointer;
    position: relative;
    transition: all .3s;
    & > i[class^="w-icon"]:first-child {
      margin-right: 6px;
      margin-top: -3px;
      transform: scale(.75) rotate(-90deg);
      transition: transform .24s;
    }
  }
  &-active &-header {
    & > i[class^="w-icon"]:first-child {
      transform: scale(.75) rotate(0);
    }
  }
  &-conten {
    overflow: hidden;
    color: rgba(0, 0, 0, .65);
    padding: 0 16px;
    background-color: #fff;
    &:before, &:after {
      content: "";
      display: inline-block;
      height: 10px;
    }
    &:before {
      border-top: 1px solid #d9d9d9;
    }
  }
  &-disabled &-header {
    cursor: not-allowed;
    color: rgba(0, 0, 0, .25);
    background-color: #f7f7f7;
  }
  &.no-border {
    border: 0;
    background: transparent;
  }
  &.no-border & {
    &-item {
      border: 0;
    }
    &-header {
      border-bottom: 1px solid #d9d9d9;
    }
  }
}
