@use 'element-plus/theme-chalk/src/common/var.scss' as *;
@use 'element-plus/theme-chalk/src/mixins/config.scss' as *;
@use 'element-plus/theme-chalk/src/mixins/mixins.scss' as *;
@use './common.scss' as *;
@use './grid.scss';

// form-item
.#{$form-item-prefix} {
  display: flex;
  margin-bottom: 18px;
  position: relative;
  line-height: $form-item-medium-line-height;
  font-size: $form-font-size;

  &-label * {
    line-height: $form-item-medium-line-height;
  }

  &-label-content {
    min-height: $form-item-medium-line-height;
  }

  &-control-content-component {
    line-height: $form-item-medium-line-height;
  }
}

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

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

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

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

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

  &-tooltip {
    cursor: help;
    label {
      border-bottom: 1px dashed currentColor;
    }
    margin-left: 4px;
    color: $color-text-secondary;
    display: flex;
    align-items: center;
    height: $form-item-medium-line-height;
  }
}
.#{$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}-asterisk {
  color: $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}-feedback-layout-terse {
  margin-bottom: 12px;
  .#{$form-item-prefix}-help {
    top: 100%;
  }
}

.#{$form-item-prefix}-feedback-layout-loose {
  margin-bottom: $form-error-line-height;
  .#{$form-item-prefix}-help {
    top: calc(100% + 4px);
  }
}

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

// control
.#{$form-item-prefix}-control {
  position: relative;
  width: 100%;
  flex: 1;

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

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

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

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

    .#{$form-item-prefix}-addon-after {
      margin-left: 8px;
      display: inline-flex;
      align-items: center;
      min-height: $form-item-medium-line-height;
      flex-shrink: 0;
    }
  }
}
.#{$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;
  }
}

// feedback 反馈样式
.#{$form-item-prefix}-help {
  position: absolute;
  font-size: 12px;
  color: $color-danger;
  line-height: 1;
  top: calc(100% + 2px);
  left: 0;
  z-index: 1;
}
.#{$form-item-prefix}-error-help,
.#{$form-item-prefix}-warning-help,
.#{$form-item-prefix}-success-help {
  display: flex;
  align-items: center;
  i {
    margin-right: 8px;
  }
}
.#{$form-item-prefix}-error-help {
  color: $color-danger;
}
.#{$form-item-prefix}-warning-help {
  color: $color-warning;
}
.#{$form-item-prefix}-success-help {
  color: $color-success;
}

// extra 内容样式
.#{$form-item-prefix}-extra {
  clear: both;
  min-height: $form-error-line-height;
  line-height: $form-error-line-height;
  color: $color-text-secondary;
  transition: $color-transition-base;
  padding-top: 0;
}

// small 尺寸
.#{$form-item-prefix}-size-small {
  font-size: $font-size-extra-small;

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

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

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

  .#{$form-item-prefix}-extra {
    min-height: $form-error-line-height;
  }

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

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

  .#{$namespace}-input {
    height: $form-item-small-line-height !important;
    input {
      height: $form-item-small-line-height !important;
      line-height: $form-item-small-line-height;
    }
  }

  .#{$namespace}-select__wrapper {
    min-height: $form-item-small-line-height;
    line-height: $form-item-small-line-height;
  }

  .#{$namespace}-tag {
    height: $form-item-small-line-height - 6px;
    line-height: $form-item-small-line-height - 6px;
  }

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

// large尺寸
.#{$form-item-prefix}-size-large {
  font-size: $font-size-medium;

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

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

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

  .#{$form-item-prefix}-extra {
    min-height: $form-error-line-height;
  }

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

  .#{$namespace}-input {
    height: $form-item-large-line-height !important;
    input {
      height: $form-item-large-line-height !important;
      line-height: $form-item-large-line-height;
    }
  }

  .#{$namespace}-select__wrapper {
    height: $form-item-large-line-height !important;
    line-height: $form-item-large-line-height;
  }

  .#{$namespace}-tag {
    height: $form-item-large-line-height - 12px;
    line-height: $form-item-large-line-height - 12px;
  }

  .#{$namespace}-input-number {
    line-height: $form-item-large-line-height;
    &.is-controls-right {
      .#{$namespace}-input-number__increase,
      .#{$namespace}-input-number__decrease {
        height: calc($form-item-large-line-height / 2) - 1;
        font-size: $font-size-medium;
      }
    }
  }
}

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

.#{$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: $border-radius-base;
  border: $border-base;
  padding-right: 8px;
  transition: $all-transition;
  touch-action: manipulation;
  outline: none;

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

.#{$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 {
  & .#{$namespace}-input__wrapper,
  & .#{$namespace}-textarea__inner,
  & .#{$namespace}-select__wrapper {
    box-shadow: 0 0 0 1px $color-danger inset !important;
  }
}

.#{$form-item-prefix}-warning {
  & .#{$namespace}-input__wrapper,
  & .#{$namespace}-textarea__inner,
  & .#{$namespace}-select__wrapper {
    box-shadow: 0 0 0 1px $color-warning inset !important;
  }
}

.#{$form-item-prefix}-success {
  & .#{$namespace}-input__wrapper,
  & .#{$namespace}-textarea__inner,
  & .#{$namespace}-select__wrapper {
    box-shadow: 0 0 0 1px $color-success inset !important;
  }
}

// 去除ep组件的边框
.#{$form-item-prefix}-bordered-none {
  .#{$namespace}-input__wrapper {
    box-shadow: none !important;
  }
  .#{$namespace}-select__wrapper {
    box-shadow: none !important;
  }
  .#{$namespace}-input-number__decrease,
  .#{$namespace}-input-number__increase {
    background-color: transparent !important;
    border: none !important;
  }
}

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

  &:hover {
    @include hover;
  }
}

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