/**
 *
 * This file may have been modified by Bytedance Inc. (“Bytedance Inc.'s Modifications”). 
 * All Bytedance Inc.'s Modifications are Copyright (year) Bytedance Inc..  
 * 
 * This source code is licensed under the Apache license.
 * See LICENSE file in the project root for license information.
 *
 */
@import '../../../styles/variables.less';
@import '../../../styles/mixins.less';

@import './variables.less';
@import './mixins.less';

@form-item-prefix-cls: ~'@{ant-prefix}-form-item';

.@{ant-prefix}-form-item-label:not(.sp-null) > label {
  color: @color-text-icon-1;
  padding-right: 6px;

  &::after {
    content: '';
  }
}

.@{ant-prefix}-form-item-with-help:not(.sp-null) {
  margin-bottom: @form-item-margin-bottom;
}

.@{ant-prefix}-form-item-explain,
.@{ant-prefix}-form-item-extra {
  line-height: 16px;
  margin-top: 4px;
  font-size: @font-size-sm;
}

.@{form-item-prefix-cls}.@{form-item-prefix-cls}-has-error {
  .@{ant-prefix}-input:not(.@{ant-prefix}-input-disabled):not(.sp-null),
  .@{ant-prefix}-input-affix-wrapper:not(.@{ant-prefix}-input-affix-wrapper-disabled) {
    background-color: @form-error-input-bg;
    border-color: @input-error-border-color;
    z-index: 1;

    &:hover,
    &:focus {
      border-color: @input-error-hover-border-color;
      z-index: 1;
      background-color: @input-error-hover-bg;
      .@{ant-prefix}-input:not(.@{ant-prefix}-input-disabled):not(.sp-null) {
        background-color: @input-error-hover-bg;
      }
    }

  }
  .@{ant-prefix}-input-affix-wrapper.@{ant-prefix}-input-affix-wrapper-disabled {

    &,
    &:hover {
      border-color: @color-line-0;
    }
  }
  .@{ant-prefix}-input-affix-wrapper.@{ant-prefix}-input-affix-wrapper-focused {
    border-color: @input-error-active-border-color;
    background-color: @input-error-active-bg;
    .@{ant-prefix}-input:not(.@{ant-prefix}-input-disabled):not(.sp-null) {
      background-color: @input-error-active-bg;
    }
  }
  .@{ant-prefix}-cascader-picker {
    background-color: @form-error-input-bg;

    &:hover {
      background-color: @input-error-hover-bg;
      .@{ant-prefix}-cascader-input:not(.auxo-input-disabled):not(.sp-null) {
        border-color: @input-error-active-border-color;
      }
    }

    &-focused {
      background-color: @input-error-active-bg;
      .@{ant-prefix}-cascader-input:not(.auxo-input-disabled):not(.sp-null) {
        border-color: @input-error-active-border-color;
      }
    }
  }

  .@{ant-prefix}-input-group-wrapper {
    .@{ant-prefix}-input-group {
      & > .@{ant-prefix}-input:nth-last-child(2) {
  
        &:hover {
          border-right-color: @input-error-hover-border-color;
        }
  
        &:focus {
          border-right-color: @input-error-hover-border-color;
        }
      }
      & > .@{ant-prefix}-input-affix-wrapper:nth-child(2) {
  
        &:hover {
          border-left-color: @input-error-hover-border-color;
        }
  
        &.@{ant-prefix}-input-affix-wrapper-focused {
          border-left-color: @input-error-hover-border-color;
        }
      }
      & > .@{ant-prefix}-input-affix-wrapper-disabled:nth-child(2) {
  
        &:hover {
          border-left-color: @color-line-0;
        }
  
        &.@{ant-prefix}-input-affix-wrapper-focused {
          border-left-color: @color-line-0;
        }
      }
    }
  }
  
}

.@{form-item-prefix-cls}.@{form-item-prefix-cls}-has-warning {
  .@{ant-prefix}-input:not(.@{ant-prefix}-input-disabled):not(.sp-null),
  .@{ant-prefix}-input-affix-wrapper:not(.@{ant-prefix}-input-affix-wrapper-disabled) {
    background-color: @input-warning-bg;

    &,
    &:hover {
      border-color: @input-warning-hover-border-color;
      z-index: 1;
    }

    &:hover {
      background-color: @input-warning-hover-bg;
    }
  }
}

.@{ant-prefix}-form-item-explain:not(.@{ant-prefix}-form-item-explain-error),
.@{ant-prefix}-form-item-extra:not(.sp-null) {
  color: @color-text-icon-2;
}

.@{form-item-prefix-cls}-error-tooltip-wrap {
  &.@{ant-prefix}-tooltip-placement-right,
  .@{ant-prefix}-tooltip-placement-rightTop,
  .@{ant-prefix}-tooltip-placement-rightBottom {
    .@{ant-prefix}-tooltip-arrow-content {
      border-bottom: 1px solid;
      border-left: 1px solid;
      transform: translateX(6.75px) rotate(45deg);
    }
  }

  &.@{ant-prefix}-tooltip-placement-bottom,
  .@{ant-prefix}-tooltip-placement-bottomLeft,
  .@{ant-prefix}-tooltip-placement-bottomRight {
    .@{ant-prefix}-tooltip-arrow-content {
      border-left: 1px solid;
      border-top: 1px solid;
      transform: translateY(6.75px) rotate(45deg);
    }
  }

  &.@{ant-prefix}-tooltip-placement-left,
  .@{ant-prefix}-tooltip-placement-leftTop,
  .@{ant-prefix}-tooltip-placement-leftBottom {
    .@{ant-prefix}-tooltip-arrow-content {
      border-top: 1px solid;
      border-right: 1px solid;
      transform: translateX(-6.75px) rotate(45deg);
    }
  }

  &.@{ant-prefix}-tooltip-placement-top,
  .@{ant-prefix}-tooltip-placement-topLeft,
  .@{ant-prefix}-tooltip-placement-topRight {
    .@{ant-prefix}-tooltip-arrow-content {
      border-right: 1px solid;
      border-bottom: 1px solid;
      transform: translateY(-6.75px) rotate(45deg);
    }
  }

  .@{ant-prefix}-tooltip-content {
    .@{ant-prefix}-tooltip-arrow {
      overflow: visible;

      &-content {
        border-color: #eeeff0;
        background-color: @color-fill-fade-0;
      }
    }
    .@{ant-prefix}-tooltip-inner {
      background-color: @color-fill-fade-0;
      border: 1px solid #eeeff0;
      max-width: 156px;
      color: #565960;
    }
  }

  &-error {
    .@{ant-prefix}-tooltip-content {
      .@{ant-prefix}-tooltip-arrow {

        &-content {
          border-color: #ff4050;
        }
      }
      .@{ant-prefix}-tooltip-inner {
        border-color: #ff4050;
        color: #ff4050;
      }
    }
  }
}


.@{ant-prefix}-form-inline {
  .@{ant-prefix}-form-item-row {
    flex-wrap: nowrap;
  }
}