ColorSaturationValueControl
{
	width: 240px;
	height: 240px;
	background-color: red;
	position: relative;
	border-radius: 4px;
	cursor: pointer;
	border: 1px solid #333;

	&:hover
	{
		border: 1px solid #08f;
	}

	&:active
	{
		border: 1px solid #fff;
	}

	.handle
	{
		width: 16px;
		height: 16px;
		border-radius: 100px;
		border: 2px solid #444;
		position: absolute;
		background-color: white;
		box-shadow: 2px 2px 16px #000a;
		transform: translateX( -50% ) translateY( -50% );
		pointer-events: none;
		z-index: 100;
		z-index: 100;
	}

	.gradient
	{
		position: absolute;
		width: 100%;
		height: 100%;
		border-radius: 4px;
		background: linear-gradient( to right, white, rgba( 255, 255, 255, 0 ) );

		&:after
		{
			content: "";
			position: absolute;
			width: 100%;
			height: 100%;
			border-radius: 4px;
			background: linear-gradient( to top, black, rgba( 0, 0, 0, 0 ) );
		}
	}
}