@bigfishtv/cockpit/styles/components/switch.less

.switch {
	position: relative;
	display: inline-block;
	width: 50px;
	height: 24px;
	cursor: pointer;
	background: @light-grey;
	border-radius: 12px;
	.transition(background @transition-fast ease-in-out);

	&.on {
		background: @success;

		.switch-toggle {
			left: 28px;
		}
	}

	&.disabled {
		opacity: 0.5;
	}
}

.switch-toggle {
	position: absolute;
	top: 2px;
	left: 2px;
	bottom: 2px;
	.square(20px);
	border-radius: 10px;
	background: @white;
	.transition(left @transition-fast ease-in-out);
}

.switch-error.on {
	background: @error;
}

.switch-warning.on {
	background: @warning;
}

.switch-primary.on {
	background: @primary;
}

.switch-secondary.on {
	background: @secondary;
}

.switch-tertiary.on {
	background: @tertiary;
}