@use "sass:math";
@use "../../common/var.scss" as *;
@use "../../mixins/var" as *;
@use "../../mixins/function.scss" as *;
@use "../../mixins/index.scss" as *;
@use "../../variables.scss" as variables;

@use "./var.scss" as *;
@import "./grid.scss";
@import "./animation.scss";

@function getFormItemCssVar($args...) {
  @return getVacCssVar($form-item-prefix, $args...);
}

.#{$form-item-prefix} {
  @include set-vac-component-css-var($form-item-prefix, $formily-form-item);
}
.#{$form-item-prefix} {
  display: flex;
  margin-bottom: getFormItemCssVar("margin-bottom");
  position: relative;
  line-height: getFormItemCssVar("medium-line-height");
  font-size: getFormItemCssVar("base");

  &-label * {
    line-height: getFormItemCssVar("medium-line-height");
  }

  &-label-content {
    min-height: getFormItemCssVar("medium-line-height");
  }

  &-content-component {
    line-height: getFormItemCssVar("medium-line-height");
  }

  .#{variables.$elNamespace}-input,
  .#{variables.$elNamespace}-input-number,
  .#{variables.$elNamespace}-input-number.is-controls-right,
  .#{variables.$elNamespace}-select,
  .#{variables.$elNamespace}-cascader,
  .#{variables.$elNamespace}-date-editor--daterange,
  .#{variables.$elNamespace}-date-editor--timerange,
  .#{variables.$elNamespace}-date-editor--datetimerange,
  .#{variables.$elNamespace}-date-editor.#{variables.$elNamespace}-input,
  .#{variables.$elNamespace}-date-editor.#{variables.$elNamespace}-input__inner,
  .#{variables.$elNamespace}-tree-select {
    width: 100% !important;
  }

  .#{variables.$elNamespace}-input-group {
    vertical-align: top;
  }
}

.#{$form-item-prefix}-label {
  position: relative;
  display: flex;

  &-content {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &-tooltip {
    cursor: help;

    * {
      cursor: help;
    }

    label {
      border-bottom: 1px dashed currentColor;
    }
  }
}

.#{$form-item-prefix}-label label {
  color: var(--el-text-color-regular);
}

.#{$form-item-prefix}-label-align-left {
  > .#{$form-item-prefix}-label {
    justify-content: flex-start;
  }
}

.#{$form-item-prefix}-label-align-right {
  > .#{$form-item-prefix}-label {
    justify-content: flex-end;
  }
}

.#{$form-item-prefix}-label-wrap {
  .#{$form-item-prefix}-label {
    label {
      white-space: pre-line;
    }
  }
}

.#{$form-item-prefix}-feedback-layout-terse {
  margin-bottom: 8px;

  &.#{$form-item-prefix}-feedback-has-text:not(.#{$form-item-prefix}-inset) {
    margin-bottom: 0;
  }
}

.#{$form-item-prefix}-feedback-layout-loose {
  margin-bottom: getFormItemCssVar("error-line-height");

  &.#{$form-item-prefix}-feedback-has-text:not(.#{$form-item-prefix}-inset) {
    margin-bottom: 0;
  }
}

.#{$form-item-prefix}-feedback-layout-none {
  margin-bottom: 0;

  &.#{$form-item-prefix}-feedback-has-text:not(.#{$form-item-prefix}-inset) {
    margin-bottom: 0;
  }
}

.#{$form-item-prefix}-control {
  width: 100%;
  flex: 1;
  overflow: hidden;

  .#{$form-item-prefix}-control-content {
    display: flex;

    .#{$form-item-prefix}-control-content-component {
      width: 100%;
      min-height: getFormItemCssVar("medium-line-height");
      line-height: getFormItemCssVar("medium-line-height");

      &-has-feedback-icon {
        flex: 1;
        position: relative;
        display: flex;
        align-items: center;
      }

      &-has-icon {
        flex: 1;
        position: relative;
        display: flex;
        align-items: center;
      }
      // & > svg {
      //   display: inline;
      // }
    }

    .#{$form-item-prefix}-addon-before {
      margin-right: 8px;
      display: inline-flex;
      align-items: center;
      min-height: getFormItemCssVar("medium-line-height");
      flex-shrink: 0;
    }

    .#{$form-item-prefix}-addon-after {
      margin-left: 8px;
      display: inline-flex;
      align-items: center;
      min-height: getFormItemCssVar("medium-line-height");
      flex-shrink: 0;
    }
  }
}

