{"version":3,"file":"numberInput.module.mjs","names":[],"sources":["../../../../package/common/numberInput/numberInput.module.pcss"],"sourcesContent":[".numberInput {\n  /* Only set when the split layout wraps this input in a flex row. */\n  &-split {\n    flex: 1;\n    min-width: 0;\n  }\n}\n\n/* ── Stacked layout: chevrons inside the field's right edge (mouse-oriented) ───────── */\n\n/* Input's `suffix` slot: stretch to the field so the chevrons get its full height. Two classes, to\n   outrank Input's one-class suffix rules whichever stylesheet loads first. */\n.numberInput .arrowSuffix {\n  align-self: stretch;\n  display: flex;\n  padding-right: 0;\n}\n\n.arrows {\n  display: flex;\n  flex-direction: column;\n  align-self: stretch;\n  border-left: 1px solid var(--border-color);\n\n  /* Sitting flush against the field's edge, the chevrons' background would square off its\n     rounded corner, so it is clipped. Read from --group-radius-* like Input's own border, so it\n     still flattens inside a ButtonGroup. */\n  overflow: hidden;\n  border-top-right-radius: var(--group-radius-tr, var(--default-border-radius));\n  border-bottom-right-radius: var(--group-radius-br, var(--default-border-radius));\n}\n\n.arrowBtn {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: none;\n  border: none;\n  padding: 0 0.5em;\n\n  /* No min-height: the two halves divide the field's own height, so a stepper never makes a\n     NumberInput taller than a plain Input. In em, so it tracks the field's text size. */\n  min-width: 1.75em;\n  font-size: 0.75em;\n  line-height: 1;\n  color: var(--text-dark);\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n\n  /* So a long press reads as a hold, not a text gesture. */\n  touch-action: manipulation;\n  user-select: none;\n  -webkit-user-select: none;\n  -webkit-touch-callout: none;\n  transition:\n    color 0.15s,\n    opacity 0.15s;\n\n  &:disabled {\n    cursor: default;\n    opacity: 0.35;\n  }\n\n  &:focus-visible {\n    outline: 2px solid var(--focus-border-color, var(--primary-color));\n    outline-offset: -2px;\n  }\n\n  /* (hover: hover) only — on touch a :hover state latches after a tap until you tap elsewhere.\n\n     Colour-only, unlike the --background-accent-light hover surface used elsewhere in the\n     library: this button sits flush against .arrows' 1px --border-color divider, and in dark\n     palettes those two tokens are close enough in luminance that painting the surface right up\n     to the line eats most of the divider's already-low contrast, under the pointer. Tuning the\n     hover colour per theme would not hold — the collision is between three tokens (divider,\n     hover surface, field background), so any new theme can reintroduce it. The chevron turning\n     --primary-color is affordance enough on a target this small. */\n  @media (hover: hover) {\n    &:hover:not(:disabled) {\n      color: var(--primary-color);\n    }\n  }\n\n  &:active:not(:disabled) {\n    color: var(--primary-color);\n  }\n}\n\n/* ── Split layout: full-height − / + flanking the field (touch-oriented) ───────────── */\n\n/* ButtonGroup is inline-flex; a form field fills its row instead, with the Input taking the\n   slack (see .numberInput-split). The class is repeated to beat `.buttonGroup`'s own `display`\n   without depending on which CSS module the bundler emits first. */\n.split.split {\n  display: flex;\n  width: 100%;\n}\n\n/* Two classes, to outrank Button's one-class rules whichever stylesheet loads first. Resting state\n   only: Button's hover and press layer tints over it. */\n.split .splitBtn {\n  background: var(--input-background);\n  color: var(--text-dark);\n  border-color: var(--border-color);\n}\n\n.splitBtn {\n  flex: 0 0 auto;\n\n  /* No fixed height — ButtonGroup stretches these to the field.\n\n     The width repeats Input's own height, `calc(1.25em + 14px)` on `.input-container`, to come\n     out square at any text size, and must follow it if that changes. `aspect-ratio: 1` cannot do this: a flex item's main size is resolved from\n     its content before the stretched cross size exists. */\n  align-self: stretch;\n  width: calc(1.25em + 14px);\n  touch-action: manipulation;\n  user-select: none;\n  -webkit-user-select: none;\n  -webkit-touch-callout: none;\n  transition: opacity 0.15s;\n\n  &:disabled {\n    opacity: 0.35;\n  }\n\n  &:focus-visible {\n    outline: 2px solid var(--focus-border-color, var(--primary-color));\n    outline-offset: 2px;\n  }\n}\n\n/* One continuous border, so the buttons follow the field's focus and error colours — left grey,\n   the group reads as a box inside a box. */\n.split:focus-within .splitBtn {\n  border-color: var(--focus-border-color, var(--primary-color));\n}\n\n.split-invalid .splitBtn {\n  border-color: var(--error-border-color);\n}\n"],"mappings":""}