.checkbox-ios {

	display: flex;
	align-items: center;
	gap: 10px;

	user-select: none;

}

.checkbox-ios .checkbox-ios-switch {

	position: relative;

	display: inline-block;

	box-sizing: border-box;

	min-width: 56px;

	height: 28px;

	border: 1px solid rgba(0, 0, 0, .1);

	border-radius: 25%/50%;

	vertical-align: top;

	background: #eeeeee29;

	transition: .2s;

}

.checkbox-ios .checkbox-ios-switch:before {

	content: '';

	position: absolute;

	top: 1px;

	left: 1px;

	display: inline-block;

	width: 24px;

	height: 24px;

	border-radius: 50%;

	background: white;

	box-shadow: 0 3px 5px rgba(0, 0, 0, .3);

	transition: .15s;

}

.checkbox-ios input[type=checkbox], .checkbox-ios input[type=radio] {

	display: block;

	width: 0;

	height: 0;

	position: absolute;

	z-index: -1;

	opacity: 0;

}
/* Состояние нажатия (активности) */
.checkbox-ios input[type=checkbox]:not(:disabled):active + .checkbox-ios-switch:before,
.checkbox-ios input[type=radio]:not(:disabled):active + .checkbox-ios-switch:before {
	box-shadow: inset 0 0 2px rgba(0, 0, 0, .3);
}

/* Фон при выборе */
.checkbox-ios input[type=checkbox]:checked + .checkbox-ios-switch,
.checkbox-ios input[type=radio]:checked + .checkbox-ios-switch {
	background: #598ff5ad;
}

/* Смещение ползунка (анимация) */
.checkbox-ios input[type=checkbox]:checked + .checkbox-ios-switch:before,
.checkbox-ios input[type=radio]:checked + .checkbox-ios-switch:before {
	transform: translateX(28px);
}

/* Hover (курсор) */
.checkbox-ios input[type="checkbox"]:not(:disabled) + .checkbox-ios-switch,
.checkbox-ios input[type="radio"]:not(:disabled) + .checkbox-ios-switch {
	cursor: pointer;
	border-color: rgba(0, 0, 0, .3);
}

/* Disabled (заблокировано) */
.checkbox-ios input[type=checkbox]:disabled + .checkbox-ios-switch,
.checkbox-ios input[type=radio]:disabled + .checkbox-ios-switch {
	filter: grayscale(70%);
	border-color: rgba(0, 0, 0, .1);
}

.checkbox-ios input[type=checkbox]:disabled + .checkbox-ios-switch:before,
.checkbox-ios input[type=radio]:disabled + .checkbox-ios-switch:before {
	background: #eee;
}




/* Focus */

.checkbox-ios.focused .checkbox-ios-switch:before {

	box-shadow: inset 0px 0px 4px #ff5623;

}