@import "../lib.less";

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

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

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

  .@{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: dls-sum(@dls-number-input-spin-button-min-width-normal, -1px);
      padding: 0;
      margin-left: @dls-input-padding;
    }

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

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

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

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

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

  &[ui~="normal"] &-controls {
    .absolute(-1px, -1px, -1px, _);
    width: 0;
    opacity: 0;
    overflow: hidden;
    .veui-transition(opacity, width);
  }

  &[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: @dls-number-input-spin-icon-color;

    &.@{veui-prefix}-disabled {
      color: @dls-number-input-spin-icon-color-disabled;
    }
  }

  &[ui~="normal"] &-step:not(.focus-visible) {
    .border-color(transparent, transparent, transparent, _);
  }

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

    &.@{veui-prefix}-button {
      .size(100%, 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-position-center();
      .dls-icon-size(@dls-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 {
      &-input {
        text-align: center;
      }

      &-before,
      &-after {
        position: relative;
        z-index: 1;
        margin-top: -1px;
        padding: 0;
        border-radius: inherit;
      }

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

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

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

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

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

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

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

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

    .@{veui-prefix}-number-input {
      &-step {
        padding: 0;
        border-style: none;
        .size(calc(100% - 1px), calc(100% - 2px));

        &-down {
          border-right-style: solid;
          .border-right-radius(0);
          margin-left: 1px;
        }

        &-up {
          border-left-style: solid;
          .border-left-radius(0);
          margin-right: 1px;
        }

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

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