@import "https://assets.elements.dev/assets/app/shared/styles/page.bbd96b3881544aa4.css";

/* The label, control and message stack is @elements/ui's .field. The site
   adds the head row above the control and the inline status in it. */

.form-field-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.625rem;
}

.form-field-status {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
}
.form-field-status.is-checking { color: var(--ink-dim); }
.form-field-status.is-ok       { color: var(--success); }
.form-field-status.is-bad      { color: var(--danger); }
.form-field-status.is-weak     { color: var(--warning); }