.dtpafw-toggle {
	--dtpafw-toggle-width: 4em;
	--dtpafw-toggle-height: 2em;
	--dtpafw-toggle-padding: 0.2em;
	--dtpafw-toggle-button-width: calc(var(--dtpafw-toggle-width) / 2 - var(--dtpafw-toggle-padding));
	--dtpafw-toggle-button-height: calc(var(--dtpafw-toggle-height) - (var(--dtpafw-toggle-padding) * 2));
	--dtpafw-toggle-button-left-position: calc(var(--dtpafw-toggle-width) - var(--dtpafw-toggle-button-width) - var(--dtpafw-toggle-padding));
	--dtpafw-toggle-radius: calc(var(--dtpafw-toggle-height) / 2);
	--dtpafw-toggle-color-off: #ccc;
	--dtpafw-toggle-color-on: #2196f3;
	--dtpafw-toggle-color-button: #fff;
	--dtpafw-toggle-color-focus: color(from var(--dtpafw-toggle-color-on) srgb r g b / 0.6);
	--dtpafw-toggle-transition: 150ms;

	position: relative;
	display: inline-block;
	width: var(--dtpafw-toggle-width);
	height: var(--dtpafw-toggle-height);
}

.dtpafw-toggle input {
	opacity: 0;
	width: 0;
	height: 0;
}

.dtpafw-toggle__slider {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	cursor: pointer;
	border-radius: var(--dtpafw-toggle-radius);
	background-color: var(--dtpafw-toggle-color-off);
	transition-property: background-color;
	transition-duration: var(--dtpafw-toggle-transition);
}

.dtpafw-toggle__slider::before,
.dtpafw-toggle__slider::after {
	position: absolute;
	top: var(--dtpafw-toggle-padding);
	width: var(--dtpafw-toggle-button-width);
	height: var(--dtpafw-toggle-button-height);
	line-height: var(--dtpafw-toggle-button-height);
	text-align: center;
	vertical-align: middle;
}

.dtpafw-toggle__slider::before {
	content: '';
	position: absolute;
	top: var(--dtpafw-toggle-padding);
	left: var(--dtpafw-toggle-padding);
	width: var(--dtpafw-toggle-button-width);
	height: var(--dtpafw-toggle-button-height);
	background-color: var(--dtpafw-toggle-color-button);
	border-radius: var(--dtpafw-toggle-radius);
	transition-property: left;
	transition-duration: var(--dtpafw-toggle-transition);
}

input:checked + .dtpafw-toggle__slider {
	background-color: var(--dtpafw-toggle-color-on);
}

input:focus + .dtpafw-toggle__slider {
	outline: 2px solid var(--dtpafw-toggle-color-focus);
}

input:checked + .dtpafw-toggle__slider::before {
	left: var(--dtpafw-toggle-button-left-position);
}