.w-color-switch {
	line-height: 1.4;
	width: fit-content;
	}
	.w-color-switch > label {
		display: flex;
		align-items: center;
		}
		.w-color-switch-box {
			flex-shrink: 0;
			position: relative;
			width: 2.8em;
			height: 1.6em;
			border-radius: 9em;
			background: var(--color-inactive-switch-bg, #ddd);
			transition: background .2s;
			}
		.w-color-switch input:checked ~ .w-color-switch-box {
			background: var(--color-active-switch-bg, #222);
			}
			.w-color-switch-box > i {
				position: absolute;
				top: .3em;
				inset-inline-start: .3em;
				height: 1em;
				width: 1em;
				border-radius: 50%;
				background-color: #fff;
				transition: inset-inline-start .2s;
				}
			.w-color-switch input:checked ~ .w-color-switch-box > i {
				inset-inline-start: 1.5em;
				}
		.w-color-switch-before:not(:empty) {
			margin-inline-end: .6em;
			}
		.w-color-switch-after:not(:empty) {
			margin-inline-start: .6em;
			}
		.w-color-switch-after,
		.w-color-switch input:checked ~ .w-color-switch-before {
			opacity: .65;
			}
		.w-color-switch input:checked ~ .w-color-switch-after {
			opacity: 1;
			}