.zeero-switch .zeero-switch-label {
	width: 100%;
	cursor: pointer;
	position: relative;
	display: flex;
	justify-content: space-between;
	font-size: 0.8em;
	align-items: center;
}

.zeero-switch input {
	opacity: 0;
	width: 0;
	height: 0;
	position: absolute;
	right: 0;
}

.zeero-switch .zeero-switch-slider {
	--size: 2.2em;
	width: calc(var(--size) / 1.2);
	height: calc(var(--size) / 2.5);
	position: absolute;
	cursor: pointer;
	border-radius: 0.6em;
	right: 0;
	transition: 0.3s;
	border: 1px solid var(--text-color);
	opacity: 0.6;
}

.zeero-switch:hover .zeero-switch-slider {
	opacity: 1;
}

.zeero-switch .zeero-switch-slider:before {
	position: absolute;
	content: "";
	height: calc(var(--size) / 6);
	width: calc(var(--size) / 6);
	left: 0.35em;
	top: 50%;
	transform: translateY(-50%);
	background-color: var(--text-color);
	border-radius: 0.4em;
	transition: 0.3s;
}

.zeero-switch input:checked + .zeero-switch-slider {
	background-color: var(--primary);
	border: 1px solid transparent;
	opacity: 1;
}

.zeero-switch input:checked + .zeero-switch-slider:before {
	background-color: var(--primary-darker);
	transform: translateX(calc(var(--size) / 2.5)) translateY(-50%);
}

.zeero-switch.disabled .zeero-switch-label,
.zeero-switch.disabled .zeero-switch-slider {
	cursor: default;
}

.zeero-switch.disabled .zeero-switch-text {
	color: var(--disabled);
}

.zeero-switch.disabled .zeero-switch-slider {
	border: 1px solid var(--disabled);
	background-color: 1px solid var(--dark-grey);
	opacity: 1;
}

.zeero-switch.disabled .zeero-switch-slider:before {
	background-color: var(--disabled);
}

.zeero-switch.disabled input:checked + .zeero-switch-slider {
	background-color: var(--disabled);
}

.zeero-switch.disabled input:checked + .zeero-switch-slider:before {
	background-color: var(--dark-grey);
}