/* =============================================
   02_UI_COMPONENTS / ui-checkbox
   Кастомный чекбокс.
   Варианты: --white
   ============================================= */

.checkbox {
	display: inline-block;
	position: relative;
}
.checkbox:has(input:disabled) {
	pointer-events: none;
}
.checkbox:has(input:disabled) .checkbox__text {
	color: var(--greenColor5);
}
.checkbox:has(input:disabled) .checkbox__text::before {
	border-color: var(--greenColor5);
}
.checkbox:has(input:disabled) .checkbox__input:checked + .checkbox__text:before {
	background: url("../../assets/img/check-w.svg") center/18px 18px no-repeat var(--greenColor5);
}
.checkbox.--form-error .checkbox__text::before {
	content: "";
	border-color: rgba(254, 81, 81, 0.4);
}
.checkbox__input {
	position: absolute;
	width: 0;
	height: 0;
	opacity: 0;
}
.checkbox__input:focus-visible + .checkbox__text {
	outline: 1px solid #000;
}
.checkbox__input:checked + .checkbox__text:before {
	background: url("../../assets/img/check-w.svg") center/18px 18px no-repeat var(--greenColor4);
}
.checkbox--white .checkbox__input:checked + .checkbox__text:before {
	background: url("../../assets/img/check.svg") center/18px 18px no-repeat var(--whiteColor);
}
.checkbox__text {
	cursor: pointer;
	position: relative;
	gap: 10px;
	display: inline-flex;
	align-items: center;
	font-size: 14px;
	line-height: 121.428571%;
}
.checkbox--white .checkbox__text {
	color: var(--whiteColor);
}
.checkbox__text:before {
	content: "";
	border-radius: 4px;
	align-self: flex-start;
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin: 3px;
	border: 1px solid var(--greenColor4);
	background-color: var(--whiteColor);
}
.checkbox--white .checkbox__text:before {
	border-color: var(--whiteColor);
}
.checkbox__text a {
	text-decoration: underline;
	display: inline;
}

/* ── Hover ── */

@media (any-hover: hover), (pointer: fine) {
	html:not([data-fls-touch]) .checkbox__text a:hover {
		text-decoration: none;
	}
}