@import './../theme/vars.scss';
@import './../mixins/reset.scss';

$vender: $vender-prefix;
$form-cls: #{$vender}-form;
$form-item-cls: #{$form-cls}-item;
$form-footer-cls: #{$form-cls}-footer;

.#{$form-item-cls} {
  @include reset-component2;

  margin-bottom: $form-item-margin-bottom;
  font-size: 12px;
  color: $form-color;
  vertical-align: top;

  .#{$vender}-switch {
    margin: 0.5em 0;
  }

  .#{$vender}-tag-group {
    margin: 0.6em 0;
  }

  .#{$vender}-checkbox-group {
    margin: 0.5em 0;
  }
}

.#{$form-item-cls}-control {
  position: relative;
}

.#{$form-item-cls}-label {
  display: inline-block;
  overflow: hidden;
  line-height: $form-item-height;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.#{$form-item-cls}-label label::after {
  position: relative;
  margin: 0 0.7em 0 0.1em;
  content: ':';
}

.#{$form-item-cls}-field-tip {
  font-size: 14px;
  vertical-align: bottom;
}

.#{$form-item-cls}.required {
  .#{$form-item-cls}-label label::before {
    @include formitem-required;
  }
}

.#{$form-item-cls}-explain {
  line-height: 1.5;
  color: $form-item-explain-color;
}

.#{$form-item-cls}.error {
  .#{$form-item-cls}-explain {
    color: $form-item-error-color;
  }

  .#{$vender}-input-inner {
    box-shadow: 0 0 0 0 white, 0 0 0 0 black, inset 0 0 0 1px $form-required-color, inset 0 1px 1px $form-item-error-shadow;
  }

  // input
  .amos-input,
  .amos-select {
    border-color: $form-item-error-color;
  }

  .amos-select-dropdown-icon {
    color: $form-item-error-color;
  }
}

// 显示 help or error 时，设置底部外边距为 0 （layout = inline|none、以及设置了 labelPosition = left|right 时不能设置为 0）
.#{$form-item-cls}.help,
.#{$form-item-cls}.error {
  margin-bottom: 0;
}

.#{$form-cls}-inline {
  & .#{$form-cls}-item + .#{$form-cls}-item {
    margin: 0 0 0 0.8em;
  }

  .#{$form-item-cls}-control,
  .#{$form-item-cls}-label,
  .#{$form-item-cls} {
    display: inline-block;
  }

  .#{$form-item-cls} {
    margin-bottom: $form-item-margin-bottom;
  }

  .#{$form-item-cls}-explain {
    position: absolute;
  }
}

.#{$form-cls}-label-left,
.#{$form-cls}-label-right {
  .#{$form-item-cls}-control,
  .#{$form-item-cls}-label {
    display: inline-block;
  }

  .#{$form-item-cls} {
    margin-bottom: $form-item-margin-bottom;
  }

  .#{$form-item-cls}-explain {
    position: absolute;
  }
}

// labelPosition === 'left|right'
.#{$form-cls}-label-left,
.#{$form-cls}-label-top {
  .#{$form-item-cls}-label {
    text-align: left;
  }
}

// layout === 'none', 且不包含 label position === right 属性
// .#{$form-cls}-none:not([class|="#{$form-cls}-label"]) {
.#{$form-cls}-none:not(.#{$form-cls}-label-right) {
  .#{$form-item-cls}-label {
    text-align: left;
  }
}

.#{$form-cls}-label-top {
  &.#{$form-cls}-inline {
    .#{$form-item-cls}-control {
      display: block;
    }
  }
}

.#{$form-footer-cls} {
  display: block;
  margin-top: 1em;
  text-align: right;
}

// form submit
.#{$form-cls}-submit {
  .amos-form-submit-text {
    display: inline-block;
    vertical-align: middle;
  }

  .amos-single-spin {
    display: inline-block;
    margin-right: 5px;
    vertical-align: middle;
  }
}

// form filled
.#{$form-cls}-filled {
  position: relative;

  .#{$form-item-cls}-control,
  .#{$form-item-cls}-label {
    display: inline-block;
    vertical-align: top;
  }

  .#{$form-item-cls}-control {
    .amos-input,
    .amos-input-number,
    .amos-unitnumber,
    .amos-select:not(.amos-unitnumber-units),
    .amos-multi-select,
    .amos-cascader-dropdown,
    .amos-slider,
    .amos-base64-image {
      width: 100%;
    }

    .amos-base64-image {
      .amos-input {
        width: calc(100% - 100px);
      }
    }
  }
}

// field set
.#{$form-cls}-fieldset {
  width: 100%;
  min-width: 100%;
  padding: 8px;
  margin-bottom: $form-item-margin-bottom;
  border: 1px solid #d9d9d9;
  border-radius: 6px;

  &-legned {
    width: auto;
    padding: 0 4px;
    margin: 0;
    font-size: 12px;
    line-height: 28px;
    border: 0;
  }
}

// hightlight
.#{$form-item-cls}-highlight {
  display: inline-block;
  margin-right: 0.3em;
  font-family: 'SimSun', serif;
  font-size: 12px;
  line-height: 1;
  color: var(--formitem-highlight-color);
}