@import "../../../../lib/style/themes/default";
@import "../../../../lib/style/mixins/index";
@import "../../field/style/mixin";

@input-affix-width: .17rem;
@input-button-width: .24rem;

// size mixins for input
.input-lg() {
  &-lg & {
    padding: @input-padding-vertical-lg @input-padding-horizontal;
    height: @input-height-lg;
  }
}

.input-sm() {
  &-sm & {
    padding: @input-padding-vertical-sm @input-padding-horizontal;
    height: @input-height-sm;
  }
}

// input status
// == when focus or actived
.active(@color: @outline-color) {
  border-color: ~`colorPalette("@{color}", 5)`;
  outline: 0;
  color: @input-active-color;
  // box-shadow: 0 0 @outline-blur-size @outline-width fade(@color, 20%);
}

// == when hoverd
.hover(@color: @input-hover-border-color) {
  border-color: ~`colorPalette("@{color}", 5)`;
}

.disabled() {
  background-color: @input-disabled-bg;
  opacity: 1;
  cursor: not-allowed;
  color: @disabled-color;
  &,
  &:hover {
    border-color: @input-border-color;
  }
}

// Placeholder text
.placeholder(@color: @input-placeholder-color) {
  // Firefox
  &::-moz-placeholder {
    text-align: left;
    color: @color;
    opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
  }
  // Internet Explorer 10+
  &:-ms-input-placeholder {
    text-align: left;
    color: @color;
  }
  // Safari and Chrome
  &::-webkit-input-placeholder {
    text-align: left;
    color: @color;
  }
}

