@charset "UTF-8";
@import "./common/var.css";

@component-namespace el {
  @b collapse {
   /*border: 1px solid var(--collapse-border-color);*wbx edit*/
    border-radius: var(--collapse-border-radius);
  }
  @b collapse-item {
    @e header {
      height: var(--collapse-header-height);
      line-height: @height;
      padding-left: 15px;
      color: var(--collapse-header-color);
      cursor: pointer;
    /*border-bottom: 1px solid var(--collapse-border-color);*wbx edit*/
      font-size: var(--collapse-header-size);
      display: block;
      >span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
        max-width: 80%;
        vertical-align: middle;
      }
      @e arrow {
        margin-right: 8px;
        transition: transform .3s;
        color:var(--color-grey);/*wbx edit*/
        vertical-align: text-bottom;
        font-size: 14px;
      }
    }

    @e wrap {
      will-change: height;
      /*background-color: var(--collapse-content-fill);*wbx edit*/
      overflow: hidden;
      box-sizing: border-box;
      /*border-bottom: 1px solid var(--collapse-border-color);*wbx edit*/
    }

    @e content {
      padding: 10px 15px;
      font-size: var(--collapse-content-size);
      color: var(--collapse-content-color);
      line-height: 1.769230769230769;
    }

    @when active {
      > .el-collapse-item__header {
        .el-collapse-item__header__arrow {
          transform: rotate(180deg);
        }
      }
    }

    &:last-child {
      margin-bottom: -1px;
    }
  }
}
