/**
 *
 * 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 './base/mixin.less';
@import './mixins.less';

// 当border在外层时，去掉 input 的 radius
.@{ant-prefix}-input-affix-wrapper:not(.sp-null) {
  .@{ant-prefix}-input:not(.sp-null) {
    border-radius: 0;
    background: none;
  }
}

.@{ant-prefix}-input-group-addon:not(.sp-null) {
  color: @color-text-icon-1;
  .@{ant-prefix}-select {
    &:not(.@{ant-prefix}-select-disabled) {
      &:not(.@{ant-prefix}-select-customize-input) {
        .@{ant-prefix}-select-selector {

          &:hover {
            background-color: transparent;
          }
        }
      }
    }

    &-focused {
      .@{ant-prefix}-select-selector {
        background-color: transparent !important;
        box-shadow: none !important;
      }
    }

    &-open {
      .@{ant-prefix}-select-selector {
        background-color: transparent !important;
        box-shadow: none !important;
      }
    }
  }
}
.@{ant-prefix}-input-clear-icon:not(.sp-null) {
  font-size: 16px;
  color: @disabled-color;
}

// 组件库添加的状态
.@{ant-prefix}-sp-input {
  position: relative;
}
.@{ant-prefix}-sp-textarea {
  position: relative;
  display: inline-block;
  width: 100%;
  min-width: 0;
  .@{ant-prefix}-input {
    padding: 8px 8px 20px;
  }

  .input-textarea-suffix {
    position: absolute;
    bottom: 0;
    right: 8px;
  }

  &.textarea-sm {
    font-size: @font-size-sm;
    textarea.@{ant-prefix}-input {
      font-size: @font-size-sm;
      line-height: 16px;
    }
  }
  .@{ant-prefix}-input-clear-icon {
    top: auto;
    bottom: 8px;
    opacity: .6;
  }
}
// bubble 提示相关
.@{ant-prefix}-sp-input,
.@{ant-prefix}-sp-textarea {

  .input-suffix-limit {
    color: @color-text-icon-2;
    .fontStyle-5-normal();
  }

  .input-suffix-limit-error {
    color: @color-function-danger-main;
  }
  .@{ant-prefix}-input-affix-wrapper-disabled {

    .input-suffix-limit {
      color: @color-text-icon-3;
    }
  }
  &.textarea-sm .input-bubble-notice,
  .@{ant-prefix}-input-sm + .input-bubble-notice {
    font-size: @font-size-sm;
    line-height: 16px;
  }

  .input-bubble-notice {
    position: absolute;
    z-index: 2;
    padding: 8px;
    .fontStyle-4-normal();
    border-radius: 4px;
    background: #fff;
    word-break: break-word;

    &.input-bubble-notice-right {
      display: inline-block;
      width: 160px;
      top: 50%;
      transform: translateY(-50%);
      margin-left: 8px;
    }

    &.input-bubble-notice-bottom {
      display: block;
      width: 136px;
      margin-top: 8px;
      left: 0;
    }

    &.input-bubble-notice-info {
      border: 1px solid @color-line-1;
      color: @color-text-icon-1;
    }

    &.input-bubble-notice-error {
      border: 1px solid @color-function-danger-main;
      color: @color-function-danger-main;
    }
  }

  .input-bubble-notice-triangle {
    position: absolute;
    z-index: 3;
    width: 7px;
    height: 7px;
    background: #fff;

    &.input-bubble-notice-right {
      left: -4px;
      top: 50%;
      transform: translateY(-50%) rotate(-45deg);
    }

    &.input-bubble-notice-bottom {
      left: 10px;
      top: -4px;
      transform: rotate(45deg);
    }

    &.input-bubble-notice-info {
      border-top: 1px solid @color-line-1;
      border-left: 1px solid @color-line-1;
    }

    &.input-bubble-notice-error {
      border-top: 1px solid @color-function-danger-main;
      border-left: 1px solid @color-function-danger-main;
    }
  }
}

// textarea suffix 报错相关
.@{ant-prefix}-form-item-has-error,
.has-error {
  .@{ant-prefix}-sp-textarea.textarea-type-suffix {
    border-color: @input-error-border-color !important;
    background-color: @form-error-input-bg;

    &:hover {
      border-color: @input-error-hover-border-color !important;
      background-color: @input-error-hover-bg;
    }

    &.textarea-type-suffix-focus {
      border-color: @input-error-active-border-color !important;
      background-color: @input-error-active-bg;
    }
  }
}
.has-error .@{ant-prefix}-input-affix-wrapper {
  border-color: @input-error-border-color;
  box-shadow: none;
  background-color: @form-error-input-bg;

  :hover {
    border-color: @input-error-hover-border-color;
    background-color: @input-error-hover-bg;
  }

  :focus {
    border-color: @input-error-active-border-color;
    background-color: @input-error-active-bg;
  }
}

.@{ant-prefix}-sp-input.@{ant-prefix}-sp-input-error {
  .@{ant-prefix}-input-affix-wrapper,
  > .@{ant-prefix}-input {
    border-color: @input-error-border-color;
    background-color: @form-error-input-bg;

    :hover {
      border-color: @input-error-hover-border-color;
      background-color: @input-error-hover-bg;
    }

    :focus {
      border-color: @input-error-active-border-color;
      background-color: @input-error-active-bg;
    }
  }
}

// textarea suffix 相关
.@{ant-prefix}-sp-textarea.textarea-type-suffix {
  padding-bottom: 20px !important;
  border: 1px solid @input-border-color;
  border-radius: 4px;
  transition: all .3s;
  outline: none;
  background-color: @input-bg;
  .@{ant-prefix}-input,
  .@{ant-prefix}-input-affix-wrapper {
    border: none !important;
    resize: none !important;
    box-shadow: none !important;
    outline: none !important;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
  }

  &:hover {
    .hover();
  }

  &.textarea-type-suffix-focus {
    .active();
  }

  &.textarea-type-suffix-disabled {
    .disabled();
  }
  &.@{ant-prefix}-sp-textarea-error {
    border-color: @input-error-border-color;
  }
}

//input addon(线性)相关
.@{ant-prefix}-input-group-wrapper {
  .@{ant-prefix}-input-group {

    & > .@{ant-prefix}-input:nth-child(2):not(:hover):not(:focus) {
      border-left-color: @input-addon-before-line-color;
    }
    & > .@{ant-prefix}-input:nth-last-child(2) {
      border-right-color: @input-addon-after-line-color;

      &:not(.@{ant-prefix}-input-disabled):hover {
        border-right-color: @input-hover-border-color;
      }

      &:focus {
        border-right-color: @input-active-border-color;
      }
    }
    & > .@{ant-prefix}-input-affix-wrapper:nth-child(2) {
      border-left-color: @input-addon-before-line-color;

      &:not(.@{ant-prefix}-input-disabled):hover {
        border-left-color: @input-hover-border-color;
      }

      &.@{ant-prefix}-input-affix-wrapper-focused {
        border-left-color: @input-active-border-color;
      }
    }
  }
}

// icon disabled
.@{ant-prefix}-input-affix-wrapper-disabled {
  .@{ant-prefix}-input-search-icon,
  .@{ant-prefix}-input-password-icon {
    color: @input-icon-disabled-color;
  }
}

// input-group 修复添加了一层dom的影响
.@{ant-prefix}-input-group.@{ant-prefix}-input-group-compact {

  > *:not(:last-child) {

    &:hover,
    &[class*='-focused'],
    &[class*='-active'],
    [class*='-focused'] {
      z-index: 1;
    }
  }
  > .@{ant-prefix}-input-group-wrapper {
    .@{ant-prefix}-input-affix-wrapper {
      border-radius: 0;
    }
  }
  > .@{ant-prefix}-sp-input {

    > * {
      border-radius: 0;
    }
  }
  > *:first-child.@{ant-prefix}-sp-input {

    > * {
      border-top-left-radius: @border-radius-base;
      border-bottom-left-radius: @border-radius-base;
    }
  }
  > *:last-child.@{ant-prefix}-sp-input {

    > * {
      border-top-right-radius: @border-radius-base;
      border-bottom-right-radius: @border-radius-base;
    }
  }

  .@{ant-prefix}-select-selector:not(.sp-null) {
    transition: none;
  }
  .@{ant-prefix}-sp-input {
    .@{ant-prefix}-input {
      transition: none;
    }
    .@{ant-prefix}-input-affix-wrapper {
      transition: none;
    }
  }
  .@{ant-prefix}-input-number-handler-wrapper {
    .@{ant-prefix}-input-number {
      border-radius: 0;
      transition: none;
    }

    &:first-child {
      .@{ant-prefix}-input-number {
        border-top-left-radius: @border-radius-base;
        border-bottom-left-radius: @border-radius-base;
      }

    }

    &:last-child {
      .@{ant-prefix}-input-number {
        border-top-right-radius: @border-radius-base;
        border-bottom-right-radius: @border-radius-base;
      }
    }

  }
  .@{ant-prefix}-picker {
    transition: none;
  }
}

// 小尺寸 搜索button
.@{ant-prefix}-input-group-wrapper-sm {
  font-size: @font-size-sm;
  .@{ant-prefix}-input-group-addon {
    font-size: @font-size-sm;
  }
  .@{ant-prefix}-btn-sm {
    height: 28px;
  }
}

// 大尺寸 搜索button
.@{ant-prefix}-input-search:not(.sp-null) .@{ant-prefix}-input-lg {
  line-height: 24px;
}

// 搜索button
.@{ant-prefix}-btn.@{ant-prefix}-btn-icon-only.@{ant-prefix}-input-search-button {
  min-width: 32px;
  padding: 2px 0;

  &:hover {
    border-color: @color-primary-brand;
  }

  &:active {
    border-color: @color-primary-active;
  }
}

.@{ant-prefix}-input-fill-search {
  padding-top: 3px;
  padding-bottom: 3px;
  line-height: 24px;
  // input.Search2的样式
  .@{ant-prefix}-btn.@{ant-prefix}-btn-secondary.@{ant-prefix}-input-search-button {
    padding: 4px 8px;
    min-width: 24px;
    height: 24px;
    font-size: 12px;
    line-height: 14px;
  }
  .@{ant-prefix}-input-prefix {
    margin-right: 8px;
    color: @color-text-icon-2;
    margin-top: -1px;
  }
}


.@{ant-prefix}-btn.@{ant-prefix}-input-search-button {
  .@{iconfont-css-prefix}-search {
    vertical-align: -.15em;
  }
}

.@{ant-prefix}-input-search .@{ant-prefix}-input.@{ant-prefix}-input-disabled {

  &:hover,
  &:focus {
    border-color: @color-line-0;
  }
}

.@{ant-prefix}-input-group-wrapper.@{ant-prefix}-input-search {
  .@{ant-prefix}-input.@{ant-prefix}-input-disabled
  + .@{ant-prefix}-input-group-addon
  .@{ant-prefix}-input-search-button,
  .@{ant-prefix}-input-affix-wrapper.@{ant-prefix}-input-affix-wrapper-disabled
  + .@{ant-prefix}-input-group-addon
  .@{ant-prefix}-input-search-button {
    border-color: @color-line-0;
  }
}

.@{ant-prefix}-input-group-wrapper.@{ant-prefix}-input-search .@{ant-prefix}-input-search-button {

  &:focus {
    z-index: 0;
  }

  &:hover {
    z-index: 1;
  }
}

.@{ant-prefix}-input-group.@{ant-prefix}-input-group-compact > *:not(:last-child) {
  &.@{ant-prefix}-input-group-wrapper.@{ant-prefix}-input-search {
    margin-right: -2px;
  }
}

.@{ant-prefix}-sp-input {

  .input-suffix-verify {
    color: @color-primary-brand;
    cursor: pointer;
    display: flex;

    &-disabled {
      cursor: auto;
      color: @color-text-icon-3;
    }
  }
}

.@{ant-prefix}-form-item-has-error:not(.sp-null) {
  .@{ant-prefix}-input-group-addon {
    border-color: @input-error-border-color;
  }
}