/**
 * Accessibility: a visible focus outline on everything that takes keyboard focus. The colours,
 * width and offset come from the settings, as custom properties on :root (frontend.php).
 *
 * accessibility.js gives the element that gets focus a class for what is behind it:
 * ds-a11y-on-dark switches the outline to the light colour, through a custom property of its own,
 * --ds-a11y-ring; ds-a11y-on-mixed, where the background can be light or dark (a picture, a
 * video), adds a band in the light colour on both sides of the outline. Something focusable inside
 * an element on dark that is not on dark itself gets the normal colour back, instead of
 * inheriting the light one.
 *
 * Breakdance and WooCommerce turn the outline off on many fields, at rest or on :focus, in the
 * cart and checkout, in forms, the search form, select2 dropdowns and the faceted filters, some of
 * them with the weight of four classes. :not(#ds-a11y), an id that no element has, matches every
 * element and gives the rules here the weight of an id, so they win from any rule with classes
 * only, without !important. The outline rule weighs (1,3,1): :is() counts as its heaviest part,
 * [tabindex]:not([tabindex="-1"]) at (0,2,0); the band (1,2,1).
 */

.ds-a11y-on-dark {
	--ds-a11y-ring: var(--ds-a11y-focus-dark);
}

.ds-a11y-on-dark :focus-visible:not(.ds-a11y-on-dark) {
	--ds-a11y-ring: var(--ds-a11y-focus);
}

body :is(a[href], area[href], button, input:not([type="hidden"]), select, textarea, summary, [tabindex]:not([tabindex="-1"]), [role="button"], [role="link"], [role="tab"], [role="checkbox"], [role="radio"], [role="switch"], [contenteditable="true"], .button-atom):focus-visible:not(#ds-a11y) {
	outline: var(--ds-a11y-focus-width) solid var(--ds-a11y-ring, var(--ds-a11y-focus));
	outline-offset: var(--ds-a11y-focus-offset);
}

/* The light band: from the element's edge to beyond the outline, which is drawn over it. */
body .ds-a11y-on-mixed:focus-visible:not(#ds-a11y) {
	box-shadow: 0 0 0 calc(var(--ds-a11y-focus-offset) + 2 * var(--ds-a11y-focus-width)) var(--ds-a11y-focus-dark);
}

/* The range inputs of the price slider in WooCommerce's product filter block keep their own focus
   style against anything less than !important, as the audits found. */
body .wc-block-product-filter-price-slider__range input[type="range"]:focus-visible {
	outline: var(--ds-a11y-focus-width) solid var(--ds-a11y-ring, var(--ds-a11y-focus)) !important;
	outline-offset: var(--ds-a11y-focus-offset) !important;
}