/**
 * @class Ext.slider.Slider
 */

// Private variables
$form-thumb-space: ($form-thumb-size - $form-toggle-size) / 2;

.x-slider,
.x-toggle {
	height: $form-thumb-size;
}

.x-slider.x-item-disabled {
	opacity: .6;
}

.x-thumb {
	height: $form-thumb-size;
	width: $form-thumb-size;
	background: transparent none;
	border: 0;

	// The actual thumb
	&:after {
		@include insertion($form-toggle-size, $form-toggle-size, $form-thumb-space, $form-thumb-space);
		@include box-shadow(0 2px 1px rgba(0, 0, 0, .3));
		@include border-radius($form-toggle-size/2);
		background-color: #fff;
		border: .1em solid #dbdbdb;
	}

	&.x-dragging {
		opacity: 1;
		&:after {
			// @include background-gradient(darken($form-light, 5%));
		}
	}
}

// Create the slider track
.x-slider:before {
	margin: 0 $form-toggle-size/2;
	border-bottom: 0;
	background-color: #b5b5b6;

	@include insertion(auto, $form-slider-size, $form-toggle-size / 2 - $form-slider-size/2 + $form-spacing/2 - $form-thumb-space / 2, 0);
	@include border-radius($form-slider-size/2);
}