{"version":3,"file":"number-input.css.cjs","names":[],"sources":["../../../src/inputs/number-input/number-input.css?inline"],"sourcesContent":["@layer refine.base {\n  /* No explicit `width` here, on purpose — matches every other field's own `:host` (`ore-input`,\n     `ore-select`, `ore-combobox`, `ore-date-picker`). A grid/flex item with `width: auto` (the\n     default) stretches to fill its track by default; the old `width: fit-content` here overrode\n     that default and forced this one field to shrink-wrap while every sibling field stretched to\n     match the column, e.g. in a 2-column form grid.\n     `min-width` is different: every field above sets the same `12rem` floor (each via its own\n     `--<field>-min-width` custom property) so that a row of mixed field types — this one included\n     — doesn't shrink-wrap to noticeably different widths purely because their *content* (a typed\n     number vs. a selected option's label vs. free text) happens to differ. */\n  :host {\n    display: inline-flex;\n    min-width: var(--number-input-min-width, 12rem);\n  }\n\n  /* Explicit opt-in still forces full width outside a stretching grid/flex context — same\n     convention as ore-input's own :host([fullwidth]). */\n  :host([fullwidth]) {\n    width: 100%;\n  }\n\n  /* The inner `ore-input` (class=\"field\", see number-input.ts) is a flex item of this `:host`'s\n     own `inline-flex` box — without `flex: 1` it only ever grows to its own `min-width` (12rem)\n     and no further, leaving this component visibly narrower than its host once the host itself\n     stretches to fill a wider grid/flex track (e.g. next to a full-width sibling field). `flex: 1`\n     lets it grow to match; its own `min-width` (inherited from `ore-input`'s `:host`) still holds\n     as the shrink floor, so this doesn't affect the min-width consistency across field types. */\n  .field {\n    flex: 1;\n  }\n\n  /* Centre the typed number inside the field */\n  .field::part(input) {\n    text-align: center;\n  }\n\n  /* Stepper buttons — slotted into ore-input's own prefix/suffix, so they render inside its\n     bordered box like its built-in clear/password-toggle buttons, not as separate controls. */\n  button[part='decrement-btn'],\n  button[part='increment-btn'] {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-6);\n    min-width: var(--size-6);\n    height: var(--size-6);\n    min-height: var(--size-6);\n    padding: 0;\n    color: var(--color-contrast-600);\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-sm);\n    transition:\n      color var(--transition-fast),\n      background var(--transition-fast);\n  }\n\n  button[part='decrement-btn']:hover:not(:disabled),\n  button[part='increment-btn']:hover:not(:disabled) {\n    color: var(--color-contrast-900);\n    background: var(--color-contrast-150, var(--color-contrast-100));\n  }\n\n  button[part='decrement-btn']:active:not(:disabled),\n  button[part='increment-btn']:active:not(:disabled) {\n    background: var(--color-contrast-200);\n  }\n\n  button[part='decrement-btn']:disabled,\n  button[part='increment-btn']:disabled {\n    color: var(--color-contrast-300);\n    cursor: not-allowed;\n    background: transparent;\n  }\n\n  button[part='decrement-btn']:focus-visible,\n  button[part='increment-btn']:focus-visible {\n    outline: 2px solid var(--color-primary-500);\n    outline-offset: -2px;\n  }\n}\n\n/* ========================================\n     Disabled State — intentionally unlayered\n     ======================================== */\n\n/*\n * `disabledStateMixin` (passed directly in `styles:`, not via `fieldMixins`) dims\n * `:host([disabled])` with `opacity: 0.5` as bare, unlayered CSS. Cascade layers always lose to\n * unlayered rules regardless of source order or specificity, so overriding that from inside any\n * `@layer` block in this file would be a no-op — this has to stay unlayered too, to actually win.\n * See `ore-input`'s `input.css` for the same pattern.\n *\n * The visible surface here is entirely the inner `ore-input`'s own `.field` (already fixed to a\n * grayscale look, not opacity) plus these slotted stepper buttons (muted via `:disabled` above,\n * also not opacity) — so this host itself needs no compensating background/color, just dropping\n * the blanket opacity that would otherwise wash out both of those over again.\n */\n:host([disabled]) {\n  opacity: 1;\n}\n"],"mappings":""}