$form-toggle-thumb-width: 34px;
$form-toggle-thumb-height: 29px;

.x-toggle {
	width: $form-toggle-thumb-width * 2;
	height: $form-toggle-thumb-height;
	border-radius: 1em;
	padding: 1px;

	.x-thumb {
		width: $form-toggle-thumb-width;
		height: $form-toggle-thumb-height - 3;
		border-right: 2px solid transparent;

		&.x-dragging {
			opacity: 1;
		}

		&:after {
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			border: 0;
		}

		&:before {
			@include absolute-fit;
			content: 'O';
			text-align: center;
			z-index: 1;
			line-height: 1.8em;
			font-size: .9em;
		}
	}
}

.x-toggle-on {
	.x-thumb {
		&:before {
			content: '|';
			font-size: .8em;
			line-height: 1.7em;
		}
	}
}