@import "../../styles/mixin";
.#{$prefix}-collapse {
  border-radius: 4px;
  &-item {
    &-title {
      position: relative;
      padding: 13px 16px;
      min-height: 48px;
      line-height: 22px;
      cursor: pointer;
      border-bottom: 1px solid #e8e8e8;
      span.fade:after,
      span.fade:before {
        display: none;
      }
      span.right:after {
        content: "\f262";
        position: absolute;
        top: 50%;
        right: 16px;
        margin-top: -11px;
        font-family: iconfont;
        transition: transform 300ms;
      }
      span.left {
        margin-left: 30px;
      }
      span.left::before {
        content: "\f262";
        position: absolute;
        top: 50%;
        left: 16px;
        margin-top: -11px;
        font-family: iconfont;
        transition: transform 300ms;
      }
    }
    &-cont {
      display: none;
      padding: 16px;
      line-height: 22px;
      background: #f8f8f8;
      color: #aaa;
      transition: background-color 300ms;
      border-bottom: 1px solid #e8e8e8;
    }
  }
  &-item.disabled {
    .lg-collapse-item-title {
      cursor: no-drop;
      color: #d2d2d2;
    }
  }
  &-item.open {
    .lg-collapse-item-title.up {
      span:after {
        transform: rotate(-180deg);
      }
      span::before {
        transform: rotate(-180deg);
      }
    }
    .lg-collapse-item-cont {
      display: block;
    }
  }
}
.#{$prefix}-collapse.border {
  border: 1px solid #e8e8e8;
}