{"version":3,"file":"input.css.cjs","names":[],"sources":["../../../src/inputs/input/input.css?inline"],"sourcesContent":["@layer refine.base {\n  /* ========================================\n       Base Styles & Defaults\n       ======================================== */\n\n  :host {\n    --_font-size: var(--input-font-size, var(--text-sm));\n    --_gap: var(--input-gap, var(--size-2));\n    --_field-height: var(--input-height, var(--size-10));\n    --_padding: var(--input-padding, var(--size-1-5) var(--size-3));\n    --_label-block-inset: var(--input-label-block-inset, var(--size-2));\n    --_label-inset: var(--input-label-inset, var(--size-3));\n    --_radius: var(--input-radius, var(--rounded-lg));\n    --_placeholder: var(--input-placeholder-color, var(--color-contrast-500));\n    --_bg: var(--input-bg, var(--color-contrast-100));\n    --_border-color: var(--input-border-color, var(--color-contrast-300));\n\n    display: inline-flex;\n    flex-direction: column;\n    align-items: stretch;\n    min-width: var(--input-min-width, 12rem);\n  }\n\n  .input-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: 0;\n    width: 100%;\n  }\n\n  .field {\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: 0;\n    align-items: stretch;\n    justify-content: center;\n    height: var(--_field-height);\n    min-height: var(--_field-height);\n    padding: var(--_padding);\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--shadow-2xs);\n    transition: var(\n      --_motion-transition,\n      background var(--transition-fast),\n      backdrop-filter var(--transition-fast),\n      border-color var(--transition-fast),\n      box-shadow var(--transition-fast)\n    );\n  }\n\n  /* Expand height to fit inset label + input row */\n  .input-wrapper:has(.label:not([hidden])) .field {\n    height: auto;\n  }\n\n  /* Outside placement: label is above the field (natural flow) */\n\n  /* Inset placement (default): label appears inside the field border */\n  :host(:not([label-placement='outside'])) .input-wrapper {\n    position: relative;\n  }\n\n  :host(:not([label-placement='outside'])) .label {\n    position: absolute;\n    inset-block-start: var(--_label-block-inset);\n    inset-inline-start: var(--_label-inset);\n    z-index: 1;\n    pointer-events: none;\n  }\n\n  :host(:not([label-placement='outside'])) .input-wrapper:has(.label:not([hidden])) .field {\n    padding-block-start: calc(var(--_label-block-inset) + 1lh + 2px);\n  }\n\n  .input-row {\n    display: flex;\n    flex: 1;\n    gap: var(--_gap);\n    align-items: center;\n  }\n\n  /* ========================================\n       Label Styles\n       ======================================== */\n\n  .label,\n  label.label {\n    margin-bottom: 2px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-500);\n    white-space: nowrap;\n    cursor: pointer;\n    user-select: none;\n    transition: var(--_motion-transition, color var(--transition-fast));\n  }\n\n  /* Outside placement: label moves outside the field via CSS */\n  :host([label-placement='outside']) .label,\n  :host([label-placement='outside']) label.label {\n    order: -1;\n    font-size: var(--text-xs);\n    line-height: var(--leading-loose);\n  }\n\n  /* ========================================\n       Helper Text\n       ======================================== */\n\n  .helper-text {\n    padding-inline: 2px;\n    margin-top: var(--size-1-5);\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));\n    overflow-wrap: anywhere;\n  }\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  /* ========================================\n       Slotted Prefix/Suffix Icons\n       ======================================== */\n\n  ::slotted(svg) {\n    flex-shrink: 0;\n    width: var(--_icon-size, var(--leading-6));\n    height: var(--_icon-size, var(--leading-6));\n  }\n}\n\n@layer refine.overrides {\n  /* ========================================\n       Input Element\n       ======================================== */\n\n  input {\n    flex: 1;\n    min-width: 0;\n    font: inherit;\n    font-size: var(--_font-size);\n    line-height: var(--leading-normal);\n\n    /* No all: unset needed - reset layer handles it */\n    color: var(--color-contrast-900);\n    outline: none;\n    background: transparent;\n    border: none;\n  }\n\n  input::placeholder {\n    color: var(--_placeholder);\n    transition: color var(--transition-fast);\n  }\n\n  input:focus-visible {\n    outline: none;\n  }\n\n  /* ========================================\n       Hover & Focus States\n       ======================================== */\n\n  :host(:not([disabled], [variant='bordered'], [variant='flat'])) .field:hover {\n    border-color: var(--color-contrast-400);\n  }\n\n  :host(:not([disabled])) .field:focus-within .label {\n    color: var(--_theme-focus);\n  }\n\n  :host(:not([disabled])) .field:focus-within ::slotted([slot='prefix']),\n  :host(:not([disabled])) .field:focus-within ::slotted([slot='suffix']) {\n    color: var(--_theme-focus);\n  }\n\n  /* ========================================\n       Clear button\n       ======================================== */\n\n  .clear-btn {\n    display: none;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    min-width: var(--_touch-target);\n    height: var(--size-5);\n    min-height: var(--_touch-target);\n    padding: 0;\n    color: var(--color-contrast-500);\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-sm);\n    transition: var(--_motion-transition, color var(--transition-fast));\n  }\n\n  .clear-btn:hover {\n    color: var(--color-contrast-900);\n  }\n\n  .clear-btn:focus-visible {\n    outline: var(--border-2) solid var(--_theme-focus);\n    outline-offset: var(--border);\n  }\n\n  :host([clearable]) .clear-btn {\n    display: flex;\n  }\n\n  :host([clearable]:not([has-value])) .clear-btn {\n    visibility: hidden;\n    pointer-events: none;\n  }\n\n  /* ========================================\n       Password visibility toggle\n       ======================================== */\n\n  .pwd-toggle-btn {\n    display: none;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    min-width: var(--_touch-target);\n    height: var(--size-5);\n    min-height: var(--_touch-target);\n    padding: 0;\n    color: var(--color-contrast-500);\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-sm);\n    transition: var(--_motion-transition, color var(--transition-fast));\n  }\n\n  .pwd-toggle-btn:hover {\n    color: var(--color-contrast-900);\n  }\n\n  .pwd-toggle-btn:focus-visible {\n    outline: var(--border-2) solid var(--_theme-focus);\n    outline-offset: var(--border);\n  }\n\n  :host([type='password']) .pwd-toggle-btn {\n    display: flex;\n  }\n\n  /* ========================================\n       Character counter\n       ======================================== */\n\n  .char-counter {\n    padding-inline: 2px;\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-400);\n    text-align: end;\n    white-space: nowrap;\n  }\n\n  .char-counter[data-near-limit] {\n    color: var(--color-warning, #f59e0b);\n  }\n\n  .char-counter[data-at-limit] {\n    color: var(--color-error);\n  }\n\n  /* ========================================\n       Error State\n       ======================================== */\n\n  :host([error]:not([error=''])) .field {\n    border-color: var(--color-error);\n  }\n\n  :host([error]:not([error=''])) .label {\n    color: var(--color-error);\n  }\n\n  .helper-text[role='alert'] {\n    color: var(--color-error);\n  }\n\n  /* ========================================\n       Success State (Signal 04)\n       ======================================== */\n\n  :host([success]) .field {\n    border-color: var(--color-success);\n  }\n\n  /* ========================================\n       Status Icon (Signals 03/04: error/success — never color alone)\n       ======================================== */\n\n  .status-icon {\n    display: none;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    height: var(--size-5);\n  }\n\n  :host([error]:not([error=''])) .status-icon,\n  :host([success]) .status-icon {\n    display: flex;\n  }\n\n  .status-icon[data-status='error'] {\n    color: var(--color-error);\n  }\n\n  .status-icon[data-status='success'] {\n    color: var(--color-success);\n  }\n\n  /* ========================================\n       Loading Spinner (Signal 06)\n       ======================================== */\n\n  /* Keyframe must live in shadow DOM — @keyframes don't inherit across shadow roots */\n  @keyframes spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  .field-spinner {\n    display: none;\n    flex-shrink: 0;\n    width: var(--size-4);\n    height: var(--size-4);\n    border: var(--border-2) solid var(--_theme-focus, currentcolor);\n    border-inline-end-color: transparent;\n    border-radius: 50%;\n    animation: var(--_motion-animation, spin var(--transition-loader) infinite);\n  }\n\n  :host([loading]) .field-spinner {\n    display: inline-block;\n  }\n}\n\n/*\n * The solid/flat/bordered/outline/ghost variant switch (previously here) now lives in\n * `fieldVariantMixin({ container: '.field', tokenPrefix: 'input' })` in `input.ts`'s `styles`\n * array — shared with `ore-textarea`/`ore-message-composer` instead of hand-duplicated across\n * all three (see the mixin's own doc comment for what it covers and why). `ore-input`'s extra\n * `text` variant (below) is not part of that shared set, so it keeps its own block here.\n */\n@layer refine.variants {\n  /* Text — underline style */\n  :host([variant='text']) {\n    --_bg: var(--input-bg, transparent);\n    --_border-color: var(--input-border-color, var(--color-contrast-300));\n  }\n\n  :host([variant='text']) .field {\n    background: transparent;\n    border: none;\n    border-radius: 0;\n    box-shadow: none;\n  }\n\n  :host([variant='text']) .field:focus-within {\n    box-shadow: none;\n  }\n\n  /*\n   * Focus/error/success `box-shadow` on `.field` — kept here in `refine.variants` (alongside\n   * `fieldVariantMixin`'s rest-state `box-shadow` for solid/outline/ghost) rather than\n   * `refine.overrides`, so normal specificity decides the winner. Cascade layers beat\n   * specificity outright, so a `refine.overrides` box-shadow always lost to every variant's\n   * unconditional rest-state `box-shadow`, focused/error/success or not — the same bug class\n   * fixed for `ore-otp-input`'s focus ring.\n   */\n  :host(:not([disabled], [variant='text'], [variant='flat'])) .field:focus-within {\n    background: var(--color-canvas);\n    border-color: var(--_theme-focus);\n    box-shadow: var(--_theme-shadow, var(--color-primary-focus-shadow));\n  }\n\n  :host([error]:not([error=''])) .field:focus-within {\n    border-color: var(--color-error);\n    box-shadow: var(--color-error-focus-shadow);\n  }\n\n  :host([success]) .field:focus-within {\n    border-color: var(--color-success);\n    box-shadow: var(--color-success-focus-shadow);\n  }\n}\n\n@layer refine.utilities {\n  /* Full width */\n  :host([fullwidth]) {\n    width: 100%;\n  }\n}\n\n/* ========================================\n     Disabled State (Signal 05) — intentionally unlayered\n     ======================================== */\n\n/*\n * The shared `disabledLoadingMixin` (pulled in via `fieldMixins`) dims `:host([disabled])`\n * with `opacity: 0.5` as bare, unlayered CSS. Cascade layers always lose to unlayered rules\n * regardless of source order or specificity, so overriding that from inside any `@layer`\n * block in this file (including `refine.overrides`) would be a no-op — this has to stay\n * unlayered too, to actually win.\n *\n * Per the field-state UX review: opacity-based dimming reads as a washed-out/loading look\n * and can mimic reduced-contrast content for low-vision users, rather than a clearly locked\n * field. Swapped for an explicit grayscale surface + `not-allowed` cursor (the cursor already\n * comes from the shared mixin, left untouched here).\n */\n:host([disabled]) {\n  opacity: 1;\n}\n\n:host([disabled]) .field {\n  background: var(--color-contrast-100);\n  border-color: var(--color-contrast-200);\n  box-shadow: none;\n}\n\n:host([disabled]) input {\n  color: var(--color-contrast-400);\n}\n\n:host([disabled]) input::placeholder {\n  color: var(--color-contrast-300);\n}\n\n:host([disabled]) .label {\n  color: var(--color-contrast-400);\n}\n"],"mappings":""}