@import (reference) '~@/assets/style/extend.less';
.yo-form {
  &--fixed {
    width: 660px;
    margin: 0 auto;
  }
  h1,
  .h1,
  h2,
  .h2,
  h3,
  .h3,
  h4,
  .h4,
  h5,
  .h5,
  h6,
  .h6 {
    color: darken(@white, 40%);
  }
  h3,
  .h3 {
    font-size: 16px;
  }
  h4,
  .h4 {
    font-size: 15px;
  }
  .yo-form-group {
    margin-bottom: @padding-md;
  }
  .ant-form-item {
    display: flex;
    justify-content: space-between;

    margin-bottom: -1px;
    padding: @padding-xs @padding-md;

    border: @border-width-base @border-style-base @border-color-split;
    background-color: @white;

    @box-shadow-focused: 0 0 0 2px fade(@primary-color, 50%);
    &::before,
    &::after {
      content: none;
    }
    .ant-form-item-control {
      text-align: right;
    }
    .ant-input,
    .ant-input-number,
    .ant-mentions,
    .ant-select-selection,
    .ant-input-group-addon,
    .ant-cascader-picker,
    .ant-cascader-input.ant-input {
      z-index: 1;

      text-align: left;

      color: lighten(@black, 10%);
      border: 0;
      background-color: lighten(@black, 95%) !important;
    }
    .ant-mentions {
      textarea {
        background-color: lighten(@black, 95%);
      }
    }
    .focus {
      z-index: 2 !important;

      box-shadow: @box-shadow-focused;
    }
    .ant-input {
      &:focus {
        .focus();
      }
    }
    .ant-input-number-focused,
    .ant-mentions-focused {
      .focus();
    }
    .ant-select-focused,
    .ant-select-open {
      z-index: 2;
      .ant-select-selection {
        .focus();
      }
    }
    .ant-cascader-picker:focus {
      .ant-cascader-input {
        .focus();
      }
    }
    .ant-input-group {
      .ant-row-flex {
        .ant-select {
          width: 100%;
        }
      }
      .ant-input-group-addon {
        z-index: 0;
      }
    }
  }
  .ant-form-item-label {
    overflow: hidden;
    flex: 1 1 auto;

    margin-right: @padding-md;

    text-align: left;
    text-overflow: ellipsis;
    >label {
      color: lighten(@black, 10%);
      &::after {
        content: none;
      }
    }
  }
  .ant-form-item-control-wrapper {
    flex: 0 0 61.8%;

    width: 61.8%;
    min-width: 220px;
  }
  .yo-form--fluid {
    .ant-form-item-control-wrapper {
      flex: 0 0 100%;

      width: 100%;
    }
  }
  .ant-form-explain {
    font-size: @font-size-base - 1px;

    margin-top: @padding-xs;
    margin-bottom: @padding-xxs;
    margin-left: -61.8%;

    transition: none;
    animation: none;
    text-align: left;

    opacity: 1;
    color: fade(darken(@primary-color, 38.2%), 61.8%);
  }
  .has-error {
    .ant-form-explain {
      color: @error-color;
    }
  }
  // 上下布局
  .yo-form--vertical {
    display: block;
    .ant-form-item-control {
      text-align: left;
    }
    &-radio {
      .ant-radio-wrapper {
        line-height: @padding-lg;

        display: block;

        margin-right: 0;
        +.ant-radio-wrapper {
          margin-top: @padding-sm;
        }
      }
    }
    .ant-form-item-control-wrapper {
      margin-left: @padding-lg;
    }
    .ant-form-explain {
      margin-left: 0;
    }
  }
}
.yo-modal-form {
  .ant-modal-body {
    padding: 0;
  }
  .yo-form {
    h1,
    h2,
    h3,
    h4,
    h5 {
      margin-top: @padding-sm;
      padding: 0 @padding-md;
    }
    .yo-form-group {
      margin-bottom: 0;
    }
    .ant-form-item {
      border-right: 0;
      border-left: 0;
      &:first-child {
        margin-top: -1px;
      }
    }
  }
}
.yo-drawer-form {
  .ant-drawer-header {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 7;

    width: 100%;
  }
  .ant-drawer-body {
    padding: @padding-lg + 56px @padding-lg;
  }
  .ant-drawer-footer {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 7;

    width: 100%;
    padding: 10px @padding-md;

    text-align: right;

    border-top: @border-width-base @border-style-base @border-color-split;
    background: @white;
    button+button {
      margin-left: @padding-xs;
    }
  }
}