/**********************************************************************/
/**********************************************************************/
/**********************************************************************/
.switcher {
	display: flex;
	flex-direction: column;
}
.switcher__content {
	display: flex;
	margin: auto 0;
}
.switcher__icon {
	display: flex;
	flex-direction: column;
	width: 22px;
	transition: opacity 0.3s;
}
.switcher.on .switcher__icon_light, .switcher__icon_dark {
	opacity: 0.5;
}
.switcher.on .switcher__icon_dark {
	opacity: 1;
}
.switcher__icon svg {
	margin: auto;
}
body.dark .switcher__icon svg {
	fill: #FFFFFF;
}
.switcher__btn {
	position: relative;
	width: 50px;
	height: 26px;
	margin: auto 8px;
	border: 2px solid #007EFF;
	cursor: pointer;
}
.switcher__btn:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(calc(-50% - 12px), -50%);
	width: 18px;
	height: 18px;
	background-color: #007EFF;
	transition: transform 0.3s;
}
.switcher.on .switcher__btn:before {
	transform: translate(calc(-50% + 12px), -50%);
}


/**********************************************************************/
/**********************************************************************/
@media screen and (max-width: 767px) {
	.switcher__content {
		margin: 0 auto;
	}
}