@import '../styles/themes/themes.less';
@import '../styles/mixins/mixins.less';

.active(@color: @primary-color) {
  border-color: @primary-color;
  outline: 0;
  box-shadow: 0px 0px 3px 0px @input-shadow-color;
}

.disabled() {

  &.is-disabled,
  &.is-readonly {
    background-color: @input-disabled-bg;
    border-color: @disable-color;

    .@{bk-prefix}-input--prefix-area,
    .@{bk-prefix}-input--suffix-area,
    .@{bk-prefix}-input--suffix-icon {
      cursor: not-allowed;
      background-color: @input-disabled-bg;
    }
  }

  &.is-disabled input,
  &.is-readonly input,
  &.is-disabled textarea,
  &.is-readonly textarea {
    cursor: not-allowed;
    background-color: @input-disabled-bg;
    opacity: 1;
  }

  &.is-readonly input,
  &.is-readonly textarea {
    cursor: auto;
  }

}

.placeholder(@fontSize: @font-size-base) {
  ::placeholder {
    font-size: @fontSize;
    color: @light-gray;
  }
}

.@{bk-prefix}-textarea {
  --textarea-line-height: 20px;
  display: inline-flex;
  width: 100%;
  overflow: hidden;
  font-size: @font-size-base;
  line-height: var(--textarea-line-height);
  color: @input-color;
  background-color: white;
  border: @border-width-base @border-style-base @input-border-color;
  border-radius: @border-radius-base;
  box-sizing: border-box;
  transition: all .3s;
  flex-direction: column;
  position: relative;
  .placeholder();

  &.resizable {
    resize: vertical;
    >textarea {
        flex: 1;
    }
  }

  ::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 3px;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: #DCDEE5;
  }

  .disabled();

  >textarea {
    width: 100%;
    padding: 5px 10px;
    line-height: 1.5;
    text-align: left;
    border: 0;
    border-radius: @border-radius-base;
    outline: none;
    resize: none;
  }

  &--max-length {
    padding-right: @input-horizontal-padding;
    margin: 0;
    margin-left: auto;
    font-size: @font-size-base;
    text-align: right;
    transform: scale(.8);
    justify-content: flex-end;

    &.is-over-limit {
      color: @danger-color;
    }

    span {
      color: @input-maxlength-color;
    }
  }

  &.is-focused:not(.is-readonly) {
    .active();
  }
  
  &--suffix-icon {
    color: @gray-color;
    padding-right: @input-horizontal-padding;
    font-size: @font-size-medium;
    margin: 0;
    margin-left: auto;
    text-align: right;
    flex-shrink: 0;
    cursor: pointer;

    &:hover {
      color: #313238;
    }
    
    &.show-clear-only-hover {
      display: none;
    }
  }

  &:hover:not(.is-disabled) {
    
    .show-clear-only-hover {
      display: flex;
    }
  }

    &--clear-icon {
      position: absolute;
      top: 5px;
      right: 10px;
    }
}

