.dropdown-field {
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	position: relative;
	display: inline-block;

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

	&.expanded {
		.label {
			background: $dark_grey;
			color: #FFFFFF;
		}
		.options {
			display: block;
		}
	}

	.options {
		color: #FFFFFF;
		position: absolute;
		top: 52px;
		right: 0px;
		z-index: 97;
		background: $dark_grey;
		display: none;

		.option {
			position: relative;
			padding: 6px 14px 6px 30px;
			border-top: 1px solid lighten($dark_grey, 10%);
			cursor: pointer;

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

			&:hover {
				background: lighten($dark_grey, 10%);
			}
		}
	}

	@include responsive( $bp_medium ){
		&.expanded {
			background: none !important;
			color: inherit !important;
		}

		.label {
			background: none !important;
			color: inherit !important;

			.fa {
				display: none;
			}
		}

		.options {
			display: block;
			position: relative;
			top: 0;
			background: lighten($light_grey,5%);

			.option {
				color: #000000;
				border-color: $light_grey;
				background: none !important;
			}
		}
	}
}