.menu {
	padding: 0 0 20px;
	position: relative;
	display: inline-block;
}

.menu [type=button] {
	@include secondaryButton;
	border-radius: 0;

	&:after {
		background-repeat: no-repeat;
    background-image: url(/public/img/icon-arrow-black-down.svg);
    content: '';
    display: inline-block;
    height: 5px;
    margin-left: 10px;
    width: 10px;
    vertical-align: middle;
	}
}

.menu [type=button] span {
	font-size: 2em;
	position: relative;
	top: 0.1em;
	left: 2px;
	line-height: 0;
}

.menu-item {
	@include secondaryButton;
	border-radius: 0;
}

.menu [role=menuitem] {
	// @include button($colour-gray-100);
	display: block;
	text-align: left;
	width: 100%;
	color: $colour-gray-100;
	border-radius: 0;
	&:focus {
		position: relative;
		z-index: 10;
	}

	@media(min-width: 45em) {
		@include secondaryButton;
		border-radius: 0;
		border-bottom: none;
		width: auto;
		display: inline-block;
		vertical-align: top;
	}
}

.menu [role=menu] {
	width: 10em;
}

.menu [role=menu] {
	position: absolute;
	top: 50px;
	@media(min-width: 45em) {
		width: auto;
		position: static;
	}
}

.menu [aria-expanded="true"] + [role=menu] {
	display: block;
}

.menu [aria-expanded="false"] + [role=menu] {
	display: none;
}
