/**
 * Screen Reader extra accessibility toggles and presets
 * Shared by every toolbar template: icons are drawn with a CSS mask so they follow the text color of the template
 */

/* Page effects */
body.scr_highlight_links a:not(#accessibility-links a) {
	background-color: #ffff00 !important;
	color: #000 !important;
	text-decoration: underline !important;
	outline: 2px solid #000 !important;
	outline-offset: 1px;
}

body.scr_stop_animations *:not(#accessibility-links):not(#accessibility-links *),
body.scr_stop_animations *:not(#accessibility-links):not(#accessibility-links *)::before,
body.scr_stop_animations *:not(#accessibility-links):not(#accessibility-links *)::after {
	animation: none !important;
	animation-duration: 0s !important;
	animation-delay: 0s !important;
	transition: none !important;
	scroll-behavior: auto !important;
}

div#sc_color_overlay {
	position: fixed !important;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	mix-blend-mode: multiply;
	z-index: 99990;
}

div.sc_reading_mask {
	position: fixed !important;
	left: 0;
	width: 100%;
	background: rgba(0, 0, 0, .75);
	pointer-events: none;
	z-index: 2147483646;
}

div#sc_reading_mask_top {
	top: 0;
	height: 40%;
}

div#sc_reading_mask_bottom {
	top: 60%;
	bottom: 0;
}

/* Icons, shared by every template */
div#accessibility-links button.scr-extra-btn::before {
	content: "";
	display: block;
	background-color: currentColor;
	-webkit-mask: var(--scr-icon) no-repeat center / contain;
	mask: var(--scr-icon) no-repeat center / contain;
	pointer-events: none;
}

div#accessibility-links button#fr_screenreader_highlight_links {
	--scr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z'/%3E%3C/svg%3E");
}

div#accessibility-links button#fr_screenreader_stop_animations {
	--scr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16h2V8H9v8zm3-14C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm1-4h2V8h-2v8z'/%3E%3C/svg%3E");
}

div#accessibility-links button#fr_screenreader_color_overlay {
	--scr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.49 2 2 6.49 2 12s4.49 10 10 10c1.38 0 2.5-1.12 2.5-2.5 0-.61-.23-1.2-.64-1.67-.08-.1-.13-.21-.13-.33 0-.28.22-.5.5-.5H16c3.31 0 6-2.69 6-6 0-4.96-4.49-9-10-9zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 8 6.5 8 8 8.67 8 9.5 7.33 11 6.5 11zm3-4C8.67 7 8 6.33 8 5.5S8.67 4 9.5 4s1.5.67 1.5 1.5S10.33 7 9.5 7zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 4 14.5 4s1.5.67 1.5 1.5S15.33 7 14.5 7zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 8 17.5 8s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E");
}

/* The dot shows the color of the overlay in use */
div#accessibility-links button#fr_screenreader_color_overlay[data-overlay]::after {
	content: "";
	position: absolute;
	top: 6px;
	right: 6px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--scr-overlay-color, transparent);
	box-shadow: 0 0 0 2px #fff, 0 0 0 3px #666;
	pointer-events: none;
}

div#accessibility-links button#fr_screenreader_reading_mask {
	--scr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 4h20v6H2zM2 14h20v6H2z'/%3E%3C/svg%3E");
}

/* Accessible template */
div#accessibility-links.scr-tpl-accessible button.scr-extra-btn {
	font-family: Arial, Helvetica, sans-serif !important;
	text-transform: none;
	display: inline-flex;
	position: relative;
	justify-content: flex-start;
	align-items: center;
	flex-direction: column;
	overflow: hidden;
	width: 31%;
	line-height: 17px;
	height: 120px;
	outline: 0 !important;
	padding: 5px;
	padding-top: 65px;
	user-select: none;
	cursor: pointer;
	border-radius: 10px;
	border: 2px solid #dadada;
	background: #f2f7fa;
	transition: all .5s ease;
	color: #000;
	margin: 5px;
	font-size: 14px !important;
	font-weight: normal;
	letter-spacing: initial;
}

