@import (reference) '../../styles/variables.less';
@import (reference) '../../styles/mixins.less';

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

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

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

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

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

	&-is-disabled {
		cursor: not-allowed;
	}

	&-native {
		opacity: 0;
	}

	&-visualization-container {
		.box-sizing();

		background-color: @color-borderColor;
		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;
	}

	&-visualization-glow {
		.box-sizing();

		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;
	}

	&-visualization-handle {
		.box-sizing();

		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 &-visualization-glow {
		opacity: 0.3;
		transform: @Switch-glow-scale;
	}

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

	&-is-disabled:hover &-visualization-glow {
		opacity: 0;
		transform: none;
	}

	&-is-disabled:hover &-visualization-handle {
		transform: none;
	}

	&-is-disabled &-visualization-container {
		opacity: 0.3;
	}

	&-is-disabled&-is-selected:hover &-visualization-handle {
		transform: @Switch-selected-transform scale(1);
	}

	&-is-selected &-visualization-container {
		background-color: @color-primary;
	}

	&-is-selected &-visualization-glow {
		transform: @Switch-selected-transform;
	}

	&-is-selected &-visualization-handle {
		transform: @Switch-selected-transform;
	}

	&-is-selected &-native:focus ~ &-visualization-glow {
		transform: @Switch-selected-transform @Switch-glow-scale;
	}

	&-is-selected &-native:focus ~ &-visualization-handle {
		transform: @Switch-selected-transform @Switch-handle-scale;
	}

	&-is-selected:hover &-visualization-glow {
		transform: @Switch-selected-transform @Switch-glow-scale;
	}

	&-is-selected:hover &-visualization-handle {
		transform: @Switch-selected-transform @Switch-handle-scale;
	}

	&-native:focus ~ &-visualization-glow {
		opacity: 0.3;
		transform: @Switch-glow-scale;
	}

	&-native:focus ~ &-visualization-handle {
		transform: @Switch-handle-scale;
	}
}