/* Shared focus treatment for public and admin form controls. */
:root {
  --field-focus-border: #858d74;
  --field-focus-halo: rgb(133 141 116 / 14%);
}

:is(input, select, textarea):not(:where([type=checkbox], [type=radio], [type=hidden])):focus {
  outline: none;
  border-color: var(--field-focus-border);
  box-shadow: 0 0 0 2px var(--field-focus-halo);
}

/* Composite controls receive one ring around their existing outer edge. */
:is(.search, .quantity-input):focus-within {
  border-color: var(--field-focus-border);
  box-shadow: 0 0 0 2px var(--field-focus-halo);
}

:is(.search, .quantity-input) input:focus {
  outline: none;
  border-color: transparent;
  box-shadow: none;
}

input:is([type=checkbox], [type=radio]):focus-visible {
  outline: 1px solid var(--field-focus-border);
  outline-offset: 2px;
}

.template-option input:focus-visible + .template-content {
  outline: 1px solid var(--field-focus-border);
  outline-offset: -3px;
  box-shadow: inset 0 0 0 3px var(--field-focus-halo);
}

/* System high-contrast mode needs an outline because shadows are suppressed. */
@media (forced-colors: active) {
  :is(input, select, textarea):focus,
  :is(.search, .quantity-input):focus-within {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }

  :is(.search, .quantity-input) input:focus {
    outline: none;
  }

  .template-option input:focus-visible + .template-content {
    outline: 2px solid Highlight;
  }
}