@use '@style/theme/index.scss' as theme;
@use '@style/theme/index.scss' as global;
@use 'sass:string';
@use '@components/form/style/token.scss' as *;
@use '@components/form/style/status.scss' as *;

$form-prefix-cls: string.unquote('#{theme.$prefix}-form');
$form-item-prefix-cls: string.unquote('#{theme.$prefix}-form-item');
$form-item-label-col-prefix-cls: string.unquote('#{theme.$prefix}-form-item-label-col');
$form-item-wrapper-col-prefix-cls: string.unquote('#{theme.$prefix}-form-item-wrapper-col');
$form-item-label-prefix-cls: string.unquote('#{theme.$prefix}-form-item-label');
$form-item-message-prefix-cls: string.unquote('#{theme.$prefix}-form-item-message');

.#{$form-prefix-cls} {
  display: flex;
  flex-direction: column;
  width: 100%;

  &-layout-inline {
    flex-flow: row wrap;
  }

  &-layout-inline &-item {
    width: auto;
    margin-bottom: $form-inline-margin-item-bottom;
  }

  &-auto-label-width &-item-label-col {
    > .#{$form-item-label-prefix-cls} {
      white-space: nowrap;
    }
  }

  &-item {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    margin-bottom: $form-size-default-margin-item-bottom;

    &-layout-vertical {
      display: block;

      > .#{$form-item-prefix-cls}-label-col {
        justify-content: flex-start;
        margin-bottom: $form-vertical-margin-label-bottom;
        padding: 0;
        line-height: theme.$line-height-base;
        white-space: normal;
      }
    }

    &-layout-inline {
      margin-right: $form-inline-margin-item-right;
    }

    &-label-col {
      padding-right: $form-margin-label-right;
    }

    &#{&}-error,
    &#{&}-has-help {
      margin-bottom: 0;
    }
  }

  // 用处不明
  &-item-wrapper-flex.#{theme.$prefix}-col {
    flex: 1;
  }

  /** size style **/
  &-size-mini &-item-label-col {
    line-height: global.$size-mini;

    > .#{$form-item-label-prefix-cls} {
      font-size: $form-size-mini-font-label-size;
    }
  }

  &-size-mini &-item-content {
    min-height: global.$size-mini;
  }

  &-size-mini &-item-wrapper-col {
    min-height: global.$size-mini;
  }

  &-size-small &-item-label-col {
    line-height: global.$size-small;

    > .#{$form-item-label-prefix-cls} {
      font-size: $form-size-small-font-label-size;
    }
  }

  &-size-small &-item-content {
    min-height: global.$size-small;
  }

  &-size-small &-item-wrapper-col {
    min-height: global.$size-small;
  }

  &-size-large &-item-label-col {
    line-height: global.$size-large;

    > .#{$form-item-label-prefix-cls} {
      font-size: $form-size-large-font-label-size;
    }
  }

  &-size-large &-item-content {
    min-height: global.$size-large;
  }

  &-size-large &-item-wrapper-col {
    min-height: global.$size-large;
  }

  &-item-extra {
    margin-top: $form-margin-extra-top;
    color: $form-color-extra-text;
    font-size: $form-font-extra-text-size;
  }

  &-item-message {
    min-height: $form-size-default-margin-item-bottom;
    color: $form-color-tip-text_error;
    font-size: $form-font-error-text-size;
    line-height: $form-size-default-margin-item-bottom;

    &-help {
      color: $form-color-extra-text;
    }

    + .#{$form-prefix-cls}-item-extra {
      margin-top: 0;
      margin-bottom: $form-margin-extra-bottom;
    }
  }

  &-item-label-col {
    display: flex;
    flex-shrink: 0;
    justify-content: flex-end;
    line-height: global.$size-default;
    white-space: nowrap;

    &-left {
      justify-content: flex-start;
    }

    > .#{$form-item-label-prefix-cls} {
      max-width: 100%;
      color: $form-color-text-label;
      font-size: $form-size-default-font-label-size;
      white-space: normal;
    }

    &#{&}-flex {
      box-sizing: content-box;
    }

    // 用处不明
    //&-flex.#{$prefix}-col {
    //  flex: 0;
    //
    //  > label {
    //    white-space: nowrap;
    //  }
    //}
  }

  &-item-wrapper-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    min-width: 0;
    min-height: global.$size-default;
  }

  &-item-content {
    flex: 1;
    max-width: 100%;
    min-height: global.$size-default;

    &-wrapper {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
    }

    &-flex {
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
  }

  /** slider display: block **/

  .#{theme.$prefix}-slider {
    display: block;
  }
}

.#{$form-item-label-prefix-cls} {
  &-required-symbol {
    color: global.$color-danger-6;
    font-size: global.$font-size-body-1;
    line-height: 1;

    svg {
      display: inline-block;
      transform: scale(0.5);
    }
  }

  &-tooltip {
    margin-left: $form-margin-tooltip-left;
    color: $form-color-text-tooltip;
  }
}

.form-blink-enter-from,
.form-blink-appear-from {
  opacity: 0;
}

.form-blink-enter-to,
.form-blink-appear-to {
  opacity: 1;
}

.form-blink-enter-active,
.form-blink-appear-active {
  transition: opacity theme.$transition-duration-3 theme.$transition-timing-function-standard;
  animation: #{theme.$prefix}-form-blink theme.$transition-duration-5
    theme.$transition-timing-function-standard;
}

@keyframes #{theme.$prefix}-form-blink {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.2;
  }

  100% {
    opacity: 1;
  }
}