/*
 * The verify state is painted by RE-POINTING, on the root, the two tokens the
 * field's own sheet already reads for its edge — `--input` at rest and
 * `--lotics-border-hover` under the pointer — which reach the field by
 * inheritance. Declaring a `border-color` on the field instead would meet that
 * sheet on specificity and source order, and the go/no-go would blink out under
 * the pointer on whichever bundle emitted the field last; a custom property has
 * no competing declaration to lose to.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-verify-field {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--lotics-space-6);
  }

  .lotics-verify-field[data-status="match"] {
    --input: var(--lotics-tone-emerald-solid);
    --lotics-border-hover: var(--lotics-tone-emerald-solid);
  }

  .lotics-verify-field[data-status="mismatch"] {
    --input: var(--lotics-tone-red-solid);
    --lotics-border-hover: var(--lotics-tone-red-solid);
  }
}