/* Reference implementation: existing controls opt in through these two classes.
   Border geometry and validation remain owned by the consuming component. */
.ps-indigo-field {
  position: relative;
  border-radius: var(--ps-indigo-radius, 6px);
}

@supports (mask-composite: exclude) or (-webkit-mask-composite: xor) {
  .ps-indigo-field::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(90deg, var(--ps-indigo-from, #2877d4), var(--ps-indigo-to, #6751c8));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--ps-indigo-duration, 200ms) ease;
  }
  .ps-indigo-field:focus-within:not([data-invalid="true"]):not([data-disabled="true"])::after {
    opacity: 1;
  }
  .ps-indigo-field:where(:not([data-invalid="true"]):not([data-disabled="true"])) > .ps-indigo-control:focus {
    outline: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ps-indigo-field::after {
    transition: none;
  }
}

@media (forced-colors: active) {
  .ps-indigo-field::after {
    display: none;
  }
  .ps-indigo-field > .ps-indigo-control:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 0;
  }
}