.elgg-input-checkbox-switch {
	--switch-distance: 50;
	--switch-width: 20;

	text-align:center;
	background: var(--elgg-background-color-mild);
	box-shadow: inset 0 0.1em 0 rgba(0, 0, 0, 0.2);
	width: calc(var(--switch-distance) * 1px);
	display: inline-block;
	height: calc(var(--switch-width) * 1px);
	position: relative;
	overflow: hidden;
	border-radius: 4px;
	cursor: pointer;
	vertical-align: text-bottom;
	margin-right: 4px;

	> span {
		border-radius: 4px;
		transition:
			left .3s ease,
			background .2s ease;
		background: var(--elgg-input-switch-unchecked-background-color);
		display: block;
		position: absolute;
		top:0;
		left: 0;
		width: calc(var(--switch-width) * 1px);
		height: 100%;
		border: 1px solid transparent;

		&:before {
			content: "\d7";
			display: block;
			color: white;
			will-change: content;
			transition: content .2s ease;
			line-height: calc(var(--switch-width) * 1px);
			text-align: center;
			font-size: 12px;
			text-transform: uppercase;
		}
	}

	.elgg-input-checkbox {
		width: 1px;
		height: 1px;
		&:focus {
			outline: none;

			+ span {
				outline: 1px solid black;
			}
		}

		&:checked + span {
			background: var(--elgg-input-switch-checked-background-color);
			left: calc((var(--switch-distance) - var(--switch-width)) * 1px);

			&:before {
				content: "✓";
			}
		}

		&:disabled + span {
			cursor: not-allowed;
			background: var(--elgg-input-switch-disabled-background-color);
		}
	}
}

.elgg-field-disabled {
	.elgg-input-checkbox-switch {
		cursor: not-allowed;
	}
}

.elgg-input-single-checkbox label + .elgg-field-label {
	display: inline-block;
}
