$primary: red !default;
$primary-alt: white !default;

$switch-padding: 6px !default;
.slider
{
	flex-grow: 1;
	cursor: pointer;
	min-height: $form-control-height;
	align-items: center;
	padding-right: $form-control-height;

	> .thumb
	{
		background-color: $primary;
		position: absolute;
		width: $form-control-height;
		height: $form-control-height;
		border-radius: 1000px;
		box-shadow: 2px 2px 10px black;
		transition: all 0.2s ease-out;

		&:hover
		{
			background-color: $primary-alt;
		}
	}

	&:active
	{
		> .thumb
		{
			background-color: $primary-alt;
		}
	}

	> .track
	{
		position: absolute;
		left: 10px;
		right: 10px;
		height: 10px;
		background-color: rgba( $primary, 0.1 );
		border-radius: 5px;

		> .inner
		{
			border-radius: 4px;
			background-color: $primary;
			width: 200px;
			height: 10px;
			transition: all 0.2s ease-out;
		}
	}
}


.sliderentry
{
	> .slider
	{
		flex-grow: 1;
		flex-shrink: 0;
	}

	> .textentry:not( .one.two )
	{
		flex-grow: 0;
		flex-shrink: 0;
		width: 60px;
		min-width: 60px;
		max-width: 60px;
		white-space: nowrap;
		overflow: hidden;
		margin-left: 10px;
		border-color: transparent;
		text-align: center;
		background-color: rgba( black, 0.5 );
		color: $primary-alt;
	}
}

.slider2d
{
	flex-grow: 1;
	cursor: pointer;
	min-height: $form-control-height;
	align-items: center;
	padding-right: $form-control-height;
	height: 200px;
	background-color: red;

	> .thumb
	{
		position: absolute;
		width: 12px;
		height: 12px;
		border-radius: 1000px;
		transition: all 0.2s ease-out;
		transform: translateX( -50% ) translateY( -50% );
		border: 2px solid rgba( white, 1 );

		&:hover
		{
		}
	}

	&:active
	{
		> .thumb
		{
			width: 40px;
			height: 40px;
		}
	}
}