/* The switch - the box around the slider */
.switch {
	position		: relative;
	display			: inline-block;
	width			: 40px;
	height			: 24px;
}

/* Hide default HTML checkbox */
.switch input {
	opacity			: 0;
	width			: 0;
	height			: 0;
}

/* The slider */
.slider {
	position			: absolute;
	cursor				: pointer;
	top					: 0;
	left				: 0;
	right				: 0;
	bottom				: 0;
	background-color	: #ccc;
	-webkit-transition	: 0.1s;
	transition			: 0.1s;
}
.slider:before {
	position			: absolute;
	content				: "";
	height				: 16px;
	width				: 16px;
	left				: 4px;
	bottom				: 4px;
	background-color	: white;
	-webkit-transition	: 0.1s;
	transition			: 0.1s;
}

[data-theme="dark"] .slider {
	background-color	: #333;
}
[data-theme="dark"] .slider:before {
	background-color	: #bbb;
}


input:checked + .slider {
	background-color	: #09B7C1;
}

input:focus + .slider {
	box-shadow			: 0 0 1px #09B7C1;
}

[data-theme="dark"] input:checked + .slider {
	background-color	: #047280;
}
[data-theme="dark"] input:focus + .slider {
	box-shadow			: 0 0 1px #047280;
}

input:checked + .slider:before {
	-webkit-transform	: translateX(1rem);
	-ms-transform		: translateX(1rem);
	transform			: translateX(1rem);
}

/* Rounded sliders */
.slider.round {
	border-radius	: 34px;
}

.slider.round:before {
	border-radius	: 50%;
}