/* Verbatim from the DS Input/Select injected #fr-field-styles <style>
   (components/forms/Input.jsx). Border width px->rem per fluid scaling; the
   conic-flow focus border mirrors the buttons, triggered on :focus. */

@property --fr-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes fr-field-flow { to { --fr-angle: 360deg; } }
.fr-field {
  border: 0.09375rem solid transparent;
  background:
    linear-gradient(var(--n-100), var(--n-100)) padding-box,
    linear-gradient(var(--border-strong), var(--border-strong)) border-box;
  transition: background var(--dur, 200ms) var(--ease-out, ease);
}
.fr-field:focus, .fr-field:focus-visible {
  outline: none;
  box-shadow: none;
  background:
    linear-gradient(var(--n-100), var(--n-100)) padding-box,
    conic-gradient(from var(--fr-angle), var(--cyan), var(--blue-action), var(--blue), var(--cyan)) border-box;
  animation: fr-field-flow 3.2s linear infinite;
}
.fr-field--error {
  background:
    linear-gradient(var(--n-100), var(--n-100)) padding-box,
    linear-gradient(var(--error), var(--error)) border-box;
}
.fr-field--error:focus, .fr-field--error:focus-visible {
  box-shadow: none;
  background:
    linear-gradient(var(--n-100), var(--n-100)) padding-box,
    linear-gradient(var(--error), var(--error)) border-box;
  animation: none;
}
.fr-field:disabled {
  background:
    linear-gradient(var(--n-50), var(--n-50)) padding-box,
    linear-gradient(var(--border), var(--border)) border-box;
  animation: none;
}
@media (prefers-reduced-motion: reduce) { .fr-field:focus, .fr-field:focus-visible { animation: none; } }