/* ------------------------------------------------------------------------------
 *
 *  # jQuery UI Widgets
 *
 *  Styles for jQuery UI widgets
 *
 *  Version: 1.0
 *  Latest update: Nov 12, 2015
 *
 * ---------------------------------------------------------------------------- */


// Accordion
// -------------------------

// Base
.ui-accordion {

	// Header
	.ui-accordion-header {
		display: block;
		cursor: pointer;
		margin: 0;
		outline: 0;
		position: relative;
		background-color: @panel-bg;
		padding: @panel-heading-padding;
		border: 1px solid @panel-default-border;
		margin-top: 5px;
		border-radius: @panel-border-radius;

		// Remove top margin from the first item
		&:first-child {
			margin-top: 0;
		}

		// Border radius correction
		&.ui-accordion-header-active {
			.border-bottom-radius(0);
		}

		// Icons
		.ui-accordion-header-icon {
			position: absolute;
			top: 50%;
			left: @content-padding-large;
			margin-top: -(@icon-font-size / 2);

			// Iconll
			&:before {
				content: '\e9b8';
		        font-family: 'Icomoon';
		        display: block;
		        width: @icon-font-size;
		        font-size: @icon-font-size;
		        line-height: 1;
		        -webkit-font-smoothing: antialiased;
		        -moz-osx-font-smoothing: grayscale;
			}
		}
	}

	// Change icon in active header
	.ui-accordion-header-active {
		.ui-accordion-header-icon:before {
			content: '\e9b7';
		}
	}

	// Icons
	.ui-accordion-icons {
		padding-left: (@content-padding-large + @content-padding-small + @icon-font-size);
	}

	// Content
	.ui-accordion-content {
		padding: @panel-body-padding;
		background-color: @panel-bg;
		border: 1px solid @panel-default-border;
		border-top: 0;
		overflow: auto;
		.border-bottom-radius(@panel-border-radius);
	}
}

// Sortable vertical spacing
.accordion-sortable-group {
	& + & {
		margin-top: 5px;
	}
}



// Autocomplete
// -------------------------

// Base
.ui-autocomplete { 
	position: absolute;
	display: none;
	padding: @list-spacing 0;
	z-index: @zindex-dropdown;
	max-height: 250px;
	overflow-y: auto;
	overflow-x: hidden;

	// Category title
	.ui-autocomplete-category {
		padding: (@padding-base-vertical + 1) @padding-base-horizontal;
		font-size: @font-size-mini;
		line-height: @line-height-mini;
		text-transform: uppercase;
		font-weight: 700;
		margin-top: 2px;
		margin-bottom: 2px;

		// Optgroup items have double horizontal spacing
		~ .ui-menu-item {
			padding-right: (@padding-base-horizontal * 2);
		}
	}
}

// Animated processing icon
.ui-autocomplete-processing:after { 
    content: '\eb51';
    font-family: 'Icomoon';
    display: inline-block;
    position: absolute;
    top: 50%;
    left: @padding-base-horizontal;
    width: @icon-font-size;
    text-align: left;
    margin-top: -(@icon-font-size / 2);
    font-size: @icon-font-size;
    line-height: 1;
    color: inherit;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    .animation(rotation 1s linear infinite);
}

// Inside input group, remove border and border radius from the last element
.input-group {
	.ui-autocomplete-input {
		+ .input-group-btn,
		+ .input-addon {
			> .btn {
				border-right: 0;
				.border-right-radius(0);
			}
		}
	}
}



// Buttons
// -------------------------

