.dropdown {
	width: 280px;
	margin: 10px 0;
	font: 500 13px/30px Alegreya Sans;

	> div {
		position: relative;
		
		> .value {
			width: 100%;
			height: 32px;
			background: #11161c;
			padding: 0 22px 0 11px;
			margin: 0;
			color: #a19b8f;
			display: block;
			position: relative;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			border: 1px solid transparent;
			border-image: linear-gradient(to bottom, #c6a767 0%, #ad8736 10%, #9a7830 76%, #6d5024 100%);
			border-image-slice: 1;
			box-shadow: 0 0 1px black inset;

			&:hover {
				cursor: pointer;
			}

			&::before, &::after {
				position: absolute;
				content: "";
				height: 2px;
				width: 2px;
				border-width: 1px;
				border-style: solid;
				border-color: #c5a461 #c5a461 transparent transparent;
				right: 11px;
			}
			
			&::before {
				top: 11px;
				transform: rotate(-45deg);
			}
			
			&::after {
				bottom: 11px;
				transform: rotate(135deg);
			}
		}
	
		> .down {
			position: absolute;
			width: 100%;
			top: 32px;
			left: 0;
			z-index: 100;
			overflow: hidden;
			height: 1px;
			pointer-events: none;

			> div {
				position: relative;

				.gm-scroll-view > div {
					height: 32px;
					padding: 0 11px;
					line-height: 30px;
					color: #ccbe91;
					position: relative;
					
					&:not(:last-child) {
						height: 33px;
						border-bottom: 1px solid #1f282d;
					}
					
					&:hover {
						cursor: pointer;
						color: #f1e6d4;
						background: #1c2328;
					}
				
					&.active {
						&:after {
							content: "";
							position: absolute;
							top: 12px;
							right: 11px;
							width: 11px;
							height: 4px;
							border-width: 0 0 1px 1px;
							border-style: solid;
							border-color: #f1e6d4;
							transform: rotate(-45deg);
						}
					}
				}
			}
		}
	}
			
	&.active {
		> div {
			> .value {
				color: #524018;
				border-image: none;
				border-color: #524018;
				box-shadow: none;
			
				&::before, &::after {
					border-color: #524018 #524018 transparent transparent;
				}
			}
		
			> .down {
				transition: height 0.35s cubic-bezier(0.23, 1, 0.32, 1);
				pointer-events: all;
				display: block;
				border: 1px solid transparent;
				border-image: linear-gradient(to bottom, #524018 0%, #6d5024 100%);
				border-image-slice: 1;
				background: #11161c;
			}
		}
	}

	&.disabled {
		pointer-events: none;

		> div {
			> .value {
				color: #2b2f34;
				border-image: none;
				border-color: #2b2f34;
				box-shadow: none;
				background: transparent;
			
				&::before, &::after {
					border-color: #2b2f34 #2b2f34 transparent transparent;
				}
			}
		}
	}
	
	&.fullWidth {
		width: auto;
	}

	&.top {
		> div > .down {
			top: auto;
			bottom: 32px;
		}
	}

	&.top.active {
		> div > .down {
			border-image: linear-gradient(to bottom, #6d5024 0%, #524018 100%);
			border-image-slice: 1;
		}
	}
}
