@keyframes menufade {
	from { transform: scale(0.8); opacity: 0; } 
	to { transform: scale(1); opacity: 1; }
}

.drop-wrap {
	z-index: 50;
	pointer-events: all;
}

.drop-menu {
	position: absolute;

	font-family: "Header";
	border: 1px solid;
	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);

	animation: 0.15s menufade;
}

.drop-menu.top.right {
	transform-origin: right top;
}

.drop-menu.top.left {
	transform-origin: left top;
}

.drop-menu.bottom.right {
	transform-origin: right bottom;
}

.drop-menu.bottom.left {
	transform-origin: left bottom;
}

.drop-menu.hidden {
	transform: scale(0.8);
	opacity: 0;
	transition: 0.15s transform, 0.15s opacity;
}

.drop-menu-item {
	padding: 1px;
	font-size: 1em;
	border-bottom: 1px solid;
	cursor: pointer;
	white-space: nowrap;

	transition: 0.5s background-color;
}

.drop-menu-item:last-child {
	border-bottom: none;
}

/* Color-specific */

/* -- Blue -- */

[data-color="blue"] .drop-menu {
	background-color: rgba(3, 4, 15, 1);
	color: #EFF2FA;
	border-color: #444;
}

[data-color="blue"] .drop-menu-item {
	border-color: #333;
}

[data-color="blue"] .drop-menu-item:hover {
	background-color: rgba(255, 255, 255, 0.1);
}

/* -- Orange -- */

[data-color="orange"] .drop-menu {
	background-color: #0E0900;
}

[data-color="orange"] .drop-menu-item:hover {
	background-color: rgba(255, 170, 34, 0.1);
}