//
// Nice Select
// (https://github.com/hernansartorio/jquery-nice-select)
//--------------------------------------------------------

// Scoped variables
$ns-font-size:                     14px !default;
$ns-font-size-small:               12px !default;

$ns-dropdown-border-radius:        30px !default;
$ns-list-border-radius:            10px !default;
$ns-dropdown-height:               42px !default;
$ns-dropdown-height-small:         36px !default;
$ns-dropdown-padding:              18px !default;
$ns-dropdown-text-color:           $gray-500 !default;

$ns-arrow-color:                   $gray-500 !default;
$ns-arrow-size:                    5px !default;;


// Style the dropdown
.nice-select {
	-webkit-tap-highlight-color: rgba($black, 0);
	background-color: $white;
	border-radius: $ns-dropdown-border-radius;
	border: solid 1px $gray-200;
	box-sizing: border-box;
	clear: both;
	cursor: pointer;
	display: block;
	font-family: inherit;
	font-size: $ns-font-size;
	font-weight: 100;
	height: $ns-dropdown-height;
	line-height: $ns-dropdown-height - 2;
	outline: none;
	padding-left: $ns-dropdown-padding;
	padding-right: $ns-dropdown-padding + 12;
	position: relative;
	text-align: left !important;
	transition: all 0.2s ease-in-out;
	user-select: none;
	white-space: nowrap;
	width: auto;
	color: $ns-dropdown-text-color;
	
	&:hover, &:active, &:focus {
		border-color: darken($gray-200, 10%);
	}
	
	// Arrow
	&:after {
		border-bottom: 1px solid $ns-arrow-color;
		border-right: 1px solid $ns-arrow-color;
		content: '';
		display: block;
		height: $ns-arrow-size;
		margin-top: -($ns-arrow-size - 1);
		pointer-events: none;
		position: absolute;
		right: 12px;
		top: 50%;
		transform-origin: 66% 66%;
		transform: rotate(45deg);
		transition: all 0.15s ease-in-out;
		width: $ns-arrow-size;
	}
	
	&.open {
		@extend .nice-select:active;
		
		&:after {
			transform: rotate(-135deg);
		}
		
		.list {
			opacity: 1;
			pointer-events: auto;
			transform: scale(1) translateY(0);
		}
	}
	
	&.disabled {
		border-color: lighten($gray-200, 2%);
		color: $gray-500;
		pointer-events: none;
		
		&:after {
			border-color: lighten($ns-arrow-color, 20%);
		}
	}
	
	// Modifiers
	&.wide {
		width: 100%;
		
		.list {
			left: 0 !important;
			right: 0 !important;
		}
	}
	
	&.right {
		float: right;
		
		.list {
			left: auto;
			right: 0;
		}
	}
	
	&.left {
		float: left;
		
		.list {
			left: 0;
			right: auto;
		}
	}
	
	&.small {
		font-size: $ns-font-size-small;
		height: $ns-dropdown-height-small;
		line-height: $ns-dropdown-height-small - 2;
		
		&:after {
			height: 4px;
			width: 4px;
		}
		
		.option {
			line-height: $ns-dropdown-height-small - 2;
			min-height: $ns-dropdown-height-small - 2;
		}
	}
	
	// List and options
	.list {
		background-color: $white;
		border-radius: $ns-list-border-radius;
		box-shadow: 0 0 0 1px rgba($dark, .11);
		box-sizing: border-box;
		margin-top: 4px;
		opacity: 0;
		overflow: hidden;
		padding: 0;
		pointer-events: none;
		position: absolute;
		top: 100%; left: 0;
		transform-origin: 50% 0;
		transform: scale(.75) translateY(- $ns-dropdown-height / 2);
		transition: all .2s cubic-bezier(0.5, 0, 0, 1.25), opacity .15s ease-out;
		z-index: 9;
		
		&:hover .option:not(:hover) {
			background-color: transparent !important;
		}
	}
	
	.option {
		cursor: pointer;
		font-weight: 400;
		line-height: $ns-dropdown-height - 2;
		list-style: none;
		min-height: $ns-dropdown-height - 2;
		outline: none;
		padding-left: $ns-dropdown-padding;
		padding-right: $ns-dropdown-padding + 11;
		margin: 0;
		text-align: left;
		transition: all 0.2s;
		
		&:hover, &.focus, &.selected.focus {
			background-color: $gray-100;
		}
		
		&.selected {
			background-color: $blue-light !important;
			color: $blue;
		}
		
		&.disabled {
			background-color: transparent;
			color: $gray-500;
			cursor: default;
		}
	}
}

// Use display instead of opacity for IE <= 10
.no-csspointerevents .nice-select {
	.list {
		display: none;
	}
	
	&.open {
		.list {
			display: block;
		}
	}
}