@layer brand, tokens, density, elements, values, brand-mark, spacing, cut-edges, actions, panels, marks, roles, headings, regions, authored-text, shell, absence, layouts, motion, states, embed, tables, truncation, print, without-fills, hidden;
@layer roles {
  .kit-role-number-field {
    --_kit-held-part-size: calc(var(--_kit-control-height) - 2 * (var(--_kit-rhythm) + var(--_kit-rule)));
  }
  .kit-role-number-field[data-kit-width=narrow] {
    --_kit-field-step: calc(var(--_kit-field-narrow) + 2 * (var(--_kit-inset-tight) + var(--_kit-rule)));
  }
  .kit-role-number-field[data-kit-width=short] {
    --_kit-field-step: calc(var(--_kit-field-short) + 2 * (var(--_kit-inset-tight) + var(--_kit-rule)));
  }
  .kit-role-number-field[data-kit-width=medium] {
    --_kit-field-step: calc(var(--_kit-field-medium) + 2 * (var(--_kit-inset-tight) + var(--_kit-rule)));
  }
  .kit-role-number-field[data-kit-width=wide] {
    --_kit-field-step: calc(var(--_kit-field-wide) + 2 * (var(--_kit-inset-tight) + var(--_kit-rule)));
  }
  .kit-role-number-field:has(> input:disabled) {
    border-color: var(--_kit-panel-boundary);
    background-color: color-mix(in oklch, var(--_kit-text-muted) 18%, var(--_kit-panel-surface));
  }
  .kit-role-number-field {
    display: flex;
    align-items: center;
    gap: var(--_kit-rhythm);
    box-sizing: border-box;
    inline-size: fit-content;
    max-inline-size: 100%;
    min-inline-size: min(var(--_kit-field-step, 0px), 100%);
    block-size: var(--_kit-control-height);
    min-block-size: var(--_kit-control-height);
    border: var(--_kit-rule) solid var(--_kit-field-edge);
    border-radius: var(--_kit-radius);
    background: var(--_kit-panel-surface);
    font-size: var(--_kit-value-size);
    cursor: text;
  }
  .kit-role-number-field > .kit-region-unit {
    flex: none;
    align-self: center;
    padding-inline: var(--_kit-inset-tight);
    color: var(--_kit-text-muted);
    white-space: pre;
  }
  .kit-role-number-field > .kit-region-unit:first-child {
    margin-inline-end: calc(-1 * var(--_kit-rhythm));
    padding-inline-end: 0;
  }
  .kit-role-number-field > input[type=text] + .kit-region-unit {
    margin-inline-start: calc(-1 * var(--_kit-rhythm));
    padding-inline-start: 0;
  }
  .kit-role-number-field > input[type=text] {
    flex: 0 1 auto;
    field-sizing: content;
    align-self: stretch;
    min-inline-size: calc(var(--_kit-inset-tight) + 1ch);
    padding: 0 var(--_kit-inset-tight);
    border: 0;
    background: none;
    color: var(--_kit-text-ink);
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    font-variant-numeric: tabular-nums;
  }
  .kit-role-number-field > .kit-region-unit:first-child + input[type=text] {
    padding-inline-start: 0;
  }
  .kit-role-number-field > input[type=text]:has(+ .kit-region-unit) {
    padding-inline-end: 0;
  }
  .kit-role-number-field > .kit-region-decrease,
  .kit-role-number-field > .kit-region-increase {
    flex: none;
    background-color: transparent;
    &[data-kit-state~=submitting],
    &[aria-busy=true],
    &[data-kit-state~=inert],
    &:disabled:where(:not([data-phx-disabled=false])) {
      background-color: var(--_kit-wash);
    }
  }
  .kit-role-number-field:has(> .kit-region-decrease) {
    padding-inline-end: var(--_kit-rhythm);
  }
  .kit-role-number-field > .kit-region-decrease {
    margin-inline-start: auto;
  }
  .kit-role-number-field:has(> input[type=text]:focus-visible) {
    outline: var(--_kit-focus-edge) solid var(--_kit-text-ink);
    outline-offset: var(--_kit-focus-edge);
    box-shadow: 0 0 0 var(--_kit-focus-edge) var(--_kit-focus-halo);
  }
  .kit-role-number-field > input[type=text]:focus-visible {
    outline: none;
    box-shadow: none;
  }
}