.x-toggle {
	border: 1px solid $dark-toggle-border-color;
	background-color: $dark-toggle-background-color;
	@include box-shadow(inset 3px 5px 7px -4px black);

	.x-thumb {
		&:after {
			@include background($dark-toggle-thumb-off-background);
			@include box-shadow(inset 0 -3px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(#fff, .2));
		}

		&:before {
			background: transparent;
			color: $dark-toggle-thumb-color;
		}
	}
}

.x-toggle-on {
	.x-thumb {
		&:after {
			@include background($dark-toggle-thumb-on-background);
		}
	}
}