@import "mixins/mixins";
@import "mixins/utils";
@import "common/var";

@include b(form-section) {
    display: flex;
    flex-direction: column;
    width: 100%;

    @include e(head) {
      background-color: #f5f5f5d0;
      display: flex;
      flex-direction: column;

      padding-top: 10px;
      padding-bottom: 10px;
      padding-left: 10px;
      padding-right: 10px;
      margin-bottom: 22px;

      @include when(border){
        border-left-style: solid;
        border-left-width: 3px;
        border-left-color: #4b4343b7;
      }
    }

    @include e(tips) {
      background-color: #f5f5f5d0;
      display: flex;
      font-size: 13px;
      color: #666666;
      margin-top: 2px;
      flex-direction: column;
    }

    @include e(title){
        flex: 1;
        display: flex;
        flex-direction: row;

        @include e(label) {
          flex: 1;
        }

        @include m(medium) {
          .el-form-section__label {
            line-height: 36px;
            font-weight: 600;
          }
        }
        @include m(small) {
          .el-form-section__label {
            line-height: 32px;
          }

          &.el-form-section {
            margin-bottom: 18px;
          }
        }
        @include m(mini) {
          .el-form-section__label {
            line-height: 28px;
          }

          &.el-form-section {
            margin-bottom: 18px;
          }
        }
    }

    @include e(body){
      padding-left: 10px;
    }

    @include e(label){
      text-align: left;
      font-size: 14px;
      font-weight: 600;
      color: #333333;
    }

    @include when(grid) {
      .el-form-section__head {
        margin-bottom: 1px;
      }
      .el-form-section__body {
        padding: 1px;
      }
    }
}