/** 
 * Selectator jQuery Plugin
 * A plugin for select elements
 * version 3.0, Apr 8th, 2016
 * by Ingi P. Jacobsen
 */

/* dimmer */
#selectator_dimmer
	background-color rgba(#000, .1)
	width 100%
	height 100%
	left 0
	top 0
	bottom 0
	right 0
	position fixed
	z-index 100

/* spinner keyframes */
@keyframes selectator_spinner
	0%
		transform rotate(0deg)
	100%
		transform rotate(360deg)

/* main element */
.selectator_element
	border 1px solid #dcdcdc
	box-sizing border-box
	background-color #fff
	display inline-block
	text-decoration none
	vertical-align middle
	border-radius 2px
	*
		box-sizing border-box
		text-decoration none
	img
		display block
	&.multiple
		padding-right 20px !important
		padding-bottom 5px !important
	&.single
		height 36px
		padding 7px 10px !important
	&.focused
		box-shadow 0 0 1px #39f
	&:after
		position absolute
		cursor pointer
		content '\25BC'
		font-size 70%
		transform scaleY(.75)
		right 4px
		color rgba(#000, .75)
		top 50%
		line-height 0
	&.loading:before
		border 3px solid rgba(#000, .1)
		border-top 3px solid rgba(#000, .5)
		border-radius 50%
		width 14px
		line-height 0
		height 14px
		margin-top -10px
		animation selectator_spinner 500ms linear infinite
		content: '';
		position: absolute;
		right: 20px;
		top 50%


/* selected items */
.selectator_selected_items
	.selectator_placeholder
		font-size 80%
		color rgba(#000, .5)
	.single &
		display block
	.multiple &
		display inline
	.selectator_selected_item
		color rgba(#000, .75)
		position relative
		vertical-align top
		.single &
			background-color transparent
			display block
			margin 0
			padding 0
			font-size inherit
			text-decoration none
		.multiple &
			background-color #fafafa
			display inline-block
			margin 5px 0 0 5px
			padding 3px 20px 2px 5px
			font-size 80%
			border-radius 2px
			border 1px solid #dcdcdc
		.selectator_selected_item_left
			float left
			.single &
				float left
				width 30px
				margin-top -2px
				img
					height 22px
					border-radius 2px
			.multiple &
				float left
				width 22px
				margin-top -1px
				margin-left -2px
				img
					height 18px
					border-radius 2px
		.selectator_selected_item_title
			.single &
				height auto
				line-height 1.3
			.multiple &
				float left
				padding-top 1px
				padding-bottom 1px
		.selectator_selected_item_subtitle
			display none
		.selectator_selected_item_right
			.single &
				float right
				background-color #aacc66
				color #fff
				font-weight bold
				font-size 80%
				text-align center
				line-height 16px
				border-radius 12px
				padding 2px 12px
				margin-right 40px
			.multiple &
				display none
		.selectator_selected_item_remove
			.single &
				display block
				position absolute
				right 16px
				cursor pointer
				font-size 75%
				font-weight bold
				color rgba(#000, .75)
				padding 2px
				line-height 0
				top 50%
				transform scaleX(1.2)
			.multiple &
				display inline-block
				font-weight bold
				color rgba(#000, .75)
				margin 0 0 0 5px
				cursor pointer
				font-size 60%
				line-height 10px
				vertical-align top
				border-radius 0 2px 2px 0
				position absolute
				right 0
				top 0
				bottom 0
				padding 7px 5px 4px 5px
				&:hover
					background-color rgba(#000, .1)

/* input field */
.selectator_input
.selectator_textlength
	border 0
	display inline-block
	margin 0
	background-color transparent
	font-size 13px
	outline none
	.multiple &
		padding 3px 0 0 0
		margin 7px 0 2px 5px
.selectator_input
	.single &
		border 1px solid #7f9db9
		position absolute
		bottom -40px
		left -1px
		z-index 101
		padding 10px 25px
		width 100%
		width calc(100% + 2px)
		border-bottom 0
		background-color #f6f6f6
		color #333
		font-size inherit
		box-shadow 0 8px 24px rgba(#000, .1)
	.single.options-hidden &
		opacity 0
		position absolute
		left -10000px
	.single.options-visible &
		opacity 1
	.disable_search &
		opacity 0
		padding 0 1px 1px 0 !important

/* options */
.selectator_options
	margin 0
	padding 0
	border 1px solid #7f9db9
	border-radius 0 0 3px 3px
	position absolute
	box-sizing border-box
	-moz-box-sizing border-box
	z-index 101
	background-color #fff
	overflow-y scroll
	max-height 250px
	list-style none
	left -1px
	right -1px
	box-shadow 0 8px 24px rgba(#000,.1)
	.disable_search &
		border-top 1px solid #7f9db9
	.single.disable_search &
		padding-top 0
	.options-hidden &
		display none
	.selectator_group
		padding 5px
		font-weight bold
	.selectator_option
		padding 5px
		cursor pointer
		color #000
		min-height 36px
		&.selectator_group_option
			padding-left 20px
		&:before
		&:after
			content ""
			display table
		&:after
			clear both
		.selectator_option_left
			float left
			& img
				height 30px
				border-radius 2px
		.selectator_option_title
			margin-left 40px
		.selectator_option_subtitle
			font-size 70%
			color rgba(#000, .5)
			margin-top -4px
			margin-bottom -1px
			margin-left 40px
		.selectator_option_right
			float right
			background-color #aacc66
			color #fff
			font-weight bold
			font-size 80%
			text-align center
			line-height 16px
			border-radius 12px
			padding 2px 12px
			margin-top 4px
		&.active
			background-color #39f
			color #fff
			.selectator_option_subtitle
				color rgba(#fff, .6)
