@layer components {
  .rs-pin-field {
    display: inline-flex;
    gap: var(--rs-unit-x2);
    vertical-align: top;
    font-variant-numeric: tabular-nums;
  }

  .rs-pin-field > input {
    inline-size: var(--rs-unit-x10);
    block-size: var(--rs-unit-x10);
    border: 0;
    border-radius: var(--rs-radius-small);
    background: var(--rs-color-background-elevation-base);
    color: var(--rs-color-foreground-neutral);
    box-shadow: inset 0 0 0 1px var(--rs-color-border-neutral);
    font-size: var(--rs-font-size-body-2);
    line-height: var(--rs-line-height-body-2);
    text-align: center;
  }

  .rs-pin-field > input:focus {
    outline: 0;
    box-shadow: inset 0 0 0 2px var(--rs-color-border-primary);
  }

  .rs-pin-field:has(:user-invalid) > input {
    box-shadow: inset 0 0 0 2px var(--rs-color-border-critical);
  }
}