$fancy-select-arrow-color:			#4b5468 !default
$fancy-select-arrow-hover-color:	#7a8498 !default
$fancy-select-options-bg:			$theme-color !default


.amyui-fancy-select
	position: relative

	.fs-disabled
		opacity: .5

	select:focus + .fs-trigger
		border-color: $input-border-focus

	.fs-trigger
		cursor: pointer
		display: block
		width: 100%
		height: $input-height-base
		padding: $padding-base-vertical $padding-base-horizontal
		padding-right: 30px
		font-size: $font-size-base
		line-height: 1.6
		color: $input-color
		background-color: $input-bg
		background-image: none
		border: 2px solid $input-border
		border-radius: 5px
		@include transition(border-color ease-in-out .15s)

		@include transition(all .2s ease-out)

		&:hover
			border-color: darken($input-border, 3%)

		&:after
			content: ""
			display: block
			position: absolute
			width: 0
			height: 0
			border: 5px solid transparent
			border-top-color: $fancy-select-arrow-color
			top: 18px
			right: 10px

		&.input-rounded
			border-radius: 20px
			padding-left: $padding-base-horizontal + 5px
			padding-right: 40px

			&:after
				right: 20px

		&.fs-open
			border-color: $input-border-focus

			&:after
				border-top-color: transparent
				border-bottom-color: $fancy-select-arrow-hover-color
				top: 12px

	ul.fs-options
		list-style: none
		margin: 0
		padding: 5px 0
		position: absolute
		top: 40px
		left: 0
		z-index: 50
		overflow: visible
		background: $fancy-select-options-bg
		width: 100%
		min-width: 200px
		border-radius: 4px
		visibility: hidden
		opacity: 0

		@include transition(opacity .3s ease-out, visibility .3s ease-out, top .3s ease-out, bottom .3s ease-out)
		@include box-shadow(0 2px 4px rgba(0, 0, 0, 0.1))

		&:after
			bottom: 100%
			right: 20px
			border: solid transparent
			content: ""
			height: 0
			width: 0
			position: absolute
			pointer-events: none
			border-color: transparent
			border-bottom-color: $input-border-focus
			border-width: 6px
			margin-left: -6px

		&.fs-open
			visibility: visible
			top: 50px
			opacity: 1

		&.fs-overflowing
			top: auto
			bottom: 40px

			&:after
				top: 100%
				border-bottom-color: transparent
				border-top-color: $input-border-focus

			&.fs-open
				top: auto
				bottom: 50px

		li
			padding: 8px 12px
			margin: 0
			color: #fff
			cursor: pointer
			white-space: nowrap

			@include transition(all 0.2s ease-out)

			&.fs-selected
				background: darken($fancy-select-options-bg, 10%)

			&.fs-hover
				background: darken($fancy-select-options-bg, 5%)

			&.fs-optgroup
				cursor: default
				padding: 10px 0 0 0

				span
					padding-left: 10px
					display: block
					font-style: italic
					opacity: 0.8

	ul.fs-optgroup
		list-style: none
		padding: 5px 0 0 0

		li
			padding-left: 30px