@layer components {
  .rs-number-field {
    --rs-number-field-control-size: var(--rs-unit-x6);
    --rs-number-field-control-border: var(--rs-color-border-neutral);
    position: relative;
    font-variant-numeric: tabular-nums;
  }

  .rs-number-field[data-size="small"] {
    --rs-number-field-control-size: var(--rs-unit-x4);
  }

  .rs-number-field[data-size="large"] {
    --rs-number-field-control-size: var(--rs-unit-x7);
  }

  .rs-number-field:has(input:disabled),
  .rs-number-field:has(
    .rs-number-field__control:disabled + .rs-number-field__control:disabled
  ),
  .rs-number-field:has(
    .rs-number-field__control[aria-disabled="true"]
      + .rs-number-field__control[aria-disabled="true"]
  ) {
    --rs-number-field-control-border: var(--rs-color-border-disabled);
  }

  .rs-number-field > input {
    padding-inline-end: calc(
      var(--rs-number-field-control-size) + var(--rs-field-gap)
    );
    font-variant-numeric: inherit;
  }

  .rs-number-field > input::-webkit-inner-spin-button,
  .rs-number-field > input::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
  }

  .rs-number-field__controls {
    position: absolute;
    inset-block: 1px;
    inset-inline-end: 1px;
    display: flex;
    flex-direction: column;
    inline-size: var(--rs-number-field-control-size);
    border-inline-start: 1px solid var(--rs-number-field-control-border);
    overflow: hidden;
    border-start-end-radius: inherit;
    border-end-end-radius: inherit;
    transition: border-color var(--rs-duration-fast) var(--rs-easing-standard);
  }

  .rs-number-field__control {
    appearance: none;
    display: grid;
    place-items: center;
    flex: 1;
    border: 0;
    background: transparent;
    color: var(--rs-color-foreground-neutral-faded);
    cursor: pointer;
    line-height: 1;
    touch-action: manipulation;
    user-select: none;
    transition:
      background-color var(--rs-duration-fast) var(--rs-easing-standard),
      color var(--rs-duration-fast) var(--rs-easing-standard);
  }

  .rs-number-field__control + .rs-number-field__control {
    border-block-start: 1px solid var(--rs-number-field-control-border);
  }

  @media (hover: hover) and (pointer: fine) {
    .rs-number-field__control:hover:not(:disabled, [aria-disabled="true"]) {
      background: color-mix(
        in oklch,
        var(--rs-color-background-neutral),
        transparent 68%
      );
      color: var(--rs-color-foreground-neutral);
    }
  }

  .rs-number-field__control:focus-visible {
    outline: 0;
    box-shadow: var(--rs-shadow-focus-inset);
  }

  .rs-number-field__control:is(:disabled, [aria-disabled="true"]) {
    color: var(--rs-color-foreground-disabled);
    cursor: not-allowed;
  }

  @media (pointer: coarse) and (hover: none) {
    .rs-number-field {
      --rs-number-field-control-size: 5.5rem;
    }

    .rs-number-field[data-size="small"] {
      --rs-number-field-control-size: 3.375rem;
    }

    .rs-number-field[data-size="large"] {
      --rs-number-field-control-size: 6.875rem;
    }

    .rs-number-field__controls {
      flex-direction: row-reverse;
    }

    .rs-number-field__control {
      block-size: 100%;
    }

    .rs-number-field__control + .rs-number-field__control {
      border-block-start: 0;
      border-inline-end: 1px solid var(--rs-number-field-control-border);
    }
  }
}