Iris/src/scss/components/_dropdown-field.scss

.dropdown-field {
	font-size: 13px;
	font-weight: 600;
	font-family: "Overpass";
	position: relative;
	display: inline-block;

	.label {
		padding: 14px 10px;		
		cursor: pointer;
	}

	&.expanded {
		.label {
			color: $blue;
		}
		.options {
			display: block;
		}
	}

	.options {
		color: $grey;
		position: absolute;
		top: 46px;
		right: 10px;
		z-index: 97;
		background: $white;
		display: none;
		box-shadow: 2px 3px 6px rgba(0,0,0,0.2);
		border-radius: 3px;

		&:before {
			content: '';
			display: block;
			position: absolute;
			top: -6px;
			right: 10px;
			background: $white;
			width: 0;
			height: 0;
			border-left: 5px solid transparent;
			border-right: 5px solid transparent;
			border-bottom: 6px solid $light_grey;
		}

		.option {
			@include animate();
			position: relative;
			padding: 9px 12px 8px 24px;
			cursor: pointer;
			
			&:before {
				@include animate();
				content: '';
				display: block;
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				opacity: 0;
				z-index: 9;
				background: -webkit-linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
				background: -moz-linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
				background: -o-linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
				background: linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
			}

			.fa {
				position: absolute;
				top: 9px;
				left: 8px;
				font-size: 10px;
			}

			&:hover {
				color: $black;

				&:before {
					opacity: 0.15;
				}
			}
		}
	}
}