/* Translate Switch — sliding pill. Colors follow the theme unless set in Settings → Translate Switch. */
.mcl-ts {
	--mcl-ink: var(--wp--preset--color--foreground, currentColor);
	--mcl-paper: var(--wp--preset--color--background, #fff);
	--mcl-inset: 2px;
	--mcl-count: 2;
	--mcl-index: 0;

	position: relative;
	display: inline-grid;
	grid-template-columns: repeat(var(--mcl-count), 1fr);
	align-items: center;
	vertical-align: middle;
	box-sizing: border-box;
	padding: var(--mcl-inset);
	border: 1px solid var(--mcl-ink);
	border-radius: 999px;
	background: var(--mcl-paper);
	color: var(--mcl-ink);
	font-family: inherit;
	font-size: .72rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: .06em;
	white-space: nowrap;
	isolation: isolate;
}

/* The sliding knob */
.mcl-ts::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: var(--mcl-inset);
	bottom: var(--mcl-inset);
	left: var(--mcl-inset);
	width: calc((100% - 2 * var(--mcl-inset)) / var(--mcl-count));
	border-radius: 999px;
	background: var(--mcl-ink);
	transform: translateX(calc(100% * var(--mcl-index)));
	transition: transform .35s cubic-bezier(.65, 0, .35, 1);
}

.mcl-ts:not(.is-ready)::before {
	transition: none;
}

.mcl-ts .mcl-ts__btn {
	appearance: none;
	background: none;
	border: 0;
	border-radius: 999px;
	box-shadow: none;
	margin: 0;
	padding: .55em .85em;
	min-width: 2.6em;
	min-height: 0;
	font: inherit;
	letter-spacing: inherit;
	text-transform: uppercase;
	color: var(--mcl-ink);
	cursor: pointer;
	transition: color .35s cubic-bezier(.65, 0, .35, 1), opacity .2s;
}

.mcl-ts .mcl-ts__btn.is-active {
	color: var(--mcl-paper);
	cursor: default;
}

.mcl-ts .mcl-ts__btn:not(.is-active):hover {
	opacity: .6;
}

.mcl-ts .mcl-ts__btn:focus-visible {
	outline: 1px solid var(--mcl-ink);
	outline-offset: 3px;
}

/* Placements */
.mcl-ts--cart {
	margin: 0 .9em;
}

.mcl-ts-item {
	display: flex;
	align-items: center;
	list-style: none;
}

.mcl-ts--menu-item {
	margin-left: .75em;
}

.mcl-ts--floating {
	position: fixed;
	z-index: 99990;
	bottom: 20px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}

.mcl-ts--bottom-right {
	right: 20px;
}

.mcl-ts--bottom-left {
	left: 20px;
}

.mcl-ts--menu {
	display: inline-grid;
	margin: 1.5rem auto 0;
	font-size: .9rem;
}

.wp-block-navigation__responsive-container-content .mcl-ts--menu {
	align-self: center;
	margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
	.mcl-ts::before,
	.mcl-ts .mcl-ts__btn {
		transition: none;
	}
}

/* Hide Google's own toolbar, tooltips and highlight so only the switch shows */
iframe.skiptranslate,
.goog-te-banner-frame,
.goog-te-balloon-frame,
#goog-gt-tt,
.VIpgJd-ZVi9od-ORHb-OEVmcd,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf {
	display: none !important;
}

body {
	top: 0 !important;
}

font.goog-text-highlight,
.VIpgJd-yAWNEb-VIpgJd-fmcmS-sn54Q {
	background: none !important;
	box-shadow: none !important;
}
