.unyt-toggle-switch {
	--_ts-size: var(--toggle-switch-size, 40px);
	--_ts-border-primary: var(--border-primary, var(--unyt-border-primary));
	--_ts-text-primary: var(--toggle-switch-text-primary, var(--accent));
	--_ts-bg-primary: var(--toggle-switch-bg-primary, var(--unyt-bg-primary));
	--_ts-bg-secondary: var(--toggle-switch-bg-secondary, var(--unyt-button-primary));
	* {
		user-select: none;
	}
	display: flex;
	align-items: center;
	&>.label {
		margin-right: 6px;
	}
	&>.toggle-switch {
		width: fit-content;
		position: relative;
		display: inline-block;
		width: var(--_ts-size);
		height: calc(var(--_ts-size) / 1.8);
		.slider {
			width: var(--_ts-size);
			height: calc(var(--_ts-size) / 1.8);
		}
		input {
			opacity: 0;
			width: 0;
			height: 0;
			&:checked + .slider {
				background-color:var(--_ts-bg-primary);
			}
			&:focus + .slider {
				box-shadow: 0 0 1px var(--_ts-bg-primary);
			}
			&:checked + .slider:before {
				-ms-transform: translateX(calc(50% + 4px));
				transform: translateX(calc(50% + 4px));
			}
		}
		position: relative;
		.slider {
			border: 1px solid var(--_ts-border-primary);
			position: absolute;
			cursor: pointer;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: var(--_ts-bg-primary);
			-webkit-transition: .4s;
			transition: .4s;
			border-radius: var(--_ts-size);
			&:before {
				border-radius: 50%;
				position: absolute;
				content: "";
				height: calc(var(--_ts-size) / 2.5);
				width: calc(var(--_ts-size) / 2.5);
				left: -4px;
				transform: translateX(-50%);
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: var(--_ts-bg-secondary);
				-webkit-transition: .4s;
				transition: .4s;
			}
		}
	}
}