// Core variables and mixins
@import "../../shared/variables.less";
@import "../../shared/mixins.less";

// Core CSS
@import "jquery-ui.less";



// Overides
// -------------------------

.ui-menu .ui-menu-item a.ui-state-focus,
.ui-menu .ui-menu-item a.ui-state-active {
	background: @brand-primary;
}

.ui-widget-content {
	.ui-slider& {
		background: @gray-lighter;
	}
}

.ui-widget-header {
	background: @brand-primary;
	color: contrast(@brand-primary);
}
.ui-widget-header a {
	color: contrast(@brand-primary);
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
	border-color: @brand-primary;
}
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
	border-color: @brand-primary;
	background: @brand-primary;
	color: contrast(@brand-primary);
}



.ui-sortable {
	.ui-state-highlight {
		list-style: none;
		background: @brand-default-light;
		border: none;
	}
}


// UI Spinner
// -------------------------

.ui-spinner {
	width: 100%;
	border-top: none;
	border-left: none;
	border-right: none;
	border-bottom: 1px solid fade(@black, 25);
}
.ui-spinner-input {
	margin: 0;
}
.ui-spinner-input::-ms-clear {
    display: none;
}


// UI Slider
// -------------------------

.ui-slider.ui-widget-content {
	background: fade(#000, 20);
	border-color: transparent;
}
.ui-slider-horizontal {
	height: 2px;
	
	.ui-slider-handle {
		margin-left: -8px;
		.transitions(width 0.2s ease-in-out, height 0.2s ease-in-out, top 0.2s ease-in-out, margin 0.2s ease-in-out, box-shadow 0.2s ease-in-out);

		&.ui-state-active {
			margin-left: -11px;
		}
	}
}
.ui-slider-vertical {
	width: 2px;
	
	.ui-slider-handle {
		margin-bottom: -8px;
		.transitions(width 0.2s ease-in-out, height 0.2s ease-in-out, left 0.2s ease-in-out, margin 0.2s ease-in-out, box-shadow 0.2s ease-in-out);
		
		&.ui-state-active {
			margin-bottom: -11px;
		}
	}
}

.ui-slider .ui-slider-handle {
	width: 16px;
	height: 16px;
	border-color: transparent;
	border-radius: 50%;
	background: @brand-primary;

	&:focus,
		&.ui-state-hover {
		outline: none;
		.box-shadow(0px 0px 0px 7px fade(@brand-primary, 20));
	}
	&.ui-state-active {
		width: 22px;
		height: 22px;
		.box-shadow(none);
		
		.ui-slider-horizontal& {
			top: -11px;
		}
		.ui-slider-vertical& {
			left: -11px;
		}
	}
	
	.ui-slider-horizontal& {
		top: -8px;
	}
	.ui-slider-vertical& {
		left: -8px;
	}
}