.#{$form-item-prefix}-size-small {
  font-size: getFormItemCssVar("extra-small");

  .#{$form-item-prefix}-label * {
    line-height: getFormItemCssVar("small-line-height");
  }

  .#{$form-item-prefix}-label-content {
    min-height: getFormItemCssVar("small-line-height");
  }

  .#{$form-item-prefix}-control-content {
    .#{$form-item-prefix}-control-content-component {
      line-height: getFormItemCssVar("small-line-height");
      min-height: getFormItemCssVar("small-line-height");
    }
  }

  .#{$form-item-prefix}-help,
  .#{$form-item-prefix}-extra {
    min-height: getFormItemCssVar("error-line-height");
  }

  .#{$form-item-prefix}-control-content {
    min-height: getFormItemCssVar("small-line-height");
  }

  .#{$form-item-prefix}-label > label {
    height: getFormItemCssVar("small-line-height");
  }

  .#{variables.$elNamespace}-input {
    input {
      height: getFormItemCssVar("small-line-height");
      line-height: getFormItemCssVar("small-line-height");
    }
  }

  .#{variables.$elNamespace}-input-number {
    line-height: getFormItemCssVar("small-line-height");
    &.is-controls-right {
      .#{variables.$elNamespace}-input-number__increase,
      .#{variables.$elNamespace}-input-number__decrease {
        line-height: calc(getFormItemCssVar("small-line-height") / 2);
        height: calc(getFormItemCssVar("small-line-height") / 2);
        font-size: getFormItemCssVar("extra-small");
        box-sizing: border-box;
      }
    }
  }
}

.#{$form-item-prefix}-size-large {
  font-size: getFormItemCssVar("medium");

  .#{$form-item-prefix}-label * {
    line-height: getFormItemCssVar("large-line-height");
  }

  .#{$form-item-prefix}-label-content {
    min-height: getFormItemCssVar("large-line-height");
  }

  .#{$form-item-prefix}-control-content {
    .#{$form-item-prefix}-control-content-component {
      line-height: getFormItemCssVar("large-line-height");
      min-height: getFormItemCssVar("large-line-height");
    }
  }

  .#{$form-item-prefix}-help,
  .#{$form-item-prefix}-extra {
    min-height: getFormItemCssVar("error-line-height");
  }

  .#{$form-item-prefix}-control-content {
    min-height: getFormItemCssVar("large-line-height");
  }

  .#{variables.$elNamespace}-input {
    input {
      height: getFormItemCssVar("large-line-height");
      line-height: getFormItemCssVar("large-line-height");
    }
  }

  .#{variables.$elNamespace}-select {
    input {
      height: getFormItemCssVar("large-line-height") !important;
      line-height: getFormItemCssVar("large-line-height");
    }
  }

  .#{variables.$elNamespace}-select__tags .el-tag {
    height: getFormItemCssVar("large-line-height") - 12px;
    line-height: getFormItemCssVar("large-line-height") - 12px;
  }

  .#{variables.$elNamespace}-input-number {
    line-height: getFormItemCssVar("large-line-height");
    &.is-controls-right {
      .#{variables.$elNamespace}-input-number__increase,
      .#{variables.$elNamespace}-input-number__decrease {
        line-height: calc(#{getFormItemCssVar("large-line-height")} / 2 - 1px);
        font-size: getFormItemCssVar("medium");
      }
    }
  }
}

.#{$form-item-prefix} {
  &-layout-vertical {
    display: block;

    .#{$form-item-prefix}-label * {
      line-height: getFormItemCssVar("label-top-line-height");
    }

    .#{$form-item-prefix}-label-content {
      min-height: getFormItemCssVar("label-top-line-height");
    }

    .#{$form-item-prefix}-label-tooltip {
      min-height: getFormItemCssVar("label-top-line-height");
      line-height: getFormItemCssVar("label-top-line-height");
    }
  }
}

