@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-one-time-code:has(> input:disabled):before {
    border-color: var(--_kit-panel-boundary);
    background-color: color-mix(in oklch, var(--_kit-text-muted) 18%, var(--_kit-panel-surface));
  }
  .kit-role-one-time-code {
    --_kit-code-cell: var(--_kit-control-height);
    --_kit-code-length: 6;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--_kit-inset-tight);
    min-inline-size: 0;
  }
  .kit-role-one-time-code:has(> input[maxlength="4"]) {
    --_kit-code-length: 4;
  }
  .kit-role-one-time-code:has(> input[maxlength="5"]) {
    --_kit-code-length: 5;
  }
  .kit-role-one-time-code:has(> input[maxlength="7"]) {
    --_kit-code-length: 7;
  }
  .kit-role-one-time-code:has(> input[maxlength="8"]) {
    --_kit-code-length: 8;
  }
  .kit-role-one-time-code:before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    box-sizing: border-box;
    inline-size: calc(var(--_kit-code-length) * var(--_kit-code-cell) + 2 * var(--_kit-rule));
    block-size: calc(var(--_kit-code-cell) + 2 * var(--_kit-rule));
    border: var(--_kit-rule) solid var(--_kit-field-edge);
    border-radius: var(--_kit-radius);
    background-color: var(--_kit-panel-surface);
    background-image:
      repeating-linear-gradient(
        to right,
        transparent 0 calc(var(--_kit-code-cell) - var(--_kit-rule)),
        var(--_kit-muted) 0 var(--_kit-code-cell));
    background-size: calc((var(--_kit-code-length) - 1) * var(--_kit-code-cell)) 100%;
    background-repeat: no-repeat;
  }
  .kit-role-one-time-code:has(> input[maxlength="6"]):before {
    background-image:
      linear-gradient(
        to right,
        transparent calc(3 * var(--_kit-code-cell) - 2 * var(--_kit-rule)),
        var(--_kit-muted) 0),
      repeating-linear-gradient(
        to right,
        transparent 0 calc(var(--_kit-code-cell) - var(--_kit-rule)),
        var(--_kit-muted) 0 var(--_kit-code-cell));
    background-size: calc(3 * var(--_kit-code-cell)) 100%, calc(5 * var(--_kit-code-cell)) 100%;
  }
  .kit-role-one-time-code:has(> input:focus-visible):before {
    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-one-time-code > input {
    --_kit-code-gap: calc(var(--_kit-code-cell) - 1ch);
    position: relative;
    box-sizing: content-box;
    inline-size: calc(var(--_kit-code-length) * var(--_kit-code-cell));
    max-inline-size: none;
    block-size: var(--_kit-code-cell);
    margin: 0;
    padding: var(--_kit-rule) 0 var(--_kit-rule) calc(var(--_kit-rule) + var(--_kit-code-gap) / 2);
    border: 0;
    border-radius: var(--_kit-radius);
    background: none;
    color: var(--_kit-text-ink);
    font-family: var(--_kit-mono-family);
    font-size: var(--_kit-value-size);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--_kit-code-gap);
    clip-path: inset(0 calc(var(--_kit-code-gap) / 2 - var(--_kit-rule)) 0 0);
  }
  .kit-role-one-time-code > input:focus-visible {
    outline: none;
    box-shadow: none;
  }
}