div#accessibility-links.scr-tpl-accessible button.scr-extra-btn::before {
	position: absolute;
	top: 18px;
	left: 50%;
	width: 32px;
	height: 32px;
	margin-left: -16px;
}

div#accessibility-links.scr-tpl-accessible button.scr-extra-btn:active,
div#accessibility-links.scr-tpl-accessible button.scr-extra-btn.active {
	background: #0069fb;
	color: #fff;
}

div#accessibility-links.scr-tpl-accessible button.scr-extra-btn:focus-visible,
div#accessibility-links.scr-tpl-accessible button.scr-preset-btn:focus-visible {
	box-shadow: 0 0 0 3px #ffbf47 !important;
}

/* Presets, accessible template only */
div#accessibility-links.scr-tpl-accessible button.scr-preset-btn {
	font-family: Arial, Helvetica, sans-serif !important;
	text-transform: none;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 47.5%;
	min-height: 44px;
	padding: 8px;
	margin: 5px 1%;
	cursor: pointer;
	border-radius: 10px;
	border: 2px solid #dadada;
	background: #f2f7fa;
	color: #000;
	font-size: 14px !important;
	font-weight: normal;
	line-height: 17px;
	letter-spacing: initial;
	transition: all .5s ease;
	outline: 0 !important;
}

div#accessibility-links.scr-tpl-accessible button.scr-preset-btn:hover,
div#accessibility-links.scr-tpl-accessible button.scr-preset-btn.active {
	background: #0069fb;
	color: #fff;
}

div#accessibility-links.scr-tpl-accessible.scr-toolbar-darkmode button.scr-extra-btn,
div#accessibility-links.scr-tpl-accessible.scr-toolbar-darkmode button.scr-preset-btn {
	background: #2b2d33;
	border-color: #444;
	color: #fff;
}

div#accessibility-links.scr-tpl-accessible.scr-toolbar-darkmode button.scr-extra-btn.active,
div#accessibility-links.scr-tpl-accessible.scr-toolbar-darkmode button.scr-preset-btn.active {
	background: #0069fb;
}

/* Icon only templates, horizontal toolbar */
div#accessibility-links.horizontal:not(.scr-tpl-accessible) button.scr-extra-btn {
	position: relative;
	color: #222 !important;
	font-size: 0 !important;
	line-height: 0;
	background: transparent;
	border: none !important;
}

div#accessibility-links.horizontal:not(.scr-tpl-accessible) button.scr-extra-btn::before {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 22px;
	height: 22px;
	margin: -11px 0 0 -11px;
}

div#accessibility-links.horizontal:not(.scr-tpl-accessible) button.scr-extra-btn.active {
	background: rgba(20, 111, 248, .18);
	box-shadow: inset 0 0 0 2px #146ff8;
	border-radius: 4px;
}

/* Icon only templates, vertical toolbar shows the label next to the icon */
div#accessibility-links.vertical:not(.scr-tpl-accessible) button.scr-extra-btn {
	position: relative;
	width: 100% !important;
	padding: 0 0 0 30px !important;
	margin: 0 !important;
	display: block !important;
	text-align: left;
	color: inherit !important;
	font-size: 13px !important;
	font-weight: normal;
	background: transparent;
	border: none !important;
	border-bottom: 1px solid #dadada !important;
	box-sizing: border-box;
}

div#accessibility-links.vertical:not(.scr-tpl-accessible) button.scr-extra-btn::before {
	position: absolute;
	top: 50%;
	left: 6px;
	width: 18px;
	height: 18px;
	margin-top: -9px;
}

div#accessibility-links.vertical:not(.scr-tpl-accessible) button.scr-extra-btn.active {
	font-weight: bold;
	text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
	div#accessibility-links button.scr-extra-btn,
	div#accessibility-links button.scr-preset-btn {
		transition: none !important;
	}
}

