:root {
  --focus-force-color: var(--focus-color, var(--primary));
  --focus-force-offset: max(3px, var(--focus-offset, 2px));
  --focus-force-width: max(3px, var(--focus-width, 2px));
  --focus-force-inner: var(--body-bg-color, #fff);
  --focus-force-outer: var(--focus-force-color);
  --focus-force-radius: var(--radius, 5px);
}



:where(a[href],
  button,
  input:not([type="hidden"]),
  select,
  textarea,
  summary,
  [tabindex]:not([tabindex="-1"]),
  [role="button"],
  [role="link"],
  [role="checkbox"],
  [role="radio"],
  [role="switch"],
  [role="tab"]):focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}



:where(a[href],
  button,
  input:not([type="hidden"]),
  select,
  textarea,
  summary,
  [tabindex]:not([tabindex="-1"]),
  [role="button"],
  [role="link"],
  [role="checkbox"],
  [role="radio"],
  [role="switch"],
  [role="tab"]):not(.focus-parent *):focus-visible {
  outline: var(--focus-force-width) solid transparent !important;
  outline-offset: var(--focus-force-offset) !important;
  box-shadow:
    0 0 0 2px var(--focus-force-inner),
    0 0 0 6px var(--focus-force-outer) !important;
  border-radius: var(--focus-force-radius) !important;
}


:where(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
  select,
  textarea):not(.focus-parent *):focus-visible {
  border-color: var(--focus-force-color) !important;
}



.focus-parent :where(a[href],
  button,
  input:not([type="hidden"]),
  select,
  textarea,
  summary,
  [tabindex]:not([tabindex="-1"]),
  [role="button"],
  [role="link"],
  [role="checkbox"],
  [role="radio"],
  [role="switch"],
  [role="tab"]):focus,
.focus-parent :where(a[href],
  button,
  input:not([type="hidden"]),
  select,
  textarea,
  summary,
  [tabindex]:not([tabindex="-1"]),
  [role="button"],
  [role="link"],
  [role="checkbox"],
  [role="radio"],
  [role="switch"],
  [role="tab"]):focus-visible,
.focus-parent :where(a[href],
  button,
  input:not([type="hidden"]),
  select,
  textarea,
  summary,
  [tabindex]:not([tabindex="-1"]),
  [role="button"],
  [role="link"],
  [role="checkbox"],
  [role="radio"],
  [role="switch"],
  [role="tab"]):focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}



.focus-parent {
  transition:
    outline-color var(--transition),
    outline-offset var(--transition),
    box-shadow var(--transition),
    border-color var(--transition),
    background-color var(--transition),
    color var(--transition);
}

.focus-parent:focus-within {
  outline: none !important;
  box-shadow: none !important;
}


@supports selector(.focus-parent:has(:focus-visible)) {

  .focus-parent:has( :where(a[href],
      button,
      input:not([type="hidden"]),
      select,
      textarea,
      summary,
      [tabindex]:not([tabindex="-1"]),
      [role="button"],
      [role="link"],
      [role="checkbox"],
      [role="radio"],
      [role="switch"],
      [role="tab"]):focus-visible) {
    outline: var(--focus-force-width) solid transparent !important;
    outline-offset: var(--focus-force-offset) !important;
    box-shadow:
      0 0 0 2px var(--focus-force-inner),
      0 0 0 6px var(--focus-force-outer) !important;
    border-radius: var(--focus-force-radius) !important;
  }
}


@supports not selector(.focus-parent:has(:focus-visible)) {
  .focus-parent:focus-within {
    outline: var(--focus-force-width) solid transparent !important;
    outline-offset: var(--focus-force-offset) !important;
    box-shadow:
      0 0 0 2px var(--focus-force-inner),
      0 0 0 6px var(--focus-force-outer) !important;
    border-radius: var(--focus-force-radius) !important;
  }
}



@media (forced-colors: active) {

  :where(a[href],
    button,
    input:not([type="hidden"]),
    select,
    textarea,
    summary,
    [tabindex]:not([tabindex="-1"]),
    [role="button"],
    [role="link"],
    [role="checkbox"],
    [role="radio"],
    [role="switch"],
    [role="tab"]):not(.focus-parent *):focus-visible,
  .focus-parent:has( :where(a[href],
      button,
      input:not([type="hidden"]),
      select,
      textarea,
      summary,
      [tabindex]:not([tabindex="-1"]),
      [role="button"],
      [role="link"],
      [role="checkbox"],
      [role="radio"],
      [role="switch"],
      [role="tab"]):focus-visible) {
    outline: 2px solid CanvasText !important;
    outline-offset: 3px !important;
    box-shadow: none !important;
  }
}