/* ------------------------------------------------------------------------------
 *
 *  # jQuery UI Sliders
 *
 *  Separate styles for jQuery UI library. Slider component
 *
 *  Version: 1.0
 *  Latest update: May 25, 2015
 *
 * ---------------------------------------------------------------------------- */


// Core
// ----------------------------------------

.ui-slider {
	position: relative;
	text-align: left;
	background-color: @gray-lighter;
	border-radius: 100px;
	.box-shadow(inset 0 1px 1px fade(#000, 10%));

	// Handle
	.ui-slider-handle {
		position: absolute;
		z-index: 2;
		width: (@slider-base-size * 3);
		height: (@slider-base-size * 3);
		cursor: pointer;
		border-radius: 50%;
		background-color: #fcfcfc;
		border: 1px solid #bbb;

		// Hover color
		&.ui-state-hover,
		&.ui-state-focus {
			outline: 0;
			background-color: #f5f5f5;
		}

		// Active color
		&.ui-state-active {
			border-color: #ddd;

			&:after {
				background-color: #999;
			}
		}

		// Inner circle
		&:after {
		    content: '';
		    display: inline-block;
		    width: @slider-base-size;
		    height: @slider-base-size;
		    position: absolute;
		    top: 50%;
		    left: 50%;
		    margin-top: -(@slider-base-size / 2);
		    margin-left: -(@slider-base-size / 2);
		    background-color: @color-grey-600;
		    border-radius: 50%;
		}
	}

	// Range
	.ui-slider-range {
		position: absolute;
		z-index: 1;
		display: block;
		border: 0;
		background-color: @gray-light;
		border-radius: 100px;
	}
}


// Orientations
// ----------------------------------------

// Horizontal
.ui-slider-horizontal {
	height: @slider-base-size;

	// Handle
	.ui-slider-handle {
	    top: -(@slider-base-size * 1.5) + (@slider-base-size / 2);
	    margin-left: -(@slider-base-size * 1.5);
	}

	// Ranges
	.ui-slider-range {
		top: 0;
		height: 100%;
	}
	.ui-slider-range-min {
		left: 0;
	}
	.ui-slider-range-max {
		right: 0;
	}
}

// Vertical
.ui-slider-vertical {
	width: @slider-base-size;
	height: 140px;
	display: inline-block;

	// Handle
	.ui-slider-handle {
	    left: -(@slider-base-size * 1.5) + (@slider-base-size / 2);
		margin-bottom: -(@slider-base-size * 1.5);
	}

	// Ranges
	.ui-slider-range {
		left: 0;
		width: 100%;
	}
	.ui-slider-range-min {
		bottom: 0;
	}
	.ui-slider-range-max {
		top: 0;
	}
}
.ui-slider-vertical-default,
.ui-slider-vertical-range-min,
.ui-slider-vertical-range-max {
	> span {
		margin: 0 10px;
	}
}
.ui-slider-vertical-pips,
.ui-slider-vertical-labels,
.ui-slider-vertical-minmax {
	> span {
		margin: 5px 15px;
	}
}


// Handles
// ----------------------------------------

// Slider with solid handle
.ui-slider-solid {
	.ui-slider-handle {
		background-color: @gray-light;
		border-color: @gray-light;
		.box-shadow(none);

		&:after {
			background-color: #fff;
			.transition(opacity ease-in-out 0.2s);
		}

		&.ui-state-hover:after,
		&.ui-state-active:after {
			background-color: #fff;
			.opacity(0.75);
		}
	}
}

// White handle
.ui-handle-mark.ui-handle-white .ui-slider-handle:after {
	content: none;
}


// Sizing
// ----------------------------------------

// Large
.ui-slider-lg {

	// Handle
	.ui-slider-handle {
	    width: (@slider-large-size * 3);
	    height: (@slider-large-size * 3);

	    // Inner circle
	    &:after {
	      width: @slider-large-size;
	      height: @slider-large-size;
	      margin-top: -(@slider-large-size / 2);
	      margin-left: -(@slider-large-size / 2);
	    }
	}

	// In horizontal orientation
	&.ui-slider-horizontal {
		height: @slider-large-size;

		.ui-slider-handle {
		    top: -(@slider-large-size * 1.5) + (@slider-large-size / 2);
		    margin-left: -(@slider-large-size * 1.5);
		}
	}

	// In vertical orientation
	&.ui-slider-vertical {
		width: @slider-large-size;

		.ui-slider-handle {
		    left: -(@slider-large-size * 1.5) + (@slider-large-size / 2);
		    margin-bottom: -(@slider-large-size * 1.5);
		}
	}
}


// Small and mini have the same handle size
.ui-slider-sm,
.ui-slider-xs {
	.ui-slider-handle {
	    width: (@slider-small-size * 3);
	    height: (@slider-small-size * 3);

	    // Inner circle
	    &:after {
	      width: @slider-small-size;
	      height: @slider-small-size;
	      margin-top: -(@slider-small-size / 2);
	      margin-left: -(@slider-small-size / 2);
	    }
	}
}

// Small
.ui-slider-sm {

	// In horizontal orientation
	&.ui-slider-horizontal {
		height: @slider-small-size;

		.ui-slider-handle {
		    top: -(@slider-small-size * 1.5) + (@slider-small-size / 2);
		    margin-left: -(@slider-small-size * 1.5);
	  }
	}

	// In vertical orientation
	&.ui-slider-vertical {
		width: @slider-small-size;

		.ui-slider-handle {
		    left: -(@slider-small-size * 1.5) + (@slider-small-size / 2);
		    margin-bottom: -(@slider-small-size * 1.5);
		}
	}
}

// Mini
.ui-slider-xs {

	// In horizontal orientation
	&.ui-slider-horizontal {
		height: @slider-mini-size;

		.ui-slider-handle {
		    top: -(@slider-small-size * 1.5) + (@slider-mini-size / 2);
		    margin-left: -(@slider-small-size * 1.5);
		}
	}

	// In vertical orientation
	&.ui-slider-vertical {
		width: @slider-mini-size;

		.ui-slider-handle {
		    left: -(@slider-small-size * 1.5) + (@slider-mini-size / 2);
		    margin-bottom: -(@slider-small-size * 1.5);
		}
	}
}


// Contextual colors
// ----------------------------------------

.ui-slider-primary .ui-slider-range,
.ui-slider-solid.ui-slider-primary .ui-slider-handle {
	background-color: @brand-primary;
	border-color: @brand-primary;
}
.ui-slider-danger .ui-slider-range,
.ui-slider-solid.ui-slider-danger .ui-slider-handle {
	background-color: @brand-danger;
	border-color: @brand-danger;
}
.ui-slider-success .ui-slider-range,
.ui-slider-solid.ui-slider-success .ui-slider-handle {
	background-color: @brand-success;
	border-color: @brand-success;
}
.ui-slider-warning .ui-slider-range,
.ui-slider-solid.ui-slider-warning .ui-slider-handle {
	background-color: @brand-warning;
	border-color: @brand-warning;
}
.ui-slider-info .ui-slider-range,
.ui-slider-solid.ui-slider-info .ui-slider-handle {
	background-color: @brand-info;
	border-color: @brand-info;
}
