
.kodo-settings-panel-language-selector{
	display: block;
	margin: 1rem;
	margin-top: 0.5rem;
	padding: 0;
}

.kodo-settings-panel-language-selector fieldset{
	margin: 0;
	padding: 0;
}

.kodo-settings-panel koi-form-field-single-choice.kodo-auth-language-selector
{
	position: relative;
	display: block;
	z-index: 30;
	animation: kodoLangFadeIn 0.3s ease;
}

.kodo-settings-panel koi-form-field-single-choice.kodo-auth-language-selector .form-floating
{
	position: relative;
}

.kodo-settings-panel koi-form-field-single-choice.kodo-auth-language-selector .form-select
{
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;

	width: 100%;
	background: #ffffff;

	border: 1px solid transparent;
	border-radius: 16px;

	padding: 16px 44px 16px 48px;

	font-size: 16px;
	font-weight: 500;
	color: #374151;

	outline: none;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05);

	transition:
		border-color .2s,
		box-shadow .2s,
		background-color .2s;
}

.kodo-settings-panel koi-form-field-single-choice.kodo-auth-language-selector .form-select:focus
{
	border-color: #fdba74;
	box-shadow: 0 0 0 4px rgba(253,186,116,0.25);
}

.kodo-settings-panel koi-form-field-single-choice.kodo-auth-language-selector .form-floating::after
{
	content: "";

	position: absolute;
	right: 16px;
	top: 50%;

	width: 10px;
	height: 10px;

	border-right: 2px solid #9ca3af;
	border-bottom: 2px solid #9ca3af;

	transform: translateY(-60%) rotate(45deg);
	pointer-events: none;

	transition: transform .2s;
}

.kodo-settings-panel koi-form-field-single-choice.kodo-auth-language-selector .form-floating::before
{
	content: "";

	position: absolute;
	left: 16px;
	top: 50%;

	width: 20px;
	height: 20px;

	transform: translateY(-50%);
	pointer-events: none;

	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;

	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E");
}

.kodo-settings-panel koi-form-field-single-choice.kodo-auth-language-selector .form-label
{
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

.kodo-settings-panel koi-form-field-single-choice.kodo-auth-language-selector .form-select.is-invalid
{
	border-color: #ef4444;
}

.kodo-settings-panel koi-form-field-single-choice.kodo-auth-language-selector .invalid-feedback
{
	font-size: 13px;
	margin-top: 6px;
	color: #ef4444;
}

@keyframes kodoLangFadeIn
{
	from
	{
		opacity: 0;
		transform: translateY(-12px);
	}

	to
	{
		opacity: 1;
		transform: translateY(0);
	}
}

.kodo-settings-panel 
koi-form-field-single-choice.kodo-auth-language-selector 
.form-floating::after
{
	transform: translateY(-60%) rotate(45deg);
	transition: transform .2s ease;
}

.kodo-settings-panel 
koi-form-field-single-choice.kodo-auth-language-selector 
.form-select:focus + label,
.kodo-settings-panel 
koi-form-field-single-choice.kodo-auth-language-selector 
.form-floating:focus-within::after
{
	transform: translateY(-60%) rotate(-135deg);
}
