@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './mixin';
@import './affix';
@import './allow-clear';

@input-prefix-cls: ~'@{wd-prefix}-input';

// Input styles
.@{input-prefix-cls} {
  .reset-component();
  .input();

  //== Style for input-group: input with label, with button or dropdown...
  &-group {
    .reset-component();
    .input-group(~'@{input-prefix-cls}');

    &-wrapper {
      display: inline-block;
      width: 100%;
      text-align: start;
      vertical-align: top; // https://github.com/ant-design/ant-design/issues/6403
    }
  }

  &-password-icon {
    color: @text-color-secondary;
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
      color: @input-icon-hover-color;
    }
  }

  &[type='color'] {
    height: @input-height-base;

    &.@{input-prefix-cls}-lg {
      height: @input-height-lg;
    }
    &.@{input-prefix-cls}-sm {
      height: @input-height-sm;
      padding-top: 3px;
      padding-bottom: 3px;
    }
  }

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

  &-borderless {
    &.@{input-prefix-cls}-disabled {
      background-color: @input-disabled-bg-borderless !important;
    }
  }
}

textarea&.@{input-prefix-cls} {
  resize: none;
}

.@{input-prefix-cls}&.@{input-prefix-cls}-resize {
  resize: vertical;
  cursor: s-resize;
  overflow: hidden;
}

.@{input-prefix-cls}&.@{input-prefix-cls}-textarea-wrapper-rtl {
  display: flex;
  flex-direction: column;
  padding: @padding-xss 0 @padding-xss calc(@padding-sm - 1px) !important;
  transition: none !important;

  .@{input-prefix-cls}-textarea {
    flex: 1;
  }

  textarea {
    height: 100% !important;
    border: none !important;
    padding: 0 !important;
    padding-right: calc(@padding-sm - 1px) !important;
    margin: 0 !important;
    resize: none;
    transition: none !important;
    border-radius: 0;
  }

  .@{input-prefix-cls}-textarea-show-count {
    text-align: right;
    padding-right: calc(@padding-xs - 1px);
    color: @input-show-count-color;
    white-space: nowrap;
    line-height: @input-show-count-line-height;
  }

  .@{input-prefix-cls}-textarea-count-max {
    color: @fluctuation-rise-text;
  }

  ::-webkit-scrollbar {
    width: @padding-xss;
    height: @padding-xss;
  }

  // 滚动条的设置
  ::-webkit-scrollbar-thumb {
    background-color: var(--wd-sp-scroll-bar);
    background-clip: padding-box;
    border-radius: 50px;
    transition: all 0.5s linear 0s;
  }
}

.@{input-prefix-cls}&.@{input-prefix-cls}-textarea-wrapper-rtl&.@{input-prefix-cls}-textarea-scroll {
  padding-right: @padding-xss !important;

  textarea {
    padding-right: @padding-xss !important;
  }

  .@{input-prefix-cls}-textarea-show-count {
    padding-right: calc(@padding-xss - 1px) !important;
  }
}

@import './search-input';
@import './rtl';
@import './IE11';