.edm-toggle{
	appearance:none;
	border:0;
	background:transparent;
	padding:0;
	cursor:pointer;
	line-height:1;
	display:inline-flex;
	align-items:center;
	justify-content:center;
}

.edm-toggle-track{
	position:relative;
	display:block;
	width:84px;
	height:44px;
	border-radius:999px;
	transition:all .25s ease;
	box-sizing:border-box;
}

.edm-toggle-knob{
	position:absolute;
	top:4px;
	left:4px;
	width:36px;
	height:36px;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	transition:all .25s ease;
	box-sizing:border-box;
	overflow:hidden;
}

.edm-icon{
	position:absolute;
	font-size:18px;
	transition:opacity .25s ease, transform .25s ease;
}

.edm-icon-sun{ opacity:0; transform:scale(.6); }
body.dark-mode .edm-icon-sun{ opacity:1; transform:scale(1); }
body.dark-mode .edm-icon-moon{ opacity:0; transform:scale(.6); }

body.dark-mode .edm-toggle-knob{
	left:44px;
}

.edm-toggle.style1 .edm-toggle-track{
	background:#111;
	border:2px solid #111;
}
.edm-toggle.style1 .edm-toggle-knob{
	background:#fff;
	color:#111;
}

.edm-toggle.style2 .edm-toggle-track{
	background:#000;
	border:2px solid #000;
}
.edm-toggle.style2 .edm-toggle-knob{
	background:#fff;
	color:#111;
}
body.dark-mode .edm-toggle.style2 .edm-toggle-track{
	background:#fff;
	border-color:#fff;
}
body.dark-mode .edm-toggle.style2 .edm-toggle-knob{
	background:#000;
	color:#fff;
}

.edm-toggle.style3 .edm-toggle-track{
	background:linear-gradient(90deg,#151515,#3a3a3a);
	border:2px solid #111;
}
.edm-toggle.style3 .edm-toggle-knob{
	background:#f5f5f5;
	color:#111;
	box-shadow:0 2px 8px rgba(0,0,0,.2);
}

.edm-toggle.style4 .edm-toggle-track{
	background:#fff;
	border:2px solid #111;
}
.edm-toggle.style4 .edm-toggle-knob{
	background:#111;
	color:#fff;
}
body.dark-mode .edm-toggle.style4 .edm-toggle-track{
	background:#111;
	border-color:#111;
}
body.dark-mode .edm-toggle.style4 .edm-toggle-knob{
	background:#fff;
	color:#111;
}