// Basic style for input
.input(@prefix-width: @input-button-width, @suffix-width: @input-button-width) {
  position: relative;
  display: inline-block;
  padding: @input-padding-vertical-base @input-padding-horizontal;
  width: 100%;
  height: @input-height-base;
  cursor: text;
  font-size: inherit;
  line-height: 1;
  color: @input-color;
  background-color: transparent;
  background-image: none;
  border: @border-width-base @border-style-base @input-border-color;
  border-radius: @border-radius-base;
  transition: all .3s;

  .placeholder;

  label:hover &,
  &:hover {
    .hover;
  }

  &:focus,
  &-focused & {
    .active;
  }

  &-disabled &,
  &-disabled label:hover &,
  &:disabled {
    .disabled;
  }

  &-disabled &-prefix,
  &-disabled &-suffix,
  &-disabled&-prefix-button &-prefix,
  &-disabled&-suffix-button &-suffix,
  &-disabled &-inner-button,
  &-disabled input {
    cursor: not-allowed;
  }

  &-not-editable & {
    cursor: default;
  }

  &-placeholder {
    position: absolute;
    top: 0;
    bottom: 0;
    height: .2rem;
    line-height: .2rem;
    margin: auto 0;
    white-space: nowrap;
    padding: 0 @input-padding-horizontal;
    color: @input-placeholder-color;
    opacity: 0;
    transition: all .3s;
  }

  // Reset height for `textarea`s
  textarea& {
    max-width: 100%; // prevent textearea resize from coming out of its container
    height: auto;
    vertical-align: bottom;
  }

  // Size
  .input-lg;
  .input-sm;

  &-wrapper {
    position: relative;
    display: inline-block;
    background-color: @input-wrapper-bg;
    vertical-align: top; // <-- use 'top' for styling addonBefore/addonAfter & queryBar's TextField
    line-height: 1;
    label {
      position: relative;
      display: block;
      z-index: 1;
    }
    .@{field-label-prefix-cls} {
      z-index: -1;
    }
  }

  &-prefix,
  &-suffix,
  &-inner-button {
    position: absolute;
    z-index: 1;
    top: .01rem;
    bottom: .01rem;
    height: .2rem;
    text-align: center;
    margin: auto 0;
    line-height: 1;
  }

  &-prefix {
    left: .01rem;
    width: @prefix-width;
  }

  &-suffix {
    width: @suffix-width;
  }

  &-suffix,
  &-inner-button {
    right: .01rem;
  }
  &-prefix-button &-placeholder {
    padding-left: @prefix-width;
  }

  &-suffix-button &-inner-button {
    right: @suffix-width + .01rem;
  }

  &-suffix-button &-suffix {
    cursor: pointer;
  }

  &:not(textarea):not(:last-child) {
    padding-right: @suffix-width;
  }

  &:not(textarea):not(:first-child) {
    padding-left: @prefix-width;
  }

  &-inner-button {
    width: @input-button-width;
    cursor: pointer;
    opacity: 0;
    z-index: 1;
    transition: opacity .3s;
  }

  &-wrapper:hover &-inner-button,
  &-focused &-inner-button {
    opacity: 1;
    z-index: 2;
    &-clear-button {
      right: @suffix-width;
    }
  }

  &-wrapper:hover &-suffix-button &-suffix,
  &-focused&-suffix-button &-suffix {
    opacity: 1;
  }

  &-clear-button {
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 20%, #fff);
    &:hover {
      color: @primary-5;
    }
    &:active {
      color: @primary-3;
    }
  }

  &-empty &-clear-button {
    display: none;
    & + * {
      opacity: 1 !important;
    }
  }
  &-empty &-placeholder {
    opacity: 1;
  }

  > ul {
    position: relative;
    margin: 0;
    padding: .02rem 0 0 0;
    overflow: hidden auto;
    > li {
      height: .24rem;
      line-height: .22rem;
      display: inline-block;
      max-width: 99%;
      vertical-align: middle;
      margin-bottom: .02rem;
    }
  }

  &-multiple {
    &-value {
      visibility: hidden;
      height: 0;
      border: none;
      display: block;
      width: 100%;
    }

    &-input {
      width: .05rem;
      height: 100%;
      border: none;
      outline: 0;
      background-color: transparent;
      max-width: 100%;
      margin-left: .04rem;
    }
  }

  &-multiple & {
    height: auto;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    margin: 0;
  }

  &-multiple &:not(:last-child) {
    padding-right: @suffix-width * 2;
  }

  &-multiple:not(&-suffix-button) &:not(:last-child) {
    padding-right: @suffix-width;
  }

  &-multiple-block {
    .tag-block;
    cursor: default;
    .@{iconfont-css-prefix} {
      line-height: inherit;
      cursor: pointer;
      margin-left: .08rem;
    }
  }

  &-group {
    display: flex;

    &-group-wrapper {
      display: inline-block;
      width: 100%;
    }
    &-before, &-after, &-help {
      background-color: @input-addon-bg;
      padding-left: .05rem;
      padding-right: .05rem;
      border: .01rem solid @input-border-color;
      border-radius: @border-radius-base;
      display: flex;
      align-items: center;
      word-break: keep-all;
    }
    &-before {
      border-right: none;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
    &-after, &-help {
      border-left: none;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
    &-help:not(:last-child) {
      border-radius: 0;
    }
    &-input {
      flex: 1;

      &:first-child:not(:last-child) {
        input {
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
        }
      }
      &:not(:first-child):last-child {
        input {
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
        }
      }
      &:not(:first-child):not(:last-child) {
        input {
          border-radius: 0;
        }
      }
    }
  }

  &-group-input &-wrapper {
    width: 100%;
  }

  &:-webkit-autofill {
    box-shadow: 0 0 0 10rem @input-wrapper-bg inset;
  }

  &-required {
    background-color: @input-required-bg;
  }

  .validation;
  .input-underline;
  .float-label;
}

.input-underline() {
  // underline
  //default underline
  &-underline {
    position: absolute;
    bottom: -@border-width-base;
    height: 0;
    width: 100%;
    border-bottom: @border-width-base @border-style-base @input-baseline-color;
  }

  &-ripple {
    position: absolute;
    left: 0;
    width: 100%;
    transform-origin: 50%;
    transform: scaleX(.5);
    opacity: 0;
    border-bottom: .02rem @border-style-base @primary-color;
    transition: border-color 300ms cubic-bezier(0.55, 0, 0.55, 0.2);
    height: 0;
  }
  //disabled underline
  &-disabled &-underline {
    border-bottom: @border-width-base dotted rgba(0, 0, 0, 0.42);
  }
  // focused underline
  &-focused &-underline &-ripple {
    opacity: 1;
    transform: scaleX(1);
    transition: transform 300ms cubic-bezier(0.25, 0.8, 0.25, 1), opacity 100ms cubic-bezier(0.25, 0.8, 0.25, 1), border-color 300ms cubic-bezier(0.25, 0.8, 0.25, 1);
  }

  &-invalid &-underline {
    border-color: @error-color;
  }
}

.tag-block() {
  display: inline-block;
  color: @tag-default-color;
  background-color: @tag-default-bg;
  border-radius: @border-radius-base;
  padding: 0 .08rem;
  overflow: hidden;
  max-width: 99%;
  margin: 0 .02rem;
  line-height: @line-height-base;
  white-space: nowrap;
  > div {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    vertical-align: middle;
    &:not(:last-child) {
      max-width: ~"calc(100% - .26rem)";
    }
  }
  &-invalid {
    background-color: @error-color;
  }
  &-disabled {
    background-color: @disabled-color;
    padding-right: .1rem;
    cursor: not-allowed;
  }
}