:root {
	--a-pad: 2px;
	--pv-text-s: clamp(1rem, calc(-0.15vw + 1.03rem), 0.9rem);
	--pv-space-xs: clamp(0.6rem, calc(0.42vw + 0.51rem), 0.88rem);
	--pv-space-xl: clamp(1.47rem, calc(3.13vw + 0.76rem), 3.5rem);
	--pv-radius-xl: clamp(1.63rem, calc(-0.58vw + 2.13rem), 2rem);
	--btn-radius: var(--pv-radius-xl);
	--btn-radius-2: calc(var(--btn-radius) / 2);
	--copybar-height: calc(var(--pv-space-xs) * 2 + var(--pv-text-s)); /* uses padding of copyright-bar */
	--copybar-btn-size: 2.5rem;
	--transition-time: 0.3s; /* var(--transition-time) */
	--transition-time-slow: 0.6s; /* var(--transition-time-slow) */
}
:root.prefers-reduced-motion {
	--transition-time: 0;
	--transition-time-slow: 0;
}

.accessibility-buttons {
	--a-pad: 2px;
	position: fixed;
	bottom: calc(var(--copybar-height) - var(--copybar-btn-size) / 2 - var(--a-pad));
	left: calc(0px - var(--copybar-btn-size) * 3.05 - var(--a-pad));
	height: calc(var(--copybar-btn-size) + var(--a-pad) * 2);
	width: calc(var(--copybar-btn-size) * 4 + var(--a-pad) * 2);
	background: var(--base);
	outline: 1px solid var(--contrast-3);
	padding: var(--a-pad);
	border-radius: 0 var(--btn-radius) var(--btn-radius) 0;
	transition: all var(--transition-time);
	z-index: 10;
}

@media (pointer: fine) {
	.accessibility-buttons:hover { opacity: 1; left: 0; }
	.accessibility-buttons:hover .accessibility-switch { transform: scaleX(-1); }
}

@media (pointer: coarse) {
	.accessibility-open .accessibility-buttons { opacity: 1; left: 0; }
	.accessibility-open .accessibility-buttons .accessibility-switch { transform: scaleX(-1); }
}

.accessibility-close .accessibility-buttons { left: calc(0px - var(--copybar-btn-size) * 3 - var(--a-pad)); }
.accessibility-close .accessibility-buttons .accessibility-switch { transform: scaleX(1); }

.btn-round.dark-mode-switch, .btn-round.text-size-switch, .btn-round.animation-switch, .btn-round.accessibility-switch {
	bottom: calc(var(--a-pad) - 0);
	left: var(--a-pad);
	transform: scaleX(-1);
	transition: transform var(--transition-time);
}
.btn-round {
	width: var(--copybar-btn-size);
	height: var(--copybar-btn-size);
	border-radius: var(--btn-radius);
	display: block;
	padding: 0;
}
.wp-element-button.btn-round { padding: 0; }
.btn-round.accessibility-switch {
	border: none;
	background: transparent !important;
	box-shadow: none !important;
	transform: scaleX(1);
}
.btn-round.text-size-switch { left: calc(var(--copybar-btn-size) * 1 + var(--a-pad)); }
.btn-round.dark-mode-switch { left: calc(var(--copybar-btn-size) * 2 + var(--a-pad)); }
.btn-round.accessibility-switch { left: calc(var(--copybar-btn-size) * 3 + var(--a-pad)); }
.cf-theme-dark .btn-round.dark-mode-switch,
.text-size-large .btn-round.text-size-switch,
.prefers-reduced-motion .btn-round.animation-switch { transform: scaleX(1) !important; }

/* Button Icons */
.btn-block-icon { width: 100%; }
.btn-icon { position: absolute; }
.btn-icon .gb-shape svg {
	position: absolute;
	width: 1.2em;
	height: 1.2em;
	fill: currentColor;
	right: var(--btn-radius-2);
	top: 50%;
	transform: translateY(-50%);
}
.btn-block-icon a::after {
	position: absolute;
	width: 1.2em;
	height: 1.2em;
	fill: currentColor;
	right: var(--btn-radius-2);
	top: 50%;
	transform: translateY(-50%);
}