:root
{
	--sz: 14px;
	--tr: all 0.25s ease 0s;
}

#language_toggle
{
	position: relative;
	width: calc(var(--sz) * 4);
	height: calc(var(--sz) * 2);
	display: flex;
	align-items: center;
	justify-content: center;
}

#language_toggle input
{
	display: none;
}

#language_toggle label[for=btn]
{
	position: absolute;
	width: calc(var(--sz) * 4);
	height: calc(var(--sz) * 2);
	background-color: rgba(0,0,0,0.2);
	border-radius: var(--sz);
	padding: calc(var(--sz) / 5);
}

#language_toggle label[for=btn]:after
{
	content: "";
	position: absolute;
	width: calc(100% - calc(calc(var(--sz) / 5) * 12));
	height: calc(100% - calc(calc(var(--sz) / 5) * 2));
	border-radius: var(--sz);
	z-index: 0;
	opacity: 0;
	transition: var(--tr);
}

#language_toggle #btn:checked+label[for=btn]:after
{
	opacity: 1;
	width: calc(100% - calc(calc(var(--sz) / 5) * 4));
}


#language_toggle .track
{
	position: absolute;
	width: calc(calc(var(--sz) * 4) - calc(var(--sz) / 2.5));
	height: calc(calc(var(--sz) * 2) - calc(var(--sz) / 2.5));
	border-radius: var(--sz);
	overflow: hidden;
}

#language_toggle .track:before
{
	content: "";
	position: absolute;
	width: calc(200% - calc(calc(var(--sz) * 2) - calc(var(--sz) / 3)));
	height: 100%;
	left: -50%;
	transition: var(--tr);
}

#language_toggle .track:after
{
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: var(--sz);
}

#language_toggle #btn:checked+label .track:before
{
	left: 0%;
}

#language_toggle .thumb
{
	position: absolute;
	width: calc(calc(var(--sz) * 2) - calc(var(--sz) / 3));
	height: calc(calc(var(--sz) * 2) - calc(var(--sz) / 3));
	top: calc(calc(var(--sz) / 10) + calc(var(--sz) / 15));
	left: calc(calc(var(--sz) / 10) + calc(var(--sz) / 15));
	background-image: url("../img/flag_ARG.png");
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: var(--sz);
	cursor: pointer;
	font-size: calc(var(--sz) / 2);
	display: flex;
	align-items: center;
	justify-content: center;
	text-indent: calc(var(--sz) * -0.025);
	color: #7d7c7c;
	z-index: 1;
}

#language_toggle #btn:checked+label .thumb
{
	left: calc(calc(100% - calc(calc(var(--sz) * 2) - calc(var(--sz) / 3))) - calc(calc(var(--sz) / 10) + calc(var(--sz) / 15)));
	background-image: url("../img/flag_USA.png");
}

#language_toggle .txt:before,
#language_toggle .txt:after
{
	content: "";
	position: absolute;
	left: calc(var(--sz) / 2);
	top: 25%;
	content: "";
	transition: var(--tr);
	font-size: calc(var(--sz) / 1.5);
	color: #000;
	opacity: 0.4;
}

#language_toggle .txt:after
{
	content: "";
	left: calc(100% - calc(var(--sz) / 0.625));
}