/* Voice menu of the Web Speech engine */
div#accessibility-links div.scr-voice-selector-container {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 6px 10px;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
}

div#accessibility-links div.scr-voice-selector-container label {
	display: block;
	margin: 0 0 4px;
	font-size: 13px;
	font-weight: bold;
	color: inherit;
}

div#accessibility-links div.scr-voice-selector-container select.scr-voice-selector {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	height: auto !important;
	min-height: 38px;
	margin: 0;
	padding: 6px 8px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1.4 !important;
	border: 2px solid #dadada;
	border-radius: 8px;
	background-color: #f2f7fa;
	color: #000;
	outline: none !important;
	box-shadow: none;
}

div#accessibility-links div.scr-voice-selector-container select.scr-voice-selector:focus {
	border-color: #146ff8;
	box-shadow: 0 0 0 2px rgba(20, 111, 248, .3);
}

/* Icons of the profile buttons */
div#accessibility-links button.scr-preset-btn::before {
	content: "";
	display: block;
	background-color: currentColor;
	-webkit-mask: var(--scr-icon) no-repeat center / contain;
	mask: var(--scr-icon) no-repeat center / contain;
	pointer-events: none;
}

div#accessibility-links button#fr_screenreader_preset_vision {
	--scr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E");
}

div#accessibility-links button#fr_screenreader_preset_dyslexia {
	--scr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.93 13.5h4.14L12 7.98 9.93 13.5zM20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-4.05 16.5l-1.14-3H9.17l-1.12 3H5.96l5.11-13h1.86l5.11 13h-2.09z'/%3E%3C/svg%3E");
}

div#accessibility-links button#fr_screenreader_preset_focus {
	--scr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.49 2 2 6.49 2 12s4.49 10 10 10 10-4.49 10-10S17.51 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E");
}

div#accessibility-links button#fr_screenreader_preset_motor {
	--scr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23 5.5V20c0 2.2-1.8 4-4 4h-7.3c-1.08 0-2.1-.43-2.85-1.19L1 14.83s1.26-1.23 1.3-1.25c.22-.19.49-.29.79-.29.22 0 .42.06.6.16.04.01 4.31 2.46 4.31 2.46V4c0-.83.67-1.5 1.5-1.5S11 3.17 11 4v7h1V1.5c0-.83.67-1.5 1.5-1.5S15 .67 15 1.5V11h1V2.5c0-.83.67-1.5 1.5-1.5S19 1.67 19 2.5V11h1V5.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5z'/%3E%3C/svg%3E");
}

div#accessibility-links button#fr_screenreader_preset_seizure {
	--scr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z'/%3E%3C/svg%3E");
}

div#accessibility-links button#fr_screenreader_preset_reset {
	--scr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/%3E%3C/svg%3E");
}

/* Profile buttons of the accessible template, same layout of the other buttons: icon above the label */
div#accessibility-links.scr-tpl-accessible button.scr-preset-btn {
	position: relative;
	flex-direction: column;
	justify-content: flex-start;
	overflow: hidden;
	width: 31%;
	height: 120px;
	min-height: 0;
	padding: 5px;
	padding-top: 65px;
	margin: 5px;
}

div#accessibility-links.scr-tpl-accessible button.scr-preset-btn::before {
	position: absolute;
	top: 18px;
	left: 50%;
	width: 32px;
	height: 32px;
	margin-left: -16px;
}

/* Size labels (+15%) of the accessible template, the text color is fixed and never animated */
div#accessibility-links div.scfontsizelabel,
div#accessibility-links div.scspacingsizelabel,
div#accessibility-links div.sczoomsizelabel {
	color: #fff !important;
	-webkit-text-fill-color: #fff;
	transition: background-color .15s ease, transform .15s ease;
}