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

@component-namespace el {
  @b collapse {
    border: 1px solid var(--collapse-border-color);
    border-radius: var(--collapse-border-radius);
  }
  @b collapse-item {
    @e header {
      height: var(--collapse-header-height);
      line-height: @height;
      padding-left: 15px;
      background-color: var(--collapse-header-fill);
      color: var(--collapse-header-color);
      cursor: pointer;
      border-bottom: 1px solid var(--collapse-border-color);
      font-size: var(--collapse-header-size);

      @e arrow {
        margin-right: 8px;
        transition: transform .3s;
      }
    }

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

    @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(90deg);
        }
      }
    }

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