/* What the controls do to the page. The panel is in a shadow root and
   unreachable from here, so only its host element needs excluding. */

/* ---- what the controls do to the page --------------------------------- */
/* Filters go on the root: anywhere else they become the containing block for
   fixed positioning. The root is the one element the spec exempts. */

html[data-a11y-invert="1"] { filter: invert(1) hue-rotate(180deg); background: #fff; }
html[data-a11y-invert="1"] :is(img, picture, video, iframe, canvas, [style*="background-image"]) { filter: invert(1) hue-rotate(180deg); }
html[data-a11y-invert="1"] .widewalk-host { filter: invert(1) hue-rotate(180deg); }

html[data-a11y-saturation="1"] { filter: saturate(.45); }
html[data-a11y-saturation="1"] .widewalk-host { filter: saturate(2.222); }
html[data-a11y-saturation="2"] { filter: saturate(1.8); }
html[data-a11y-saturation="2"] .widewalk-host { filter: saturate(.555); }
html[data-a11y-saturation="3"] { filter: grayscale(1); }

html[data-a11y-text="1"] { font-size: 110%; }
html[data-a11y-text="2"] { font-size: 125%; }
html[data-a11y-text="3"] { font-size: 150%; }

html[data-a11y-lineheight="1"] :is(p, li, dd, dt, blockquote, figcaption, td, th, h1, h2, h3, h4, h5, h6):not(.widewalk-host *) { line-height: 1.5 !important; }
html[data-a11y-lineheight="2"] :is(p, li, dd, dt, blockquote, figcaption, td, th, h1, h2, h3, h4, h5, h6):not(.widewalk-host *) { line-height: 1.75 !important; }
html[data-a11y-lineheight="3"] :is(p, li, dd, dt, blockquote, figcaption, td, th, h1, h2, h3, h4, h5, h6):not(.widewalk-host *) { line-height: 2 !important; }

html[data-a11y-spacing="1"] :is(p, li, dd, blockquote, h1, h2, h3, h4, h5, h6):not(.widewalk-host *) { letter-spacing: .04em !important; word-spacing: .1em !important; }
html[data-a11y-spacing="2"] :is(p, li, dd, blockquote, h1, h2, h3, h4, h5, h6):not(.widewalk-host *) { letter-spacing: .09em !important; word-spacing: .18em !important; }
html[data-a11y-spacing="3"] :is(p, li, dd, blockquote, h1, h2, h3, h4, h5, h6):not(.widewalk-host *) { letter-spacing: .15em !important; word-spacing: .3em !important; }
html[data-a11y-spacing] :is(h1, h2, h3, h4, h5, h6, p, li):not(.widewalk-host *) { overflow-wrap: break-word; }

html[data-a11y-align="1"] :is(p, li, dd, dt, blockquote, figcaption, h1, h2, h3, h4, h5, h6):not(.widewalk-host *) { text-align: left !important; }
html[data-a11y-align="2"] :is(p, li, dd, dt, blockquote, figcaption, h1, h2, h3, h4, h5, h6):not(.widewalk-host *) { text-align: center !important; }
html[data-a11y-align="3"] :is(p, li, dd, dt, blockquote, figcaption, h1, h2, h3, h4, h5, h6):not(.widewalk-host *) { text-align: right !important; }

html[data-a11y-links] a:not(.widewalk-host *) {
	text-decoration: underline !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: .16em !important;
}
html[data-a11y-links="2"] a:not(.widewalk-host *) {
	background: #FFF59A !important;
	color: #16181D !important;
	box-shadow: 0 0 0 2px #16181D;
	border-radius: 2px;
}

html[data-a11y-images="1"] :is(img, picture, video, iframe, canvas, svg):not(.widewalk-host *) { visibility: hidden !important; }
html[data-a11y-images="1"] *:not(.widewalk-host):not(.widewalk-host *) { background-image: none !important; }

html[data-a11y-dyslexia="1"] :not(.widewalk-host):not(.widewalk-host *) {
	font-family: "OpenDyslexic", "Comic Sans MS", "Atkinson Hyperlegible", Verdana, Tahoma, sans-serif !important;
}
html[data-a11y-dyslexia="1"] :is(p, li, dd):not(.widewalk-host *) { line-height: 1.8 !important; letter-spacing: .03em !important; }

html[data-a11y-cursor="1"], html[data-a11y-cursor="1"] *:not(.widewalk-host *) {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 24 24'%3E%3Cpath d='M5 2.2l13.6 8.9-6 1.1-2.6 5.7z' fill='%23fff' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2, auto !important;
}
html[data-a11y-cursor="2"], html[data-a11y-cursor="2"] *:not(.widewalk-host *) {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='66' height='66' viewBox='0 0 24 24'%3E%3Cpath d='M5 2.2l13.6 8.9-6 1.1-2.6 5.7z' fill='%23fff' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, auto !important;
}
html[data-a11y-cursor] :is(a, button, [role="button"]):not(.widewalk-host *) {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M9 11V5.6a1.6 1.6 0 0 1 3.2 0V11m0-1.2a1.5 1.5 0 0 1 3 0V11m0-.6a1.5 1.5 0 0 1 3 0v4.2a5.4 5.4 0 0 1-5.4 5.4h-1.6a5 5 0 0 1-4.3-2.5L5 14.2a1.5 1.5 0 0 1 2.5-1.7L9 14.4' fill='%23fff' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 12 3, pointer !important;
}

/* Marks which elements carry a hidden description. */
html[data-a11y-tooltips="1"] :is([aria-label], [title]):not(.widewalk-host *) { cursor: help; }

html[data-a11y-animations="1"] { scroll-behavior: auto !important; }
html[data-a11y-animations="1"] *:not(.widewalk-host *),
html[data-a11y-animations="1"] *:not(.widewalk-host *)::before,
html[data-a11y-animations="1"] *:not(.widewalk-host *)::after {
	animation-duration: .01ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: .01ms !important;
	scroll-behavior: auto !important;
}

/* High contrast, for a site that does not dress it itself. A theme which does
   declares as much and this whole block stands down, rather than the two
   fighting with !important over the same elements. */
html[data-a11y-invert="2"]:not([data-a11y-host]) :not(.widewalk-host):not(.widewalk-host *) {
	background-color: #000 !important;
	color: #fff !important;
	border-color: #fff !important;
	text-shadow: none !important;
	box-shadow: none !important;
}
html[data-a11y-invert="2"]:not([data-a11y-host]) a:not(.widewalk-host *),
html[data-a11y-invert="2"]:not([data-a11y-host]) a:not(.widewalk-host *) * {
	color: #FFD400 !important;
	text-decoration: underline !important;
}
html[data-a11y-invert="2"]:not([data-a11y-host]) :is(button, input, select, textarea, [type="submit"]):not(.widewalk-host *) {
	border: 2px solid #fff !important;
}
html[data-a11y-invert="2"]:not([data-a11y-host]) :is(img, video, iframe, canvas):not(.widewalk-host *) {
	background: none !important;
}