.#{$form-item-prefix}-feedback-layout-popover {
  margin-bottom: 8px;
  .#{$form-item-prefix}-control-content-component {
    display: flex;
    align-items: center;
  }
  .#{$form-item-prefix}-help {
    display: flex;
    align-items: center;
  }
}

.#{$form-item-prefix}-label-tooltip {
  margin-left: 4px;
  color: var(--el-text-color-secondary);
  display: flex;
  align-items: center;
  height: getFormItemCssVar("medium-line-height");
  cursor: pointer;
  i {
    line-height: 1;
  }
}

.#{$form-item-prefix}-control-align-left {
  .#{$form-item-prefix}-control-content {
    justify-content: flex-start;
  }
}

.#{$form-item-prefix}-control-align-right {
  .#{$form-item-prefix}-control-content {
    justify-content: flex-end;
  }
}

.#{$form-item-prefix}-control-wrap {
  .#{$form-item-prefix}-control {
    white-space: pre-line;
  }
}

.#{$form-item-prefix}-asterisk {
  color: var(--el-color-danger);
  margin-right: 4px;
  display: inline-block;
  font-family: SimSun, sans-serif;
}

.#{$form-item-prefix}-colon {
  margin-left: 2px;
  margin-right: 8px;
}

.#{$form-item-prefix}-help,
.#{$form-item-prefix}-extra {
  @include set-vac-component-css-var($form-item-prefix, $formily-form-item);
  clear: both;
  min-height: getFormItemCssVar("error-line-height");
  line-height: getFormItemCssVar("error-line-height");
  color: var(--el-text-color-secondary);
  transition: var(--el-transition-color);
  padding-top: 0;
}

.#{$form-item-prefix}-fullness {
  > .#{$form-item-prefix}-control {
    > .#{$form-item-prefix}-control-content {
      > .#{$form-item-prefix}-control-content-component {
        > *:first-child {
          width: 100%;
        }
      }
    }
  }
}

.#{$form-item-prefix}-control-content-component-has-feedback-icon {
  border-radius: var(--el-border-radius-base);
  border: var(--el-border);
  padding-right: 8px;
  transition: var(--el-transition-all);
  touch-action: manipulation;
  outline: none;

  .#{variables.$elNamespace}-input-number,
  .#{variables.$elNamespace}-date-editor .#{variables.$elNamespace}-input__inner,
  .#{variables.$elNamespace}-select .#{variables.$elNamespace}-input__inner,
  .#{variables.$elNamespace}-input .#{variables.$elNamespace}-input__inner {
    border: none !important;
    box-shadow: none !important;
  }
  .#{variables.$elNamespace}-input-number.is-controls-right
    .#{variables.$elNamespace}-input__inner {
    padding-right: 40px;
  }
  .#{variables.$elNamespace}-input-number.is-controls-right
    .#{variables.$elNamespace}-input-number__increase {
    top: 0;
    right: 8px;
    border-right: var(--el-border);
  }
  .#{variables.$elNamespace}-input-number.is-controls-right
    .#{variables.$elNamespace}-input-number__decrease {
    bottom: 0;
    right: 8px;
    border-right: var(--el-border);
  }
}

.#{$form-item-prefix} {
  &:hover {
    .#{$form-item-prefix}-control-content-component-has-feedback-icon {
      @include hover;
    }
  }
}

.#{$form-item-prefix}-active {
  .#{$form-item-prefix}-control-content-component-has-feedback-icon {
    @include active;
  }
}

