@ozen-ui/kit/__inner__/cjs/components/InputNumber/InputNumber.css

React component library

.InputNumber {
  --input-number-padding: 0 var(--control-padding-3xs) 0
    var(--textfield-gutter-x);
}

  .InputNumber_size_2xs {
      --input-number-button-block-size: 11px;
      --input-number-button-inline-size: 24px;
      --input-number-button-gap: 2px;
    }

  .InputNumber_size_xs {
      --input-number-button-block-size: 15px;
      --input-number-button-inline-size: 28px;
      --input-number-button-gap: 2px;
    }

  .InputNumber_size_s {
      --input-number-button-block-size: 19px;
      --input-number-button-inline-size: 32px;
      --input-number-button-gap: 2px;
    }

  .InputNumber_size_m {
      --input-number-button-block-size: 23px;
      --input-number-button-inline-size: 40px;
      --input-number-button-gap: 2px;
    }

  .InputNumber_size_l {
      --input-number-button-block-size: 27px;
      --input-number-button-inline-size: 48px;
      --input-number-button-gap: 2px;
    }

  .InputNumber-Body {
    display: flex;
    position: relative;
    align-items: center;
    box-sizing: border-box;
    color: var(--textfield-color);
    -moz-column-gap: var(--textfield-input-gap);
         column-gap: var(--textfield-input-gap);
    border-radius: var(--textfield-border-radius);
    padding: var(--input-number-padding);
    background-color: var(--textfield-background-color);
    transition: background-color var(--transition-slow);
  }

  .InputNumber-FieldContainer {
    inline-size: 100%;
    position: relative;
  }

  .InputNumber-Field {
    border: none;
    outline: none;
    display: flex;
    font: inherit;
    background: none;
    inline-size: 100%;
    box-sizing: border-box;
    -webkit-appearance: textfield;
       -moz-appearance: textfield;
            appearance: textfield;
    color: var(--textfield-color);
    padding: var(--textfield-input-padding);
    block-size: var(--textfield-input-height);
  }

  .InputNumber-Field:-webkit-autofill,
    .InputNumber-Field:-webkit-autofill:hover,
    .InputNumber-Field:-webkit-autofill:focus {
      background-color: transparent !important;
      -webkit-text-fill-color: var(--color-content-info-dark);
      box-shadow: 0 0 0 1000px var(--textfield-background-color) inset !important;
    }

  .InputNumber-Field::-webkit-outer-spin-button,
    .InputNumber-Field::-webkit-inner-spin-button {
      margin: 0;
      -webkit-appearance: none;
              appearance: none;
    }

  .InputNumber-Controls {
    display: flex;
    flex-direction: column;
    row-gap: var(--input-number-button-gap);
  }

.IconButtonNext.InputNumber-Increment,
.IconButtonNext.InputNumber-Decrement {
  inline-size: var(--input-number-button-inline-size);
  block-size: var(--input-number-button-block-size);
}

.IconButtonNext.InputNumber-Increment *, .IconButtonNext.InputNumber-Decrement * {
    pointer-events: none;
  }