@import "../lib.less";
@import "../variables/components/input.less";

.@{veui-prefix}-input {
  @left-padding: @veui-input-padding;

  position: relative;
  display: inline-flex;
  align-items: stretch;
  .size(@veui-input-width, @veui-input-height-m);
  font-size: @veui-input-font-size-m;
  border-radius: @veui-input-border-radius-m;
  padding: 0 @veui-input-padding;
  border: 1px solid @veui-input-border-color;
  background-color: @veui-input-background-color;
  color: @veui-input-font-color;
  border-radius: @veui-input-border-radius-m;
  line-height: normal;
  cursor: text;
  .veui-transition(border-color, color, box-shadow);

  &-autofill {
    background-color: @veui-tag-fill-color;
  }

  &-hidden {
    display: none !important;
  }

  &-main {
    display: flex;
    align-items: stretch;
  }

  &-before,
  &-after {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    color: @veui-font-color-strong;
  }

  &-before {
    padding-right: @veui-input-padding;
  }

  &-after {
    padding-left: @veui-input-padding;
  }

  &-content {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    position: relative;
  }

  &-input {
    display: block;
    overflow: hidden;
    border: none;
    outline: none;
    color: inherit;
    padding: 0;
    width: 100%;
    line-height: @veui-line-height-m;
    background-color: transparent;
    .ellipsis();
  }

  &-clear {
    margin: veui-sum(@veui-input-padding-text * -1, -2px);

    &[ui] {
      color: @veui-input-icon-color;
    }

    &-has-after {
      margin-right: veui-sum(
        @veui-input-padding-text * -1,
        -2px,
        @veui-input-content-spacing
      );
    }
  }

  &-clear + &-count {
    margin-left: @veui-input-content-spacing;
  }

  &:hover {
    border-color: @veui-input-border-color-hover;
  }

  &.@{veui-prefix}-readonly {
    border-color: @veui-input-border-color-read-only;
    background-color: @veui-input-background-color-read-only;
  }

  &.@{veui-prefix}-readonly:hover {
    border-color: @veui-input-border-color-read-only-hover;
  }

  &.@{veui-prefix}-readonly &-input {
    color: @veui-input-font-color-read-only;
  }

  &.@{veui-prefix}-focus {
    position: relative;
  }

  &.@{veui-prefix}-focus {
    .veui-focus-ring(@veui-input-border-color-focus, @veui-input-shadow-focus);
  }

  &.@{veui-prefix}-invalid {
    border-color: @veui-input-border-color-error;
    color: @veui-input-font-color-error;
  }

  &.@{veui-prefix}-invalid:hover {
    border-color: @veui-input-border-color-error-hover;
  }

  &.@{veui-prefix}-invalid.@{veui-prefix}-focus {
    .veui-focus-ring(
      @veui-input-border-color-error-focus,
      @veui-input-shadow-error-focus
    );
  }

  &.@{veui-prefix}-focus.@{veui-prefix}-readonly {
    border-color: @veui-input-border-color-read-only-focus;
  }

  &.@{veui-prefix}-disabled {
    background-color: @veui-input-background-color-disabled;;
    border-color: @veui-input-border-color-disabled;
    cursor: not-allowed;
  }

  &.@{veui-prefix}-disabled &-input,
  &.@{veui-prefix}-disabled &-before,
  &.@{veui-prefix}-disabled &-after {
    color: @veui-input-font-color-disabled;
    pointer-events: none;
  }

  &-placeholder {
    position: absolute;
    width: 100%;
    color: @veui-input-placeholder-color;
    pointer-events: none;
    cursor: text;
    .ellipsis();
  }

  &.@{veui-prefix}-disabled &-placeholder {
    color: @veui-input-font-color-disabled;
  }

  &-count {
    line-height: 2; // ensure even number
    color: @veui-input-count-color;
    font-variant-numeric: tabular-nums;
    .veui-transition(color);

    &-overflow {
      color: @veui-input-count-color-error;
    }
  }

  &[ui~="xs"] {
    height: @veui-input-height-xs;
    font-size: @veui-input-font-size-xs;
    border-radius: @veui-input-border-radius-xs;
  }

  &[ui~="s"] {
    height: @veui-input-height-s;
    font-size: @veui-input-font-size-s;
    border-radius: @veui-input-border-radius-s;
  }

  &[ui~="l"] {
    height: @veui-input-height-l;
    font-size: @veui-input-font-size-l;
    border-radius: @veui-input-border-radius-l;
  }

  &[ui~="xl"] {
    height: @veui-input-height-xl;
    font-size: @veui-input-font-size-xl;
    border-radius: @veui-input-border-radius-xl;
  }

  &[ui~="inline"] {
    border-radius: 0;
    border-style: none none solid;
    &.@{veui-prefix}-focus {
      box-shadow: 0 1px 0 0 @veui-input-border-color-focus;
      &.@{veui-prefix}-invalid {
        border-style: none none solid;
        box-shadow: 0 1px 0 0 @veui-input-border-color-error;
      }
    }
  }
}