/**
 * Add box sizing to all the things
 */
.dropdown * {
	box-sizing: border-box;
}

/**
 * Style the clickable text
 * Add your own styles to match other navigation items
 */
.dropdown > summary {
	cursor: pointer;
	/* Customize from here down */
	color: blue;
}

/**
 * Position the dropdown content
 */
.dropdown {
	display: inline-block;
	position: relative;
}

.dropdown > ul {
	background-color: $color-white;
	border: 1px solid darken($color-gray-light, 9%);
	border-radius: 0.25em;
	list-style: none;
	margin: 0;
	padding: 0;
	min-width: 19em;
	position: absolute;
	top: 1.5em;
	z-index: 999;
}

.dropdown-right > ul {
	right: 0;
}

/**
 * Style the dropdown menu links
 */
.dropdown > ul > li > a {
	display: inline-block;
	padding: 0.3125em 0.5em;
	width: 100%;

	&:hover {
		background-color: $color-gray-lighter;
	}
}

/**
 * @bugfix Prevent webkit from removing list semantics
 * 1. Add a non-breaking space
 * 2. Make sure it doesn't mess up the DOM flow
 */
.dropdown > ul > li:before {
	content: "\200B"; /* 1 */
	position: absolute; /* 2 */
}