// ==========================================================================
// Dropdown menu mixin
// Turn a list into a dropdown menu
// ==========================================================================

@mixin dropdown-menu {
	display: none;
	background: var(--color-surface);
	float: none;
	line-height: 46px;
	min-width: 220px;
	overflow: visible;
	padding: 0;
	position: absolute;
	width: auto;
	z-index: 1;
	box-sizing: border-box;
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.15), 0 3px 8px rgba(0, 0, 0, 0.1);

	&::after {
		border: 6px solid transparent;
		border-bottom-color: var(--color-border-inverted);
		content: " ";
		height: 0;
		position: absolute;
		top: -12px;
		left: 73px;
		width: 0;
	}

	li {
		display: block;
		float: none;

		a,
		a.selected {
			border-bottom: 1px solid rgba(0, 0, 0, 0.1);
			color: var(--color-primary);
			display: block;
			float: none;
			height: auto;
			margin: 0;
			padding: 0 14px;
			text-align: left;

			&:hover {
				border-bottom: 1px solid rgba(0, 0, 0, 0.1);
				background: none; // Remove inherited background color
				color: var(--color-link-dark);
				box-shadow: none; // Remove inherited box shadow
			}
		}

		a.selected {
			color: var(--color-text);
		}

		&:last-child a {
			border-bottom: none; // Last child in the dropdown doesn't need a bottom border
		}
	}
}
