@import '../node_modules/bourbon/app/assets/stylesheets/bourbon';

$fstColorGrayLight1: #D7D7D7;
$fstColorGrayDark1: #232323;
$fstColorMain1: #43A2F3;

/*----------------------------------------------------------------------------------------------------
General styling
----------------------------------------------------------------------------------------------------*/

@include keyframes(fstAnimationEnter) {
	from {
		opacity: 0;
		@include transform( translate3d(0, -1em, 0));
	}
	to {
		opacity: 1;
		@include transform( translate3d(0, 0, 0));
	}
}

.fstElement {

	display: inline-block; position: relative;
	border: 1px solid $fstColorGrayLight1; box-sizing: border-box;
	color: $fstColorGrayDark1; font-size: 1.1em; background-color: #fff;

	> select,
	> input { position: absolute; left: -999em; }

}

.fstToggleBtn {

	font-size: 1.4em; display: block; position: relative; box-sizing: border-box;
	padding: em(10,14) em(20,14) em(10,14) em(10,14); min-width: em(200,14);
	cursor: pointer;

	&:after {

		position: absolute; content:""; right: em(10,14); top: 50%; margin-top: em(-5/2,14);
		border: em(5,14) solid transparent; border-top-color: darken($fstColorGrayLight1,5%);

	}

}

.fstQueryInput {

	@include appearance(none); outline: none;
	box-sizing: border-box; background: transparent; border: 0;

}

.fstResults {

	position: absolute; left: -1px; top: 100%; right: -1px; max-height: 30em;
	overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;
	border: 1px solid $fstColorGrayLight1; border-top: 0; background-color: #FFF;

	display: none;

}

.fstResultItem {

	font-size: 1.4em; display: block; padding: em(7,14) em(10,14); margin: 0;
	cursor: pointer; border-top: 1px solid #fff;

	&.fstUserOption {

		color: lighten($fstColorGrayDark1, 30%);

	}

	&.fstFocused {

		color: #fff; background-color: $fstColorMain1; border-color: lighten($fstColorMain1,10%);

	}

	&.fstSelected {

		color: #fff; background-color: darken($fstColorMain1,6%); border-color: lighten($fstColorMain1,10%);

	}

}

.fstGroupTitle {

	font-size: 1.4em; display: block; padding: em(7,14) em(10,14); margin: 0;
	font-weight: bold;

}

.fstGroup {

	padding-top: 1em;

	&:first-child { padding-top: 0; }

}

.fstNoResults {

	font-size: 1.4em; display: block; padding: em(10,14) em(10,14); margin: 0;
	color: #999;

}

/*----------------------------------------------------------------------------------------------------
Single Mode
----------------------------------------------------------------------------------------------------*/

.fstSingleMode {

	.fstControls {

		position: absolute; left: -1px; right: -1px; top: 100%; padding: 0.5em;
		border: 1px solid $fstColorGrayLight1; background-color: #fff;

		display: none;

	}

	.fstQueryInput {

		font-size: 1.4em; display: block; width: 100%; padding: em(7,14) em(5,14);
		color: #999; border: 1px solid $fstColorGrayLight1;

	}

	&.fstActive {

		z-index: 100;

		&.fstElement,
		.fstControls,
		.fstResults { box-shadow: 0 0.2em 0.2em rgba(#000, 0.1); }
		.fstControls { display: block; }
		.fstResults { display: block; z-index: 10; margin-top: -1px; }

	}

}

/*----------------------------------------------------------------------------------------------------
Multiple mode
----------------------------------------------------------------------------------------------------*/

.fstChoiceItem {

	display: inline-block; font-size: 1.2em; position: relative;
	margin: 0 em(5,12) em(5,12) 0; padding: em(4,12) em(4,12) em(4,12) em(18,12); float: left;
	border-radius: em(3,12); border: 1px solid $fstColorMain1;
	cursor: auto; color: #fff;
	background-color: $fstColorMain1;

	@include animation(fstAnimationEnter 0.2s);

	&.mod1 {

		background-color: #F9F9F9;	border: 1px solid $fstColorGrayLight1;
		color: $fstColorGrayDark1;

		> .fstChoiceRemove {

			color: darken($fstColorGrayLight1, 20%);

		}

	}

}

.fstChoiceRemove {

	$size: 18;
	$iconSize: 14;

	margin:0; padding: 0; border: 0; cursor: pointer; background: none;
    &::-moz-focus-inner { padding: 0; border: 0; }

    font-size: em($iconSize, 12); position: absolute; left: 0; top: 50%;
    width: em($size, $iconSize); line-height:em($size, $iconSize); margin-top: em(-$size/2, $iconSize);
    text-align: center; color: #fff;

}

.fstMultipleMode {

	.fstControls {

		box-sizing: border-box; padding: 0.5em 0.5em 0em 0.5em; overflow: hidden; width: em(200,10);
		cursor: text;

	}

	.fstQueryInput {

		font-size: 1.4em; float: left; padding: em(4,14) 0; margin: 0 0 em(5,14) 0; width: 2em;
		color: #999;

	}

	.fstQueryInputExpanded {

		float: none; width: 100%; padding: em(4,14) em(5,14);

	}

	.fstFakeInput {

		font-size: 1.4em;

	}

	&.fstActive {

		&,
		.fstResults {

			box-shadow: 0 0.2em 0.2em rgba(#000, 0.1);

		}

		.fstResults {

			display: block; z-index: 10; border-top: 1px solid $fstColorGrayLight1;

		}

	}

}