@import (reference) '../extend.less';
.yo-form {
  &--fixed {
    width: 660px;
    margin: 0 auto;
  }
  .h1,
  .h2,
  .h3,
  .h4,
  .h5,
  .h6 {
    color: darken(@white, 40%);
  }
  .h3 {
    font-size: 16px;
  }
  .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: @component-background;

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

      text-align: left;

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

      box-shadow: @box-shadow-focused;
    }
    .unfoucs {
      z-index: 1 !important;

      box-shadow: none;
    }
    .ant-input {
      &:focus {
        .focus();
      }
    }
    .ant-input-affix-wrapper {
      >.ant-input {
        &:focus {
          .unfoucs();
        }
      }
    }
    .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-affix-wrapper:focus,
    .ant-input-affix-wrapper-focused {
      .focus();
    }
    .ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) {
      .ant-select-selector {
        .focus();
      }
    }
    .ant-picker-focused {
      .focus();
    }
    .ant-input-group {
      .ant-row-flex {
        .ant-select {
          width: 100%;
        }
      }
      .ant-input-group-addon {
        z-index: 0;
      }
    }
    .ant-cascader-picker-clear {
      background-color: @control-background;
    }
  }
  .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 {
    flex: 0 0 61.8%;

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

      width: 100%;

      text-align: inherit;
    }
  }
  .yo-form--short {
    .ant-form-item-control {
      flex: 0 0 38.2%;

      width: 38.2%;
    }
  }
  // 上下布局
  .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-form-link {
    display: flex;
    align-items: center;

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

    cursor: pointer;

    border: @border-width-base @border-style-base @border-color-split;
    background-color: @white;
    &:hover {
      background-color: darken(@white, 1%);
    }
    &:active {
      background-color: darken(@white, 3%);
    }
    &--title {
      font-size: @font-size-base + 1px;

      flex: 1;
    }
    &--content {
      flex: 1;

      text-align: right;

      color: fade(@black, 35%);
    }
    &--right-icon {
      margin-left: @padding-xs;

      color: fade(@black, 50%);
    }
  }
  &.yo-form--no-border {
    .ant-form-item {
      padding: @padding-md 0;

      border-right: 0;
      border-left: 0;
      &:first-child {
        border-top: 0;
      }
      &:last-child {
        border-bottom: 0;
      }
    }
    .yo-form-group {
      margin-bottom: 0;
    }
  }
}
.yo-modal-form {
  .ant-modal-body {
    padding: 0;
  }
  .yo-form {
    h1,
    h2,
    h3,
    h4,
    h5 {
      margin: 0;
      padding: @padding-sm @padding-md @padding-xs;
    }
    .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-wrapper-body {
    display: flex;
    flex-direction: column;
  }
  .ant-drawer-header {
    flex: 0 0 auto;
  }
  .ant-drawer-body {
    position: relative;

    flex: 1 1 100%;

    padding: 0;
  }
  .yo-drawer-form--body {
    position: absolute;
    top: 0;
    bottom: @border-width-base + 20px + @padding-md * 2;

    overflow: auto;

    width: 100%;
    padding: @padding-lg;
  }
  .ant-drawer-footer {
    position: absolute;
    left: 0;
    bottom: 0;

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

    text-align: right;

    border-top: @border-width-base @border-style-base @border-color-split;
    background: @component-background;
    button+button {
      margin-left: @padding-xs;
    }
  }
}
.ant-form {
  fieldset {
    margin-bottom: @padding-lg;
    padding: @padding-md;

    border: @border-width-base @border-style-base @border-color-split;
  }
  legend {
    display: inline-block;

    width: auto;
    margin-bottom: 0;
    padding: 0 @padding-md;

    border: 0;
    border-radius: @border-radius-base;
  }
}
.ant-form-horizontal {
  .ant-form-item-label {
    line-height: 1.5;

    margin-right: @padding-xs;

    white-space: normal;
  }
}
.ant-form-vertical {
  .ant-form-item-label {
    >label {
      font-weight: bold;
    }
  }
}
.ant-form-item-required {
  &::before {
    content: '' !important;
    vertical-align: middle;

    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid @highlight-color;
    background: none;
  }
}
.yo-form-page {
  .ant-form {
    .ant-radio-button-wrapper {
      margin-right: @padding-xs;
      margin-bottom: @padding-xs;

      border-left: @border-width-base @border-style-base @border-color-base;
      &.ant-radio-button-wrapper-checked {
        border-left-color: @primary-color;
      }
      &:not(:first-child) {
        &::before {
          content: none;
        }
      }
    }
  }
}
.yo-filter-item {
  display: flex;
  flex-flow: row wrap;

  margin-bottom: 0;
  .ant-tag-checkable {
    font-size: @font-size-base;
  }
  .ant-radio-button-wrapper {
    border: 0 !important;
    background-color: transparent;
    &:hover {
      color: @red-6;
    }
  }
  .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
    border-color: @red-6;
    background-color: @red-6;
    &:hover {
      border-color: @red-5;
      background-color: @red-5;
    }
    &:active {
      border-color: @red-7;
      background-color: @red-7;
      box-shadow: none;
    }
  }
}