/* wedge_input_html — the barcode-wedge input's own rules, kept here because
 * the server strips a template's <style> block.
 *
 * The form root is the .wi-wrap div itself, so .wi-wrap stays a bare
 * class and every other rule is scoped :where(.wi-wrap), which adds no
 * specificity and so cannot change which rule wins. This is a child component
 * mounted by another form, never a screen, so the root rule takes no
 * position/flex/min-height.
 *
 * @keyframes wiFlash keeps its name: it is already uniquely prefixed and is
 * declared nowhere else in the app, the theme or the shared dependency.
 */

.wi-wrap {
  font-family: var(--px-font);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  width: 100%;
}

:where(.wi-wrap) .wi-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

:where(.wi-wrap) .wi-input {
  flex: 1;
  font-family: var(--px-mono);
  font-size: 16px;
  padding: 12px 16px;
  border: 2px solid var(--px-border);
  border-radius: var(--px-radius-sm);
  background: var(--px-input-bg);
  color: var(--px-text-primary);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.2s, color 0.2s;
}

:where(.wi-wrap) .wi-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

:where(.wi-wrap) .wi-input.wi-focused {
  background: var(--px-input-bg);
  color: var(--px-text-primary);
}

:where(.wi-wrap) .wi-input.wi-flash {
  animation: wiFlash 0.5s infinite;
}

@keyframes wiFlash {
  0%, 100% { border-color: var(--accent); }
  50% { border-color: var(--accent-subtle); }
}

:where(.wi-wrap) .wi-input.wi-error {
  border-color: var(--px-danger);
}

:where(.wi-wrap) .wi-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}