{"version":3,"file":"otp-input.css.cjs","names":[],"sources":["../../../src/inputs/otp-input/otp-input.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_cell-size: var(--otp-cell-size, var(--size-12));\n    --_cell-gap: var(--otp-cell-gap, var(--size-2));\n    --_cell-font-size: var(--otp-cell-font-size, var(--text-xl));\n    --_cell-radius: var(--otp-cell-radius, var(--rounded-lg));\n    --_cell-border: var(--otp-cell-border, var(--border));\n\n    /* --_bg/--_border-color (not --_cell-*-prefixed, unlike the rest of this component's tokens)\n       — this is the shared name `fieldVariantMixin` reads/writes, matching `ore-input`/`ore-\n       textarea`/`ore-message-composer`. Public override is still `--otp-cell-bg`/`--otp-cell-\n       border-color` either way. */\n    --_border-color: var(--otp-cell-border-color, var(--color-contrast-300));\n    --_bg: var(--otp-cell-bg, var(--color-canvas));\n    --_cell-focus-border: var(--otp-cell-focus-border, var(--_theme-base, var(--color-contrast-700)));\n\n    display: inline-flex;\n    flex-direction: column;\n    gap: var(--size-1);\n  }\n\n  .otp-group {\n    display: flex;\n    gap: var(--_cell-gap);\n    align-items: center;\n  }\n\n  .cell {\n    box-sizing: border-box;\n    display: block;\n    width: var(--_cell-size);\n    height: var(--_cell-size);\n    padding: 0;\n    font-size: var(--_cell-font-size);\n    font-weight: var(--font-semibold);\n    line-height: 1;\n    color: var(--color-contrast-900);\n    text-align: center;\n    caret-color: var(--_cell-focus-border);\n    background: var(--_bg);\n    border: var(--_cell-border) solid var(--_border-color);\n    border-radius: var(--_cell-radius);\n    transition:\n      border-color var(--transition-fast),\n      box-shadow var(--transition-fast);\n  }\n\n  .cell::selection {\n    background: var(--_theme-backdrop, var(--color-contrast-100));\n  }\n\n  /* Ring box-shadow lives in `@layer refine.variants` below, not here — every variant's own\n     rest-state `box-shadow` (`fieldVariantMixin`'s solid/outline/ghost rules) is *also* in\n     `refine.variants`, and cascade layers decide the winner before specificity ever gets\n     consulted. A `refine.base` box-shadow here would always lose to those, focused or not. */\n  .cell:focus {\n    outline: none;\n    border-color: var(--_cell-focus-border);\n  }\n\n  .cell:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  .separator {\n    font-size: var(--_cell-font-size);\n    color: var(--color-contrast-400);\n    user-select: none;\n  }\n}\n\n/*\n * The solid/flat/bordered/outline/ghost variant switch (previously `@layer refine.variants`\n * here) now lives in `fieldVariantMixin({ accentVar: '--_cell-focus-border', container: '.cell',\n * tokenPrefix: 'otp-cell' })` in `otp-input.ts`'s `styles` array — shared with `ore-input`/\n * `ore-textarea`/`ore-message-composer` instead of hand-duplicated. `accentVar` overrides the\n * shared `--_theme-focus` accent with this component's own per-cell focus-color token, since\n * that (not the shared theme-focus token) is what `flat`/`bordered` mixed into their border\n * color here even before this shared version existed.\n */\n@layer refine.variants {\n  /* Focus glow — the same `--_theme-shadow` halo `ore-input`/`ore-textarea`/`ore-message-\n     composer` use, kept out of the shared mixin only because `.cell` is the focusable element\n     itself (not a wrapper, so this is `:focus` not `:focus-within`, and it targets `.cell`\n     directly rather than a mixin-supplied `container`). `flat` excluded — the mixin's own\n     `flat:focus-within` rule already sets a bespoke `box-shadow` for it. */\n  :host(:not([disabled], [variant='flat'])) .cell:focus {\n    box-shadow: var(--_theme-shadow, var(--color-primary-focus-shadow));\n  }\n}\n\n@layer refine.utilities {\n  :host([size='sm']) {\n    --_cell-size: var(--size-9);\n    --_cell-font-size: var(--text-base);\n  }\n\n  :host([size='lg']) {\n    --_cell-size: var(--size-14);\n    --_cell-font-size: var(--text-2xl);\n  }\n}\n"],"mappings":""}