/* TOGGLE STYLE */

lang-switcher {
	position: relative;
	display: flex;
	gap: 24px;
	align-items: center;
	justify-content: space-between;
	transform: scale(calc(100% * var(--font-scale)));
	z-index: 1;
}

@media screen and (max-width: 480px) {
	lang-switcher {
		transform: translateX(10%) scale(var(--font-scale));
	}
}

lang-switcher .switcher-toggle {
	position: relative;
	height: 20px;
	width: 48px;
}

lang-switcher input[type="checkbox"] {
	position: absolute;
	padding: 0;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;

	-webkit-appearance: none;
	appearance: none;
	height: 100%;
	width: 100%;

	background-color: #FFFFFF;
	border-radius: 50px;
	cursor: pointer;
	outline: none;

	transition: 0.3s;
}

lang-switcher.acrylic:not([type="button"]) input[type="checkbox"] {
	background-color: var(--en-blue-acrylic);
}

:lang(eo) lang-switcher.acrylic:not([type="button"]) input[type="checkbox"] {
	background-color: var(--eo-green-acrylic);
}

lang-switcher input[type="checkbox"]::before {
	content: "";
	position: absolute;
	height: 100%;
	aspect-ratio: 1;
	top: 0;
	bottom: 0;
	left: 0;

	background-color: var(--en-blue);
	border-radius: 50%;

	transition: 0.3s;
}

:lang(eo) lang-switcher input[type="checkbox"]::before {
	background-color: var(--eo-green);
	left: calc(100% - 20px);
}

.flag {
	height: 32px;
}

/* BUTTON STYLE */

lang-switcher[type="button"],
:lang(eo) lang-switcher[type="button"] {
	background: none;
	margin-top: 10px;
	margin-right: 10px;
	padding: 0;
}

lang-switcher[type="button"] .flag,
lang-switcher[type="button"] input::before {
	display: none;
}

lang-switcher[type="button"] input {
	display: grid;
	justify-content: center;
	width: 60px;
	height: 60px;
	line-height: 60px;
	border-radius: 50%;
	background-color: var(--en-blue);

	transition: 300ms ease;
}

:lang(eo) lang-switcher[type="button"] input {
	background-color: var(--eo-green);
}

lang-switcher[type="button"] input::after {
	color: #FFFFFF;
	content: "EN";
	font-size: 18px;
	font-family: Lexend, sans-serif;
	font-weight: bold;

	transition: 300ms ease;
}

:lang(eo) lang-switcher[type="button"] input::after {
	content: "EO";

	transform: rotate(360deg);
}

html[lang|="en"] :lang(eo) {
	display: none;
}

html:lang(eo) [lang|="en"] {
	display: none;
}