.@{bk-prefix}-input {
  display: inline-flex;
  align-items: stretch;
  width: 100%;
  height: @input-height-base;
  font-size: @font-size-base;
  border: @border-width-base @border-style-base @input-border-color;
  border-radius: @border-radius-base;
  transition: all .3s;
  .placeholder();
  .disabled();

  &:hover:not(.is-disabled) {
    border-color: @gray-color;

    .show-clear-only-hover {
      display: flex;
    }
  }

  &.is-simplicity {
    background-color: transparent;
    border-color: transparent;
    border-bottom-color: @input-border-color;

    &:hover:not(.is-disabled) {
      background-color: @input-block-color;
      border-color: transparent;
      border-bottom-color: @light-gray;
      box-shadow: none;

      .@{bk-prefix}-input--text,
      .@{bk-prefix}-input--suffix-icon {
        background-color: @input-block-color;
      }
    }
  }

  &--suffix-icon {
    display: flex;
    height: 100%;
    padding-right: @input-horizontal-padding;
    font-size: @input-icon-size;
    color: @light-gray;
    background-color: @input-bg;
    align-items: center;
    align-self: center;
    flex-shrink: 0;
    cursor: pointer;

    &:hover {
      color: #313238;
    }

    &.show-clear-only-hover {
      display: none;
    }
  }

  &--clear-icon {
    cursor: pointer;
    flex-shrink: 0;

    &:hover {
      color: @gray-color;
    }
  }


  &--large {
    .component-size(@component-size-large, @font-size-medium);
    .placeholder(@font-size-medium);

    .@{bk-prefix}-input--max-length {
      font-size: @font-size-large;
    }

    .@{bk-prefix}-input--number-control {
      span:first-child {
        margin-bottom: 4px;
      }
    }
  }

  &--small {
    .component-size(@component-size-small, @font-size-base);

    .@{bk-prefix}-input--max-length {
      font-size: @font-size-base;
    }
  }

  &--default {
    font-size: @font-size-base;

    .@{bk-prefix}-input--max-length {
      font-size: @font-size-base;
    }
  }

  &.is-focused:not(.is-readonly) {
    .active();

    &.is-simplicity {
      border-color: transparent;
      border-bottom-color: @primary-color;
      box-shadow: none;

      .@{bk-prefix}-input--text,
      .@{bk-prefix}-input--suffix-icon {
        background-color: @input-block-color;
      }
    }
  }



  &--prefix-area,
  &--suffix-area {
    display: flex;
    padding: 0 @input-horizontal-padding;
    color: @default-color;
    background-color: @input-block-color;
    border-right: 1px solid @input-border-color;
    align-items: center;
  }

  &--suffix-area {
    border: 0;
    border-left: 1px solid @input-border-color;
  }

  &--max-length {
    align-self: center;
    padding-right: @input-horizontal-padding;
    font-size: 12px;
    transform: scale(.8);

    &.is-over-limit {
      color: @danger-color;
    }

    span {
      color: @input-maxlength-color;
    }
  }

  &--text {
    width: 100%;
    padding: 0 @input-horizontal-padding;
    overflow: hidden;
    line-height: 1;
    color: @input-color;
    text-overflow: ellipsis;
    white-space: nowrap;
    background-color: @input-bg;
    background-image: none;
    border: none;
    border-radius: @border-radius-base;
    outline: none;
    box-sizing: border-box;
    transition: all .3s;
    flex: 1;

    //Chrome
    &[type='search']::-webkit-search-decoration,
    &[type='search']::-webkit-search-cancel-button,
    &[type='search']::-webkit-search-results-button,
    &[type='search']::-webkit-search-results-decoration {
      appearance: none;
    }

    // IE
    [type='search']::-ms-clear {
      display: none;
      width: 0;
      height: 0;
    }

    [type='search']::-ms-reveal {
      display: none;
      width: 0;
      height: 0;
    }

    &[type='number']::-webkit-inner-spin-button,
    &[type='number']::-webkit-outer-spin-button {
      margin: 0;
      appearance: none;
    }


  }

  &--number-control {
    display: flex;
    width: 26px;
    height: 100%;
    padding: 4px 0;
    font-size: 0;
    user-select: none;
    flex-direction: column;
    align-items: center;

    span {
      display: flex;
      overflow: hidden;
      line-height: 1;
      color: @gray-color;
      text-align: center;
      cursor: pointer;
      background-color: @input-block-color;
      flex: 1;
      align-items: center;

      &.is-disabled {
        color: @light-gray;
        cursor: not-allowed;
      }
    }

    svg {
      font-size: @input-icon-size;
    }

    span:first-child {
      transform: rotate(180deg);
    }

    span:not(.is-disabled):hover {
      background-color: @input-block-hover-color;
    }
  }
}

// 去掉自动填充时的背景颜色
/* 针对 Chrome、Safari 和新版 Edge 的样式 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 100px @input-bg inset !important;
  box-shadow: 0 0 0 100px @input-bg inset !important;
}

/* 针对 Firefox 的样式 */
input:-moz-autofill,
input:-moz-autofill:hover,
input:-moz-autofill:focus,
input:-moz-autofill:active {
  -moz-box-shadow: 0 0 0 100px @input-bg inset !important;
  box-shadow: 0 0 0 100px @input-bg inset !important;
}