:root {
  --match-control-red: #d94a32;
  --match-control-error: #b3261e;
}

/*
 * v0.6.6: shared border-only feedback for native form controls.
 * Existing size, background, text, icons and layout remain page-owned.
 */
:where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea
) {
  transition-property: border-color !important;
  transition-duration: 200ms !important;
  transition-timing-function: ease !important;
}

:where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea
):not(:disabled):not([aria-disabled="true"]):hover,
:where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea
):not(:disabled):not([aria-disabled="true"]):focus,
:where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea
):not(:disabled):not([aria-disabled="true"]):focus-visible {
  border-color: var(--match-control-red) !important;
  outline: none !important;
  box-shadow: none !important;
}

:where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea
)[aria-invalid="true"],
:where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea
).is-invalid,
:where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea
):user-invalid,
:where(.has-error, .field-error, p:has(> .errorlist))
  :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
  border-color: var(--match-control-error) !important;
}

/* The real checkbox stays focusable, clickable and form-associated. */
.match-checkbox {
  position: relative;
  display: inline-grid;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  place-items: center;
  vertical-align: -4px;
}

.match-checkbox-input {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  opacity: 0 !important;
  cursor: pointer;
}

.match-checkbox-visual {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  border: 2px solid #b9b0a7;
  border-radius: 0;
  background-color: #fffdf9;
  box-sizing: border-box;
  pointer-events: none;
  transition:
    border-color 240ms ease,
    background-color 240ms ease,
    transform 200ms cubic-bezier(.22, 1, .36, 1),
    box-shadow 240ms ease;
}

.match-checkbox-checkmark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%);
  stroke: #fffdf9;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  transition: stroke-dashoffset 280ms ease-in-out;
}

.match-checkbox:hover .match-checkbox-visual,
label:hover .match-checkbox-visual {
  border-color: var(--match-control-red);
  transform: scale(1.04);
  box-shadow: 0 0 0 3px rgba(217, 74, 50, .10);
}

.match-checkbox-input:focus-visible + .match-checkbox-visual {
  border-color: var(--match-control-red);
  box-shadow: 0 0 0 3px rgba(217, 74, 50, .18);
}

.match-checkbox-input:checked + .match-checkbox-visual {
  border-color: var(--match-control-red);
  background-color: var(--match-control-red);
  animation: match-checkbox-in 300ms cubic-bezier(.22, 1, .36, 1) forwards;
}

.match-checkbox-input:checked + .match-checkbox-visual .match-checkbox-checkmark {
  stroke-dashoffset: 0;
}

.match-checkbox:hover .match-checkbox-input:checked + .match-checkbox-visual,
label:hover .match-checkbox-input:checked + .match-checkbox-visual {
  box-shadow: 0 0 0 4px rgba(217, 74, 50, .16);
}

.match-checkbox:active .match-checkbox-visual,
label:active .match-checkbox-visual {
  transform: scale(.94);
}

.match-checkbox-input:disabled {
  cursor: not-allowed;
}

.match-checkbox-input:disabled + .match-checkbox-visual {
  border-color: #d2ccc4;
  background-color: #eeeae4;
  box-shadow: none;
  opacity: .62;
}

.match-checkbox-input:disabled:checked + .match-checkbox-visual {
  border-color: #a79f96;
  background-color: #a79f96;
}

.match-checkbox-input[aria-invalid="true"] + .match-checkbox-visual,
.match-checkbox-input:user-invalid + .match-checkbox-visual {
  border-color: var(--match-control-error);
}

@keyframes match-checkbox-in {
  0% { transform: scale(.9); }
  65% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select,
    textarea
  ),
  .match-checkbox-visual,
  .match-checkbox-checkmark {
    transition-duration: 1ms !important;
  }

  .match-checkbox-input:checked + .match-checkbox-visual {
    animation-duration: 1ms;
  }
}