.dropdown-field {
	@include noselect();
	font-size: 13px;
	font-weight: 800;
	font-family: "Overpass";
	position: relative;
	display: inline-block;

	.label {
		.icon {
			padding-right: 8px;
		}

		&:not(.button) {
			@include animate();
			padding: 14px 10px;
			cursor: pointer;

			.notouch &:hover {
				color: $blue;
			}
		}
	}

	&.expanded {
		.label:not(.button) {
			color: $blue;
		}
		.options {
			display: block;
		}
	}

	&.no-status-icon {
		.options {
			.option {
				padding-left: 12px;
			}
		}
	}

	&.no-label {
		.label > .text {
			display: none;
		}
	}

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

		&:before {
			content: '';
			display: block;
			width: 6px;
			height: 6px;
			background: $white;
			-ms-transform: rotate(45deg);
			-webkit-transform: rotate(45deg);
			transform: rotate(45deg);
			position: absolute;
			top: -3px;
			right: 9px;
		}

		& > .liner {
			color: $black;
			background: $white;
			min-width: 120px;
			max-height: 70vh;
			overflow-y: auto;
			border-radius: 3px;

			.option {
				@include animate();
				position: relative;
				padding: 9px 12px 8px 24px;
				cursor: pointer;
				color: $black;
				
				&: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));
				}

				.icon {
					position: absolute;
					top: 8px;
					left: 6px;
					font-size: 16px;
				}

				.notouch &:hover {
					color: $black;

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