/* ToggleSwitch */
.moon-checkbox.moon-toggle-switch {
	border-radius: (@moon-toggleswitch-height / 2);
	width: @moon-toggleswitch-width;
	height: @moon-toggleswitch-height;
	line-height: @moon-toggleswitch-height;
	background-color: @moon-checkbox-toggle-switch-bg-color;
	font-family: @moon-icon-font-family;
	position: relative;
	text-align: left;
	cursor: default;

	.moon-taparea(@moon-toggleswitch-height);

	.moon-icon {
		visibility: visible;
		background-color: transparent;
		left: 0;
		color: @moon-checkbox-toggle-switch-color;
		width: @moon-toggleswitch-height;
		height: inherit;
		font-size: (@moon-toggleswitch-height * 2);
		line-height: inherit;
		vertical-align: top;	// The TV incorrectly positions the icon too low without this
	}
	&[checked] {
		background-color: @moon-checkbox-toggle-switch-checked-bg-color;

		.moon-icon {
			left: (@moon-toggleswitch-width - @moon-toggleswitch-height);
			color: @moon-checkbox-toggle-switch-checked-color;
		}
	}
	&[disabled] {
		background-color: @moon-checkbox-toggle-switch-bg-color;

		.moon-icon {
			color: @moon-checkbox-toggle-switch-color;
		}
	}
	&.animated {
		-webkit-transition: background-color 0.2s;
		transition: background-color 0.2s;

		.moon-icon {
			-webkit-transition: left 0.2s, color 0.2s;
			transition: left 0.2s, color 0.2s;
		}
	}
}
.moon-toggle-item.spotlight .moon-checkbox.moon-toggle-switch .moon-icon {
	// to override the ghost checkmark opacity rules, since this inherits its style from moon-checkbox
	opacity: 1;
}