@import '../../style/variables.less';

@Switch-height: 28px;
@Switch-width: 50px;
@Switch-animation-timing: 0.1s linear;
@Switch-selected-transform: translate(22px, 0);

@Switch-container-height: 22px;
@Switch-container-offset: 3px;
@Switch-container-width: 44px;

@Switch-glow-offset: 5px;
@Switch-glow-radius: 9px;
@Switch-glow-scale: scale(1.556);

@Switch-handle-offset: 6px;
@Switch-handle-radius: 8px;
@Switch-handle-scale: scale(1.125);

.switch {
	cursor: pointer;
	display: inline-block;
	height: @Switch-height;
	position: relative;
	user-select: none;
	width: @Switch-width;

	.isDisabled {
		cursor: not-allowed;
	}

	.native {
		opacity: 0;
	}

	.visualizationContainer {
		background-color: @color-border;
		border-radius: @Switch-container-height / 2;
		height: @Switch-container-height;
		left: @Switch-container-offset;
		position: absolute;
		top: @Switch-container-offset;
		transition: @Switch-animation-timing;
		width: @Switch-container-width;
	}

	.visualizationGlow {
		background-color: @color-primary;
		border-radius: @Switch-glow-radius;
		height: @Switch-glow-radius * 2;
		left: @Switch-glow-offset;
		opacity: 0;
		position: absolute;
		top: @Switch-glow-offset;
		transition: @Switch-animation-timing;
		width: @Switch-glow-radius * 2;
	}

	.visualizationHandle {
		background-color: white;
		border-radius: @Switch-handle-radius;
		height: @Switch-handle-radius * 2;
		left: @Switch-handle-offset;
		position: absolute;
		top: @Switch-handle-offset;
		transition: @Switch-animation-timing;
		width: @Switch-handle-radius * 2;
	}

	&:hover .visualizationGlow {
		opacity: 0.3;
		transform: @Switch-glow-scale;
	}

	&:hover .visualizationHandle {
		transform: @Switch-handle-scale;
	}


	&.isSelected .visualizationContainer {
		background-color: @color-primary;
	}

	&.isSelected .visualizationGlow {
		transform: @Switch-selected-transform;
	}

	&.isSelected .visualizationHandle {
		transform: @Switch-selected-transform;
	}

	&.isSelected:hover .visualizationGlow {
		transform: @Switch-selected-transform @Switch-glow-scale;
	}

	&.isSelected:hover .visualizationHandle {
		transform: @Switch-selected-transform @Switch-handle-scale;
	}
}