/*
 * One storefront focus contract: pointer interaction may change the existing
 * border, while keyboard focus is drawn inside the component's own bounds.
 */
:where(
  a[href],
  button,
  input:not([type="hidden"]),
  select,
  textarea,
  summary,
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: var(--store-focus-width) solid
    var(--store-interactive-focus-color, var(--store-focus-color));
  outline-offset: calc(-1 * var(--store-focus-width));
}

/* Native text controls communicate pointer and keyboard focus through border. */
:where(input, select, textarea):focus {
  border-color: var(--store-interactive-focus-color, var(--store-focus-color));
}