@layer components {
  :root {
    --stepper-btn-size: 2.5em;
    --stepper-gap: 0.25em;
  }

  .stepper {
    align-items: center;
    display: flex;
    gap: var(--stepper-gap);
  }

  .stepper__input {
    font-variant-numeric: tabular-nums;
    inline-size: 3.5em;
    padding: 0.1em 0.15em;
    text-align: center;
  }

  .stepper__input--date {
    inline-size: auto;
    max-inline-size: 10em;
  }

  .stepper__btn {
    --btn-background: transparent;
    --btn-border-size: 0;
    --btn-padding: 0;
    font-variant-numeric: tabular-nums;
    min-inline-size: var(--stepper-btn-size);
  }

  .stepper__checkbox {
    align-items: center;
    color: var(--color-ink-medium);
    display: flex;
    font-size: var(--text-small, 0.875em);
    gap: 0.35em;
    margin-block-start: 0.5em;
  }

  .table--compact .btn--circle {
    --btn-size: 2.25em;
  }
}