﻿/* LANGUAGE SELECTOR */
.footer .lang-selector-wrapper {
	display: flex;
	margin-top: .9rem;
	gap: 1.5ch;
}

.lang-selector-wrapper .cbr input { display: none; }

.lang-selector-wrapper .cbr label {
	min-height: 0;
	padding: .3rem;
	font-size: .75rem;
	color: var(--theme-color-1, #000);
}
.lang-selector-wrapper label:hover {
	color: var(--theme-color-1, #000);
	transition: all .3s ease-in-out;
}

.lang-selector-wrapper label.selected {
	color: var(--theme-color-1, #000);
	border-bottom: var(--theme-color-1, #000);
	border-radius: 0;
}

/* for the lang inputs, we don't want the box */
.lang-selector-wrapper label:before,
.lang-selector-wrapper label:after { display: none; }


[ type="radio" ]:hover + label { border: 1px solid transparent; }

.lang-selector-wrapper .cbr label:after {
	display: flex;
	content: "";
	top: 50%;
	left: 0;
	width: 100%;
	height: 0%;
	opacity: 1;
	/* transform: scale(1); */
	/* transform-origin: center; */
	transition: all .6s ease-in-out;
	border: 1px solid transparent;
}
.lang-selector-wrapper .cbr label:hover::after {
	top: 0%;
	height: 100%;
	border: 1px solid var(--theme-color-1, #000);
}

.label-input-es { display: none; }



/* override the design fx of checkbox/radio els in form_controls.css */
.lang-selector-wrapper .cbr [ type="radio"] + label:before,
.lang-selector-wrapper .cbr [ type="radio"] + label:after { border-radius: .15rem; }

.lang-selector-wrapper .cbr :checked ~ label:after {
	transform: scale(.999);
	background: unset;
}