.#{$form-item-prefix}-error {
  & .#{variables.$elNamespace}-input__inner,
  & .#{variables.$elNamespace}-textarea__inner {
    &,
    &.hover {
      border-color: var(--el-color-danger);
    }
  }

  & .#{variables.$elNamespace}-input__inner,
  & .#{variables.$elNamespace}-textarea__inner {
    &:focus {
      border-color: var(--el-color-danger);
    }
  }
  & .#{variables.$elNamespace}-input-group__append,
  & .#{variables.$elNamespace}-input-group__prepend {
    & .#{variables.$elNamespace}-input__inner {
      border-color: transparent;
    }
  }
  .#{variables.$elNamespace}-input__validateIcon {
    color: var(--el-color-danger) !important;
  }

  .el-select-v2__wrapper {
    &.is-focused {
      border-color: transparent;
    }
  }

  .el-select-v2__wrapper,
  .el-textarea__inner {
    &,
    &:focus {
      box-shadow: 0 0 0 1px var(--el-color-danger) inset;
    }
  }

  .el-input__wrapper {
    box-shadow: 0 0 0 1px var(--el-color-danger) inset;
    &:hover {
      box-shadow: 0 0 0 1px var(--el-color-danger) inset;
    }
    &.is-focus {
      box-shadow: 0 0 0 1px var(--el-color-danger) inset !important;
    }
  }

  .el-select {
    &:hover {
      box-shadow: 0 0 0 1px transparent;
    }

    .el-input {
      .el-input__wrapper {
        &:hover {
          box-shadow: 0 0 0 1px var(--el-color-danger) inset;
        }
      }

      &.is-focus {
        .el-input__wrapper {
          box-shadow: 0 0 0 1px var(--el-color-danger) inset !important;
        }
      }
    }
  }

  .el-input-group__append,
  .el-input-group__prepend {
    .el-input__wrapper {
      box-shadow: 0 0 0 1px transparent inset;
    }
  }
  .el-input__validateIcon {
    color: var(--el-color-danger);
  }
}

.#{$form-item-prefix}-error-help,
.#{$form-item-prefix}-warning-help,
.#{$form-item-prefix}-success-help {
  i {
    margin-right: 8px;
  }
  display: flex;
  align-items: center;
}

.#{$form-item-prefix}-error-help {
  color: var(--el-color-danger);
}

.#{$form-item-prefix}-warning-help {
  color: var(--el-color-warning);
}

.#{$form-item-prefix}-success-help {
  color: var(--el-color-success);
}

.#{$form-item-prefix}-warning {
  & .#{variables.$elNamespace}-input__inner,
  & .#{variables.$elNamespace}-textarea__inner {
    &,
    &.hover {
      border-color: var(--el-color-warning);
    }
  }

  & .#{variables.$elNamespace}-input__inner,
  & .#{variables.$elNamespace}-textarea__inner {
    &:focus {
      border-color: var(--el-color-warning);
    }
  }

  & .#{variables.$elNamespace}-input-group__append,
  & .#{variables.$elNamespace}-input-group__prepend {
    & .#{variables.$elNamespace}-input__inner {
      border-color: transparent;
    }
  }
  .#{variables.$elNamespace}-input__validateIcon {
    color: var(--el-color-warning) !important;
  }
}

.#{$form-item-prefix}-success {
  & .#{variables.$elNamespace}-input__inner,
  & .#{variables.$elNamespace}-textarea__inner {
    &,
    &.hover {
      border-color: var(--el-color-success);
    }
  }

  & .#{variables.$elNamespace}-input__inner,
  & .#{variables.$elNamespace}-textarea__inner {
    &:focus {
      border-color: var(--el-color-success);
    }
  }

  & .#{variables.$elNamespace}-input-group__append,
  & .#{variables.$elNamespace}-input-group__prepend {
    & .#{variables.$elNamespace}-input__inner {
      border-color: transparent;
    }
  }
  .#{variables.$elNamespace}-input__validateIcon {
    color: var(--el-color-success) !important;
  }
}

.#{$form-item-prefix}-bordered-none {
  .#{variables.$elNamespace}-input__inner {
    border: none !important;
  }

  .#{variables.$elNamespace}-input-number__decrease,
  .#{variables.$elNamespace}-input-number__increase {
    border: none !important;
    background: transparent !important;
  }
}

.#{$form-item-prefix}-inset {
  border-radius: var(--el-border-radius-base);
  border: var(--el-border);
  padding-left: 12px;
  transition: 0.3s all;

  &:hover {
    @include hover;
  }
}

.#{$form-item-prefix}-inset-active {
  @include active;
}