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

.@{veui-prefix}-number-input {
  position: relative;
  width: @veui-number-input-width-normal-m;
  padding-right: @veui-number-input-padding-x;

  &[ui~="xs"] {
    width: @veui-number-input-width-normal-xs;
  }

  &[ui~="s"] {
    width: @veui-number-input-width-normal-s;
  }

  &[ui~="l"] {
    width: @veui-number-input-width-normal-l;
  }

  &[ui~="xl"] {
    width: @veui-number-input-width-normal-xl;
  }

  .@{veui-prefix}-input-input {
    ime-mode: disabled;
    text-overflow: clip;
    font-variant-numeric: tabular-nums;
  }

  &[ui~="normal"] {
    overflow: hidden;

    .@{veui-prefix}-input-after {
      right: 0;
      position: absolute;
      min-width: @veui-number-input-spin-button-min-width-normal;
      padding: 0;
      margin-left: @veui-input-padding;
    }

    .@{veui-prefix}-input-after,
    .@{veui-prefix}-number-input-controls {
      .border-right-radius(inherit);
    }

    &[ui~="xs"] .@{veui-prefix}-input-after {
      .size(@veui-number-input-spin-button-width-normal-xs, 100%);
    }

    &[ui~="s"] .@{veui-prefix}-input-after {
      .size(@veui-number-input-spin-button-width-normal-s, 100%);
    }

    &[ui~="m"] {
      .@{veui-prefix}-input-after {
        .size(@veui-number-input-spin-button-width-normal-m, 100%);
      }
      .@{veui-prefix}-input-content {
        .@{veui-prefix}-input-input {
          line-height: 22px;
        }
      }
    }

    &[ui~="l"] {
      .@{veui-prefix}-input-after {
        .size(@veui-number-input-spin-button-width-normal-l, 100%);
      }
      .@{veui-prefix}-input-content {
        .@{veui-prefix}-input-input {
          line-height: 22px;
        }
      }
    }

    &[ui~="xl"] {
      .@{veui-prefix}-input-after {
        .size(@veui-number-input-spin-button-width-normal-xl, 100%);
      }
      .@{veui-prefix}-input-content {
        .@{veui-prefix}-input-input {
          line-height: 22px;
        }
      }
    }
  }

  &-controls-focus[ui~="normal"] {
    overflow: visible;
  }

  &[ui~="normal"] &-controls {
    .absolute(-1px, -1px, -1px, _);
    width: 0;
    opacity: 0;
    overflow: hidden;
    .veui-transition(opacity, width);
    .@{veui-prefix}-button:hover,
    .@{veui-prefix}-button:active {
      background: @veui-background-color-normal;
      .@{veui-prefix}-icon {
        color: @veui-number-input-spin-button-hover-color;
      }
      &.@{veui-prefix}-number-input-step-up {
        border-bottom-color: @veui-number-input-spin-button-color;
      }
      &.@{veui-prefix}-number-input-step-down {
        border-top-color: @veui-number-input-spin-button-color;
      }
    }
  }

  &[ui~="normal"]:hover,
  &[ui~="normal"].@{veui-prefix}-focus,
  &-controls-focus[ui~="normal"] {
    padding-right: veui-sum(@veui-number-input-padding-x, @veui-number-input-spin-button-min-width-normal);
  }

  &[ui~="normal"]:hover &-controls,
  &[ui~="normal"].@{veui-prefix}-focus &-controls,
  &-controls-focus[ui~="normal"] &-controls {
    width: 100%;
    opacity: 1;
    overflow: visible;
  }

  &-step,
  &-step[ui] {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    background-clip: padding-box;
    border-radius: inherit;
    color: @veui-number-input-spin-icon-color;
  }

  &[ui~="normal"] &-step:not(.focus-visible) {
    .border-color(transparent, transparent, transparent, @veui-number-input-spin-button-color);
  }

  &[ui~="normal"] &-step {
    position: relative;

    &.@{veui-prefix}-button {
      min-width: veui-sum(@veui-number-input-spin-button-min-width-normal, -1px);
      height: calc(50% + 1px);
      padding: 0;
      .border-left-radius(0);
    }

    &.focus-visible {
      z-index: 1;
    }

    &.@{veui-prefix}-disabled:hover {
      .border-color(transparent, transparent, transparent, _);
    }

    .@{veui-prefix}-icon {
      .veui-icon-size(@veui-number-input-spin-icon-size-normal);
    }
  }

  &[ui~="normal"] &-step-up {
    .absolute(0, 0, _, _);

    &.@{veui-prefix}-button {
      border-bottom-right-radius: 0;
    }
  }

  &[ui~="normal"] &-step-down {
    .absolute(_, 0, 0, _);

    &.@{veui-prefix}-button {
      border-top-right-radius: 0;
    }
  }

  &[ui~="strong"] {
    padding: 0;

    .@{veui-prefix}-input {
      &-before,
      &-after {
        position: relative;
        z-index: 1;
        margin-top: -1px;
        padding: 0;
        border-radius: inherit;
        .@{veui-prefix}-number-input {
          &-step {
            min-width: calc(100% - 1px);
            .size(calc(100% - 1px), calc(100% - 2px));
          }
        }
      }

      &-before {
        margin-right: @veui-input-padding;
        margin-left: -1px;
      }

      &-after {
        margin-right: -1px;
        margin-left: @veui-input-padding;
      }
    }

    &[ui~="xs"] {
      width: @veui-number-input-width-strong-xs;

      .@{veui-prefix}-input {
        &-before,
        &-after {
          .size(@veui-number-input-height-xs);
        }
      }
    }

    &[ui~="s"] {
      width: @veui-number-input-width-strong-s;

      .@{veui-prefix}-input {
        &-before,
        &-after {
          .size(@veui-number-input-height-s);
        }
      }
    }

    &[ui~="m"] {
      width: @veui-number-input-width-strong-m;

      .@{veui-prefix}-input {
        &-before,
        &-after {
          .size(@veui-number-input-height-m);
        }
        &-content {
          .@{veui-prefix}-input-input {
            line-height: 22px;
          }
        }
      }
    }

    &[ui~="l"] {
      width: @veui-number-input-width-strong-l;

      .@{veui-prefix}-input {
        &-before,
        &-after {
          .size(@veui-number-input-height-l);
        }
        &-content {
          .@{veui-prefix}-input-input {
            line-height: 22px;
          }
        }
      }
    }
    &[ui~="xl"] {
      width: @veui-number-input-width-strong-xl;

      .@{veui-prefix}-input {
        &-before,
        &-after {
          .size(@veui-number-input-height-xl);
        }
        &-content {
          .@{veui-prefix}-input-input {
            line-height: 22px;
          }
        }
      }
    }

    .@{veui-prefix}-number-input {
      &-step {
        padding: 0;
        border-style: none;
        &:hover {
          background-color: @veui-background-color-normal-hover;
        }
        &:active {
          background-color: @veui-background-color-normal-active;
        }

        &-down {
          border-right-style: solid;
          border-right-color: @veui-number-input-spin-button-color;
          .border-right-radius(0);
          margin-left: 1px;
        }

        &-up {
          border-left-style: solid;
          border-left-color: @veui-number-input-spin-button-color;
          .border-left-radius(0);
          margin-right: 1px;
        }

        &.focus-visible {
          .size(100%);
          border-style: solid;
          margin: 0;
        }

        .@{veui-prefix}-icon {
          .veui-icon-size(@veui-number-input-spin-icon-size-strong);
          color: @veui-number-input-spin-icon-color-strong;
        }
      }
    }
    &.@{veui-prefix}-readonly,
    &.@{veui-prefix}-disabled {
      .@{veui-prefix}-number-input-step .@{veui-prefix}-icon {
        color: @veui-font-color-disabled;
      }
    }
  }
}