.toogle {
	background: var(--line-strong);
	border-radius: 1rem;
	cursor: pointer;
	display: inline-block;
	flex-shrink: 0;
	height: 1.5rem;
	position: relative;
	transition: background .15s ease;
	width: 2.75rem;

	&::before {
		background: var(--toggle-knob);
		border-radius: 50%;
		box-shadow: 0 1px 2px rgba(24, 33, 47, 0.25);
		content: "";
		height: 1.25rem;
		left: .125rem;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		transition: left .15s ease;
		width: 1.25rem;
	}

	&.active {
		background: var(--accent);
	}

	&.active::before {
		left: 1.375rem;
	}
}