@import "libs";

// -----------------------------------------------------------------------------
// $Selectize
// -----------------------------------------------------------------------------

.evolvethemes-f {
	.selectize-input {
		padding: $gutter/10;
		border-radius: $radius;
		display: block;
		width: 100%;
		position: relative;
		float: left;
		box-sizing: border-box;
		border: 1px solid $grey_40;
		transition: border-color $transition_time ease;

		&.disabled {
			opacity: .5;
			border-style: dashed;
			cursor: not-allowed;
		}

		&.has-items {
			padding-left: $gutter/10;
			padding-right: $gutter/10;
		}

		&:not( .has-items ):not( .disabled ) {
			cursor: text;
		}

		&:hover:not( .disabled ) {}

		&.dropdown-active,
		&:hover:not( .disabled ) {
			border-color: $grey_50;
		}

		&.dropdown-active {
			border-bottom-left-radius: 0;
			border-bottom-right-radius: 0;
			box-shadow:  #{$shadow} ;
		}

		> input {
			color: $grey_60;
			display: inline-block !important;
			padding: ($gutter/5) 0 ($gutter/5 + 1) ($baseline/3 - 1) !important;
			min-height: 0 !important;
			max-height: none !important;
			max-width: 100% !important;
			margin: 0 $baseline/6 0 0 !important;
			text-indent: 0 !important;
			border: 0 none !important;
			background: none !important;
			line-height: inherit !important;
			-webkit-user-select: auto !important;
			-webkit-box-shadow: none !important;
			box-shadow: none !important;
			font-size: 13px !important;
			box-sizing: border-box;
			float: left;

			&::-ms-clear {
				display: none;
			}

			&:after {
				content: ' ';
				display: block;
				clear: left;
			}

			&:focus { outline: none !important; }
		}

		[data-value] + input {
			padding-left: 0 !important;
			float: none;
		}

		> div {
			display: block;
			float: left;
			padding: $gutter/5 $baseline/3;
			border: 1px solid $grey_40;
			background-color: $white;
			font-size: 12px;
			border-radius: $radius - 1;
			box-sizing: border-box;
			margin: 2px $gutter/10;
			cursor: pointer;
			position: relative;
			transition: box-shadow $transition_time ease, border-color $transition_time ease;

			&:hover {
				border-color: $grey_50 !important;
				box-shadow:  0 3px 8px -2px rgba( $black, .2 ) ;
			}

			.remove {
				@include position( absolute, 50% $baseline/3 null null );
				@include size( $baseline/2, $baseline );
				margin-top: -$baseline/2;
				text-align: center;
				line-height: $baseline - 2;
				font-size: 16px;
				text-decoration: none;
				display: block;
				color: $grey_50;
				font-weight: bold;

				&:hover {
					color: $red_10;
				}
			}

			span {
				margin-right: $gutter/4;
				color: $grey_40;
			}

			// Sortable ------------------------------------------------------------

			&.ui-sortable-placeholder {
				background-color: $grey_30 !important;
				border-color: $grey_30 !important;
				-webkit-box-shadow: none !important;
				box-shadow: none !important;
				max-height: $baseline + 4 !important;
			}

			&.ui-sortable-helper {
				box-shadow:  0 2px 10px rgba( $black, .1 ) ;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				max-height: $baseline + 4 !important;
			}

		}
	}

	.ev-multiple-select-vertical .selectize-input.has-items {
		padding: $gutter/10 $gutter/5;
	}

	.plugin-remove_button:not( .single ) .selectize-input > div {
		padding-right: $baseline/3 + $baseline/2 + $baseline/3;
	}

	.ev-multiple-select-vertical .selectize-input > input {
		left: 0 !important;
		position: relative !important;
	}

	.ev-multiple-select-vertical .selectize-input > div {
		width: 100%;
		margin: $gutter/10 0;
	}

	.selectize-control {
		position: relative;
		@include clearfix;
		background-color: $grey_10;

// -----------------------------------------------------------------------------
// $Single input
// -----------------------------------------------------------------------------

		&.single  {
			.selectize-input {
				padding-right: $baseline*2;
				cursor: pointer;

				&.focus {
					cursor: text;
				}

				&:before {
					content: "";
					display: block;
					@include position( absolute, 50% $baseline/2+1 null null );
					@include triangle( "down", 12px, 6px, $grey_30 );
					margin-top: -3px;
					transition: border-color $transition_time ease;
				}

				&:after {
					content: "";
					display: block;
					@include position( absolute, 50% $baseline*1.5 null null );
					margin-top: -$baseline/2;
					@include size( 0, $baseline );
					border-left: 1px solid $grey_40;
					transition: border-color $transition_time ease;
				}

				&:hover {
					&:before {
						border-top-color: $grey_60;
					}
					&:after {
						border-left-color: $grey_50;
					}
				}

				> div {
					background-color: transparent !important;
					border-color: transparent !important;
					font-size: 14px;
					padding-right: 0;
					margin-left: 0;
					margin-right: 0;
				}

				&:hover:not( .disabled ) {
					> div {
						box-shadow: none;
						border-color: transparent;
					}
				}

				&.full {
					> input {
						margin-left: 0 !important;
					}
				}
			}
		}
	}

// -----------------------------------------------------------------------------
// $Dropdown
// -----------------------------------------------------------------------------
	.selectize-dropdown {
		@include position( absolute, 100% null null 0 );
		z-index: 100001;

		[data-selectable] {
			padding: $baseline/8 $gutter/2;
			color: $grey_50;
			cursor: pointer;

			&:first-child {
				margin-top: $baseline/4;

				&:last-child {
					margin-bottom: $baseline/4;
				}
			}

			&.create + [data-selectable] {
				margin-top: $baseline/4;
			}

			&:last-child {
				margin-bottom: $baseline/4;
			}

			&.active {
				color: $grey_70;
			}
		}
	}

	.selectize-dropdown-content {
		overflow-y: auto;
		overflow-x: hidden;
		max-height: 200px;
		border: 1px solid $grey_50;
		border-top-color: $grey_40;
		background-color: $white;
		margin: -1px 0 0 0;
		box-sizing: border-box;
		box-shadow:  #{$shadow} ;
		color: $grey_40;
		padding: 0;

		.highlight {
			background-color: lightYellow;
			text-decoration: underline;
			margin-right: 0;

			&:after {
				display: none;
			}
		}

		span {
			margin-right: 4px;

			&:after {
				content: ":";
				display: inline-block;
			}
		}
	}
}
