@import "../mixins/mixins";
@import "../mixins/typo";
@import "../mixins/utils";
@import "../config/variables";

@include b(form) {
}
@include b(form-item) {
  margin-bottom: $--size-base * 4;
  @include utils-clearfix;

  & .el-input__validateIcon {
    display: none;
  }

  @include when(no-margin) {
    margin: 0;
  }

  @include e(content) {
    line-height: 0px;
    position: relative;
    font-size: 0px;
    @include utils-clearfix;

    .el-input-group {
      vertical-align: middle;
    }
  }
  @include e(error) {
    color: $--color-error;
    @include bodyXS;
    //padding-top: 2px;
    padding: 2px $--size-base * 4 0;
    //position: absolute;
    //top: 100%;
    //left: 0;
  }

  @include when(error) {
    & .el-input__wrap,
    & .el-input.is-focused .el-input__wrap {
      &, &:focus, &:hover, &:active {
        box-shadow: inset 0 0 0 1px $--color-error;
      }
    }
    & .el-select__reference,
    & .el-select.is-focused .el-select__reference {
      &, &:focus, &:hover, &:active {
        box-shadow: inset 0 0 0 1px $--color-error;
      }
    }

    & .el-checkbox .el-checkbox__inner,
    & .el-radio .el-radio__inner {
      color: $--color-error;
    }

    & .el-checkbox.is-bordered,
    & .el-radio.is-bordered,
    & .el-switch:not(.is-checked) .el-switch__core:after {
      border-color: $--color-error;
    }

    & .el-select__reference .el-select__icon,
    & .el-input .el-input__suffix-inner {
      &, &:focus, &:hover, &:active {
        color: $--color-error;
      }
    }

    & .el-switch:not(.is-checked) .el-switch__core {
      &, &:focus, &:hover, &:active {
        box-shadow: inset 0 0 0 1px $--color-error;
      }
    }

    & .el-switch.is-checked .el-switch__core {
      &, &:focus, &:hover, &:active {
        background: $--color-error;
      }
    }

    & .el-switch.is-checked .el-switch__core::after {
      box-shadow: none;
      border: 1px solid transparent;
    }

    //& .el-input-group__append,
    //& .el-input-group__prepend {
    //  & .el-input__inner {
    //    border-color: transparent;
    //  }
    //}
    //.el-input__validateIcon {
    //  color: $--color-danger;
    //}
  }
  @include when(success) {
    //& .el-input__inner,
    //& .el-textarea__inner {
    //  &, &:focus {
    //    border-color: $--color-success;
    //  }
    //}
    //& .el-input-group__append,
    //& .el-input-group__prepend {
    //  & .el-input__inner {
    //    border-color: transparent;
    //  }
    //}
    //.el-input__validateIcon {
    //  color: $--color-success;
    //}
  }
}