// Base
.ui-button {
	display: inline-block;
	position: relative;
	touch-action: manipulation;
	margin-bottom: 0;
	padding: @padding-base-vertical @padding-base-horizontal;
	border-radius: @border-radius-small;
	cursor: pointer;
	vertical-align: middle;
	text-align: center;
	background-color: @btn-default-bg;
	border: 1px solid @btn-default-border;
	color: @btn-default-color;

	// Hover and focus states
	&.ui-state-hover,
	&.ui-state-focus {
		color: @btn-default-color;
		.box-shadow(0 0 0 100px fade(#000, 1.5%) inset);
	}

	// Active state
	&.ui-state-active {
		.box-shadow(0 0 0 100px fade(#000, 3%) inset);
	}

	// Disabled
	&.ui-state-disabled {
		cursor: @cursor-disabled;
		.opacity(.65);
		.box-shadow(none);
	}

	// Colored button
	&[class*=bg-] {
		&.ui-state-hover,
		&.ui-state-focus {
			color: #fff;
			.box-shadow(0 0 0 100px fade(#000, 5%) inset);
		}
		&.ui-state-active {
			.box-shadow(0 0 0 100px fade(#000, 10%) inset);
		}
	}

	// Transparent button
	&.ui-button-link {
		background-color: transparent;
		border-color: transparent;

		// Change link color on hover and focus
		&.ui-state-hover,
		&.ui-state-focus {
			color: @link-hover-color;
		}

		// Remove box shadow
		&.ui-state-hover,
		&.ui-state-focus,
		&.ui-state-active {
			.box-shadow(none);
		}
	}

	// Reset extra padding in Firefox
	&::-moz-focus-inner {
		border: 0;
		padding: 0;
	}
}


//
// Buttons with icons
//

// Primary icon
.ui-button-icon-primary {
	.ui-button-text-icon-primary &,
	.ui-button-text-icons &,
	.ui-button-icons-only {
		margin-left: @element-horizontal-spacing;
	}
}

// Secondary icon
.ui-button-icon-secondary {
	.ui-button-text-icon-secondary &,
	.ui-button-text-icons &,
	.ui-button-icons-only & {
		margin-right: @element-horizontal-spacing;
	}
}

// Icon only
.ui-button-icon-only {
    padding-left: (@padding-base-vertical + 2);
    padding-right: (@padding-base-vertical + 2);
}

// Hide text in button with icons only
.ui-button-text {
	.ui-button-icon-only &,
	.ui-button-icons-only & {
		display: none;
	}
}


//
// Button sets
//

// Base
.ui-buttonset {
	display: inline-block;
	vertical-align: middle;
	position: relative;

	// Child buttons
	.ui-button {
		border-radius: 0;
		margin-right: -1px;
		float: right;
	}

	// Remove left margin for first childs
	.ui-button:first-child,
	.ui-helper-hidden-accessible:first-child + .ui-button {
		margin-right: 0;
	}

	// Add border radius for the first button
	.ui-button:first-child,
	.ui-helper-hidden-accessible:first-child + .ui-button:not(:last-child) {
		.border-left-radius(@border-radius-small);
	}

	// Add border radius for the last button
	.ui-button:last-child {
		.border-right-radius(@border-radius-small);
	}
}

// Split button
.ui-buttonset-split {
	position: relative;
	display: inline-block;

	> ul {
		position: absolute;
		text-align: right;
		min-width: 180px;
	}
}



// Datepicker
// ------------------------------

// Base
.ui-datepicker {
	min-width: 270px;
	background-color: @dropdown-bg;
	padding: @list-spacing;
	display: none;
	border: 1px solid @dropdown-border;
	border-radius: @border-radius-base;
	z-index: 190!important;

	// Make it flexible in sidebar
	.sidebar & {
		min-width: 0;
	}


	//
	// Header
	//

	// Base
	.ui-datepicker-header {
		position: relative;
		padding: 15px 0 20px 0;
	}

	// Title
	.ui-datepicker-title {
		margin: 0 40px;
		font-size: @font-size-h6;
		text-align: center;

		// Show month
		.ui-datepicker-month {
			font-weight: 500;
			display: inline-block;
		}

		// Show year
		.ui-datepicker-year {
			font-size: @font-size-small;
			color: @text-muted;
			display: inline-block;
			margin-right: 5px;
		}

		// Date select
		select {
			outline: 0;

			&.ui-datepicker-month,
			&.ui-datepicker-year {
				width: 48%;
				font-size: @font-size-base;
				font-weight: 400;
				color: @text-color;
			}
		}
	}


	//
	// Nav buttons
	//

	// Base
	.ui-datepicker-prev,
	.ui-datepicker-next {
		position: absolute;
		top: 10px;
		line-height: 1;
		color: @text-color;
		padding: (@icon-font-size / 2);
		border-radius: @border-radius-small;

		// Icon base
		&:after {
			font-family: 'icomoon';
			display: inline-block;
			font-size: @icon-font-size;
			width: @icon-font-size;
			text-align: center;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		}

		// Hide text
		span {
			display: none;
		}
	}

	// Prev button icon
	.ui-datepicker-prev {
		right: 0;

		&:after {
			content: '\e9cb';
		}
	}

	// Next btn icon
	.ui-datepicker-next {
		left: 0;

		&:after {
			content: '\e9c8';
		}
	}

	// Hover state
	.ui-datepicker-prev-hover,
	.ui-datepicker-next-hover {
		background-color: @dropdown-link-hover-bg;
	}


	//
	// Components
	//

	// Table
	table {
		width: 100%;
		border-collapse: collapse;
		margin: 0;

		// Header cells
		th {
			text-align: center;
			font-weight: 400;
			border: 0;
			padding-bottom: 10px;
			font-size: @font-size-small;
			color: @text-muted;
		}

		// Body cells
		td {
			border: 0;
			padding: 1px;
			position: relative;

			// Day element
			span,
			a {
				display: block;
				padding: 6px;
				text-align: center;
				text-decoration: none;
				border-radius: @border-radius-small;
				color: @text-color;
				min-width: 34px;
			}

			// Hover state
			.ui-state-hover {
				background-color: @dropdown-link-hover-bg;
			}

			&.ui-state-disabled span {
				color: #ccc;
			}

			// Week column
			&.ui-datepicker-week-col {
				padding: 6px;
				color: @text-muted;
			}

			// Active day
			&.ui-datepicker-current-day .ui-state-active {
				background-color: @color-teal-400;
				color: #fff;
			}

			// Today
			&.ui-datepicker-today .ui-state-highlight {
				background-color: @brand-primary;
				color: #fff;

				&:after {
				  content: "";
				  position: absolute;
				  top: 3px;
				  left: 3px;
				  width: 0;
				  height: 0;
				  border-top: 6px solid #fff;
				  border-right: 6px solid transparent;
				}
			}

			a.ui-priority-secondary {
				.opacity(0.6);
			}
		}
	}

	// Button panel
	.ui-datepicker-buttonpane {
		button {
			float: left;
			border: 1px solid @btn-default-border;
			background-color: @btn-default-bg;
			font-weight: 400;
			margin-top: 5px;
			cursor: pointer;
			padding: @padding-base-vertical @padding-base-horizontal;
			width: auto;
			overflow: visible;
			outline: 0;

			// Hover state
			&.ui-state-hover {
				.box-shadow(0 0 0 100px fade(#000, 2%) inset);
			}

			// Current date
			&.ui-datepicker-current {
				float: right;
			}

			// Active state
			&:active {
				.box-shadow(0 0 0 100px fade(#000, 4%) inset);
			}
		}
	}

	// Multiple calendars
	&.ui-datepicker-multi {
		width: auto!important;
	}
}

// Inline datepicker
.datepicker-inline {
	width: 264px;
	max-width: 100%;
	overflow-x: auto;

	.full-width&,
	.sidebar &,
	.popover & {
		width: 100%;
	}
}

// Trigger
.ui-datepicker-trigger {
	position: absolute;
	top: 4px;
	right: 5px;
	z-index: 3;
	padding: 6px;
	cursor: pointer;
}

// Clearfix
.ui-datepicker-row-break {
	clear: both;
	width: 100%;
	font-size: 0;
}

// Multiple datepickers
.ui-datepicker-multi {
	.ui-datepicker-group {
		float: left;

		table {
			width: 95%;
			margin: 0 8px;
		}
	}

	.ui-datepicker-group-last {
		.ui-datepicker-header {
			border-left-width: 0;
		}
	}

	.ui-datepicker-buttonpane {
		clear: left;
	}
}
.ui-datepicker-multi-2 .ui-datepicker-group {
	width: 46%;
}
.ui-datepicker-multi-3 .ui-datepicker-group {
	width: 33.3%;
}
.ui-datepicker-multi-4 .ui-datepicker-group {
	width: 25%;
}



// Dialog
// ------------------------------

// Base
.ui-dialog {
	position: fixed;
	top: 0;
	left: 0;
	background-color: @modal-content-bg;
    border-radius: @border-radius-base;
	border: 1px solid @modal-content-border-color;
	outline: 0;
	overflow: hidden;
    .box-shadow(0 1px 4px rgba(0,0,0,.2));

    // Make it full width on mobiles
    @media (max-width: @screen-xs-max) {
	    width: 90%!important;
    }
}


//
// Dialog header
//

// Header
.ui-dialog-titlebar {
	position: relative;
	padding: @modal-title-padding;
	padding-bottom: 0;

	// Draggable cursor
	.ui-draggable & {
		cursor: move;
	}
}

// Title
.ui-dialog-title {
	float: right;
	font-size: @font-size-h6;
	white-space: nowrap;
	width: 90%;
	overflow: hidden;
	text-overflow: ellipsis;
}

// Close button
.ui-dialog-titlebar-close {
	position: absolute;
	background-color: transparent;
	border: 0;
	left: @content-padding-large;
	top: 50%;
	padding: 0;
	margin-top: ((@line-height-computed - @icon-font-size) / 2);

	// Cross icon
	&:after {
		content: '\ed6b';
        font-family: 'Icomoon';
        display: block;
        width: @icon-font-size;
        font-size: @icon-font-size;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
	}
}


//
// Dialog content
//

// Content itself
.ui-dialog-content {
	position: relative;
	border: 0;
	padding: @modal-inner-padding;
	background: none;
	overflow: auto;

	// Remove bottom margin from last childs
	.form-group:last-child,
	p:last-child {
		margin-bottom: 0;
	}
}

// Buttons
.ui-dialog-buttonpane {
	padding: @modal-inner-padding;
	padding-top: 0;

	.ui-dialog-buttonset {
		float: left;
	}

	button + button {
		margin-right: 5px;
		cursor: pointer;
	}
}



// Menu
// ------------------------------

// Base
.ui-menu {
	list-style: none;
	padding: @list-spacing 0;
	margin: 0;
	display: block;
	outline: none;
	min-width: 180px;
	white-space: nowrap;
	background-color: @dropdown-bg;
	border: 1px solid @input-border;
	border-radius: @border-radius-base;
	z-index: @zindex-dropdown;

	// Nested menu
	.ui-menu {
		position: absolute;
		top: -(@list-spacing + 1)!important;
	}

	// Menu item
	.ui-menu-item {
		position: relative;
		margin: 0;
		cursor: pointer;
		padding: (@padding-base-vertical + 1) @content-padding-base;
		min-height: 0;
		outline: 0;

		// Links
		> a {
			display: block;
			color: @text-color;
		}

        // Submenu arrow icon
		> .ui-menu-icon {
            position: absolute;
            top: 50%;
            margin-top: -(@icon-font-size / 2);
            left: @content-padding-base;

			&:after {
	            content: '\e9c7';
	            font-family: 'icomoon';
	            font-size: @icon-font-size;
	            font-weight: 400;
	            line-height: 1;
	            -webkit-font-smoothing: antialiased;
	            -moz-osx-font-smoothing: grayscale;
	            .opacity(0.8);
	        }
		}

		// Disabled state
		&.ui-state-disabled {
			&,
			a {
				color: @text-muted;
				cursor: @cursor-disabled;
			}
		}
	}

	// Header
	.ui-menu-header {
		padding: (@padding-base-vertical + 1) @content-padding-base;
		font-size: @font-size-mini;
		line-height: @line-height-mini;
		text-transform: uppercase;
		color: @text-muted;
	    margin-top: (@list-spacing * 2);

	    // Add top spacing for the first item
	    &:first-child {
	        margin-top: @list-spacing;
	    }

	    // Highlighted header
	    &.highlight {
	        margin-top: 0;
	        background-color: @dropdown-annotation-bg;
	        color: @gray-light;

	        // ... but remove from the first one
	        &:first-child {
	            margin-top: 0;
	        }
	    }
	}
    .ui-menu-item + .highlight,
    .highlight + .ui-menu-item {
        margin-top: @list-spacing;
    }

	// Icons
	i[class*=icon-] {
		margin-left: @content-padding-small;

		// Right icon
		&.pull-right {
			margin-left: 0;
			margin-right: @content-padding-small;
			margin-top: (((@line-height-computed - @icon-font-size) / 2) + 1);
		}
	}

    // Labels/badges
    .badge,
    .label {
        margin-top: 1px;
    }

	// Divider
	.ui-menu-divider {
		margin: @list-spacing 0;
		height: 0;
		font-size: 0;
		line-height: 0;
		border-top: 1px solid @dropdown-divider-bg;
	}

	// States
	.ui-state-focus,
	.ui-state-active {
	    color: @dropdown-link-hover-color;
	    background-color: @dropdown-link-hover-bg;
	}

	// Disabled state
	&.ui-state-disabled {
		&,
		.ui-menu-item,
		a {
			color: @text-muted;
			cursor: @cursor-disabled;
		}
	}
}



// Progress bar
// ------------------------------

// Base
.ui-progressbar {
    height: @progress-base-height;
	overflow: hidden;
	position: relative;
	background-color: @progress-bg;
	border-radius: @progress-border-radius;
    .box-shadow(inset 0 1px 1px fade(#000, 10%));
}

// Value
.ui-progressbar-value {
	float: right;
	width: 0%;
	height: 100%;
	background-color: @progress-bar-bg;
	color: #fff;
	overflow: hidden;
	.transition(width .6s ease);
}

// Overlay
.ui-progressbar-value,
.ui-progressbar-overlay {
	height: 100%;
	background-size: 40px 40px;
}

// Stripes
.ui-progressbar-striped {
	.ui-progressbar-value,
	.ui-progressbar-overlay {
		#gradient > .striped();
	}
}

// Stripes for overlay
.ui-progressbar-overlay {
	#gradient > .striped();
}

// Animated stripes
.ui-progressbar-active .ui-progressbar-value,
.ui-progressbar-overlay {
	.animation(progress-bar-stripes 2s linear infinite);
}

// Remove stripes in indeterminate mode
.ui-progressbar-indeterminate .ui-progressbar-value {
	background-image: none;
}



// Select menu
// ------------------------------

// Base
.ui-selectmenu-menu {
	padding: 0;
	margin: 0;
	position: absolute;
	top: 0;
	left: 0;
	display: none;

	// Set max width for menu
	.ui-menu {
		max-height: 250px;
		overflow-y: auto;
		overflow-x: hidden;

		// Optgroups
		.ui-selectmenu-optgroup {
			font-size: @font-size-mini;
			font-weight: 700;
			line-height: @line-height-mini;
			padding: @padding-base-vertical @padding-base-horizontal;
			margin: 2px 0;
			text-transform: uppercase;
			height: auto;
			border: 0;

			// Add double horizontal padding for items
			~ .ui-menu-item {
				padding-right: (@padding-base-horizontal * 2);
			}
		}
	}
}

// Display if opened
.ui-selectmenu-open {
	display: block;
}

// Select button
.ui-selectmenu-button {
	display: inline-block;
	position: relative;
	text-decoration: none;
	cursor: pointer;
	height: @input-height-base;
	background-color: @input-bg;
	border: 1px solid @input-border;
	border-radius: @input-border-radius;
	outline: 0;

	// Darken on hover and focus
	&.ui-state-hover,
	&.ui-state-focus {
		.box-shadow(0 0 0 100px fade(#000, 1%) inset);
	}

	// Down arrow
	&:after {
        content: '\e9c5';
        font-family: 'Icomoon';
        display: inline-block;
        position: absolute;
        top: 50%;
        left: @padding-base-horizontal;
        width: @icon-font-size;
        text-align: left;
        margin-top: -(@icon-font-size / 2);
        font-size: @icon-font-size;
        line-height: 1;
        color: inherit;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
	}

	// Button text
	.ui-selectmenu-text {
		padding: @padding-base-vertical @padding-base-horizontal;
		padding-left: ((@padding-base-horizontal * 2) + 4);
		display: block;
		white-space: nowrap;
	}
}

// Disabled menu
.ui-selectmenu-disabled {
    cursor: @cursor-disabled;
    background-color: @input-bg-disabled;
    color: @gray-light;

	&.ui-state-hover,
	&.ui-state-focus {
		.box-shadow(none);
	}
}


//
// Optional sizing to match form controls
//

// Large
.ui-selectmenu-lg {
	.ui-selectmenu-button {
		height: @input-height-large;

		.ui-selectmenu-text {
			padding: @padding-large-vertical @padding-large-horizontal;
			padding-left: ((@padding-large-horizontal * 2) + 4);
		}
	}
}

// Small
.ui-selectmenu-sm {
	.ui-selectmenu-button {
		height: @input-height-small;

		.ui-selectmenu-text {
			padding: @padding-small-vertical @padding-base-horizontal;
			padding-left: ((@padding-small-horizontal * 2) + 4);
		}
	}
}

// Mini
.ui-selectmenu-xs {
	.ui-selectmenu-button {
		height: @input-height-mini;

		.ui-selectmenu-text {
			padding: @padding-xs-vertical @padding-xs-horizontal;
			padding-left: ((@padding-xs-horizontal * 2) + 4);
			font-size: @font-size-small;
			line-height: @line-height-small;
		}
	}
}


//
// Images
//

.ui-selectmenu-images {

	// Image base
	.ui-menu-item > span {
		display: inline-block;
		margin-left: (@padding-base-horizontal - 2);
		border-radius: @border-radius-small;
		width: @icon-font-size;
		height: @icon-font-size;
		background-size: @icon-font-size @icon-font-size;
		vertical-align: middle;
		position: relative;
		top: -1px;
	}

	// Demo images, replace with your own
	.demo-img-amazon {
		background: url('../images/placeholder.jpg') no-repeat;
	}
	.demo-img-youtube {
		background: url('../images/placeholder.jpg') no-repeat;
	}
	.demo-img-twitter {
		background: url('../images/placeholder.jpg') no-repeat;
	}
	.demo-img-bing {
		background: url('../images/placeholder.jpg') no-repeat;
	}
	.demo-img-spotify {
		background: url('../images/placeholder.jpg') no-repeat;
	}
}



// Sliders
// ------------------------------

.ui-slider {
	position: relative;
	text-align: right;
	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;
		outline: 0;

		// Hover color
		&.ui-state-hover,
		&.ui-state-focus {
			background-color: #f8f8f8;

	        // Mute circle
	        &:after {
	            .opacity(0.9);
	        }
		}

		// Active color
		&.ui-state-active {
			background-color: #fefefe;

	        // Mute circle
	        &:after {
	            .opacity(0.9);
	        }
		}

		// 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-slate-600;
		    border-radius: 50%;
		}
	}

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

	// Disabled state
	&.ui-slider-disabled {
		.opacity(0.6);
	}
}


//
// 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 {
		right: 0;
	}
	.ui-slider-range-max {
		left: 0;
	}
}

// Vertical
.ui-slider-vertical {
	width: @slider-base-size;
	height: 150px;
	display: inline-block;
	margin: 0 10px;

	// 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 {
		right: 0;
		width: 100%;
	}
	.ui-slider-range-min {
		bottom: 0;
	}
	.ui-slider-range-max {
		top: 0;
	}
}


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



// Spinner
// ------------------------------

// Base
.ui-spinner {
	position: relative;
	overflow: hidden;
	display: table;
}

// Input
.ui-spinner-input {
	padding-left: (@padding-base-vertical * 2) + @icon-font-size;
	display: table-cell;
	width: 100%;
	border-radius: 0 @input-border-radius @input-border-radius 0;
	border-left: 0;
}


//
// Buttons
//

// Button base
.ui-spinner-button {
	font-size: 0;
	color: @text-color;
	cursor: pointer;
	background-color: @input-bg;
	border: 1px solid @input-border;
	border-radius: 0;
	display: table-cell;
	width: 1%;
	padding: 0 @padding-base-vertical;

	// Button icons base
	&:after {
        font-family: 'Icomoon';
        display: inline-block;
        width: @icon-font-size;
        font-size: @icon-font-size;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
	}

	// Remove left border from 2ns button
	& + & {
		border-right: 0;
	}

	// Hide button text
	.ui-button-text {
		display: none;
	}

	// Hover/focus states
	&.ui-state-hover,
	&.ui-state-focus {
		color: @text-color;
		.box-shadow(0 0 0 100px fade(#000, 1%) inset);
	}

	// Disabled state
	&.ui-state-disabled {
		background-color: @input-bg-disabled;
		color: @text-muted;
		cursor: @cursor-disabled;
		.box-shadow(none);
	}
}

// Up button icon
.ui-spinner-up {	
	&:after {
		content: '\e9f7';
	}
}

// Down button icon
.ui-spinner-down {
	&:after {
		content: '\e9e2';
	}
	.border-right-radius(@input-border-radius);
}



// Tabs
// ------------------------------

.ui-tabs {
	position: relative;

	// Tabs navigation
	.ui-tabs-nav {
		margin-bottom: @line-height-computed;
		border-bottom: 1px solid @nav-tabs-border-color;

		// Items
		li {
			list-style: none;
			position: relative;
			padding: 0;
			white-space: nowrap;
			margin-bottom: -1px;

		    // Setup desktop view
		    @media (min-width: @screen-sm-min) {
	            float: right;
		    }
		}

		// Links
		.ui-tabs-anchor {
			display: block;
			color: @color-grey-400;
			padding: @nav-link-padding;
			border: 1px solid transparent;
			border-top-width: 2px;
		}

		// Hover/focus states
		.ui-state-hover,
		.ui-state-focus {
			.ui-tabs-anchor:not(.ui-state-disabled) {
				color: @text-color;
			}
		}

		// Active item
		.ui-tabs-active {
			.ui-tabs-anchor {
		        color: @nav-tabs-active-link-hover-color;
		        background-color: @nav-tabs-active-link-hover-bg;
		        cursor: default;
		        border-color: @brand-primary @nav-tabs-active-link-hover-border-color transparent;
		    }
		}

		// Disabled item
		.ui-state-disabled {
			color: @nav-disabled-link-color;
			cursor: @cursor-disabled;
			.opacity(0.75);
		}

		// Add bottom border and bg to sortable helper
		.ui-sortable-helper:not(.ui-tabs-active) {
			.ui-tabs-anchor {
				background-color: #fff;
				border-bottom-color: @nav-tabs-border-color;
			}
		}


	    // Setup mobile view
	    @media (max-width: @screen-xs-max) {
	        border-bottom: 0;
	        position: relative;
	        background-color: #fff;
	        padding: @list-spacing 0;
	        border: 1px solid @panel-default-border;
	        border-radius: @border-radius-base;

	        // Tab nav item
	        li {
	            margin-bottom: 0;

	            // Add 1px spacing between items
	            & + li {
	                margin-top: 1px;
	            }
	        }

	        // Add permanent link styles
	        .ui-tabs-anchor {
	            border-width: 0 2px 0 0;
	            border-right-color: transparent;
	        }

	        // Background color for hover/focus states
	        .ui-state-hover,
	        .ui-state-focus {
	        	.ui-tabs-anchor {
	        		background-color: @nav-tabs-mobile-link-hover-bg;
	        	}
	        }

	        // Left border and bg colors for active link
	        .ui-state-active {
	        	.ui-tabs-anchor {
	                border-right-color: @brand-primary;
	                background-color: @nav-tabs-mobile-link-active-bg;
	        	}
	        }

	        // Add text header to the tabs section
	        &:before {
	            content: 'Contents';
	            color: inherit;
	            font-size: @font-size-small;
	            line-height: @line-height-small;
	            font-weight: 500;
	            margin-top: (@content-padding-base - @list-spacing);
	            margin-right: @content-padding-base;
	            margin-bottom: @content-padding-base;
	            text-transform: uppercase;
	            .opacity(0.5);
	        }
	    }
	}

	// Display tabs panel
	.ui-tabs-panel {
		display: block;
	}
}



// Tooltip
// ------------------------------

.ui-tooltip {
	position: absolute;
	z-index: @zindex-tooltip;
	max-width: @tooltip-max-width;
	padding: 3px 8px;
	color: @tooltip-color;
	text-align: center;
	background-color: @tooltip-bg;
	border-radius: @border-radius-base;
}



// Misc
// ------------------------------

// Overlay
.ui-widget-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: @modal-backdrop-bg;
	.opacity(@modal-backdrop-opacity);
}

//
// Layout helpers
//

// Hide element
.ui-helper-hidden {
	display: none;
}

// Accessible element
.ui-helper-hidden-accessible {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

// Reset
.ui-helper-reset {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	list-style: none;
}

// Clearfix
.ui-helper-clearfix {
	&:before,
	&:after {
		content: "";
		display: table;
		border-collapse: collapse;
	}

	&:after {
		clear: both;
	}
}

// iFrame fix
.ui-helper-zfix {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	.opacity(0);
}

// Overlay z-index
.ui-front {
	z-index: @zindex-modal-background;
}
