.switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 34px;
}

.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.switch span {
	color: transparent;
	user-select: none;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--lavender-1);
	-webkit-transition: .4s;
	transition: .4s;
}

.slider:before {
	position: absolute;
	content: '';
	height: 22px;
	width: 22px;
	left: 8px;
	bottom: 6px;
	background-color: white;
	transition: 0.4s cubic-bezier(0.17,0.84,0.44,1);
}

input:checked + .slider {
	background-color: var(--lavender-1);
}

input:focus + .slider {
	box-shadow: 0 0 1px var(--lavender-1);
}

input:checked + .slider:before {
	transform: translateX(24px);
}

.slider.round {
	border-radius: 34px;
}

.slider.round:before {
	border-radius: 50%;
}







/*LOGIC*/


body:has(#lang-switch:checked) [lang="en"] {
	opacity: 1;
	display: inline-block;
}
body:has(#lang-switch:checked) [lang="es"] {
	opacity: 0;
	display: none;
}

[lang="en"] {
	opacity: 0;
	display: none;
}
[lang="es"] {
	opacity: 1;
	display: inline-block;
}





#lang-switcher {
	user-select: none;
	display: flex;
	align-content: center;
	gap: 10px;
	scale: 0.8;
}

@media (max-width: 1200px) {
	#lang-switcher {
		scale: 0.6;
		margin-right: -35px;
	}

	.flag-mx::after, .flag-us::after {
		display: none !important;
	}
}


.lang-switcher-lang-label {
	font-size: 1.3rem;
	font-weight: bold;
/*	display: inline-block;*/
	margin-top: 2px;
}

.flag-mx::after {
	background: url(../img/flags/mx.svg) 0 0 no-repeat;
}

.flag-us::after {
	background: url(../img/flags/usa.svg) 0 0 no-repeat;
}

.flag-mx::after, .flag-us::after {
	background-size: cover;
	content: '';
	width: 23px;
	height: 23px;
	display: inline-block;
	margin-left: 7px;
	transform: translateY(4px);
}