.font-select {
	width: 300px;
	position: relative;
	display: inline-block;
	border: 1px solid #bbb;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	background: #ffffff;
	border-radius: 3px;

	.fs-drop {
		border-top: 0;
		position: absolute;
		top: 36px;
		left: -1px;
		z-index: 999;
		border: 1px solid #bbb;
		box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
		background: #ffffff;
		border-radius: 0 0 3px 3px;
	}

	>a {
		max-width: 100%;
		width: 100%;
		display: block;
		margin: 0;
		outline: none;
		padding: .3em .8em .5em .8em;
		box-sizing: border-box;
		height: 36px;
		background: transparent;
		color: #32373c;
		box-shadow: inset 0 1px 2px rgba(0,0,0,.07);

		span {
			padding: 3px 0;
			display: block;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			line-height: 1.7;
			cursor: pointer;
			font-size: 14px;
		}

		div {
			position: absolute;
			right: 0;
			top: 0;
			display: block;
			height: 100%;
			width: 18px;

			b {
				width: 0;
				height: 0;
				border-left: 4px solid transparent;
				border-right: 4px solid transparent;
				border-top: 7px solid #666;
				margin-top: -3px;
				content: " ";
				position: absolute;
				top: 50%;
				right: 1em;
				z-index: 2;
				pointer-events: none;
			}
		}
	}

	.fs-results {
		margin: 0 0 4px 0;
		max-height: 190px;
		width: 300px;
		padding: 0;
		position: relative;
		overflow-x: hidden;
		overflow-y: auto;

		li {
			line-height: 80%;
			padding: 7px 7px 8px;
			margin: 0;
			list-style: none;
			font-size: 16px;
			line-height: 1.3;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;

			em {
				background: #feffde;
				font-style: normal;
			}
		}

		li.active {
			background: $brand-color;
			color: #fff;
			cursor: pointer;

			em {
				background: transparent;
			}
		}
	}
}

.font-select-active {
	background: #f3f3f3;

	>a {
		box-shadow: 0 0 5px rgba(0,0,0,.3);

		div {
			b {
				border-top: 0 none;
				border-bottom: 7px solid #666;
				margin: -3px 0 0;
			}
		}
	}
}