@use 'mixins/mixins.scss' as *;
@use 'common/var.scss' as *;

@include b(title) {
  $parent: &;
  width: 100%;
  @include e(header) {
    overflow: hidden;
    line-height: 50px;
  }

  @include e(title) {
    font-size: 15px;
    font-weight: 500;
    float: left;
  }

  @include e(toggle) {
    display: inline-block;
    font-weight: 400;
    color: $color-priamy;
    cursor: pointer;
    font-size: 14px;
    margin-left: 10px;
    display: inline-block;
    white-space: nowrap;

    .el-icon {
      vertical-align: -2px;
      transition: transform 0.3s;
    }
  }

  @include is(expanded) {
    #{$parent} {
      @include e(toggle) {
        .el-icon {
          transform: rotate(-180deg);
        }
      }
    }
  }

  @include e(buttons) {
    float: right;
  }

  @include e(content) {
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
  }
}