@import '../variables';

.alternate-menu {
	display:flex;
	flex-flow: column nowrap;
	cursor:pointer;

	&-label {
		border: 2px solid $dark-grey;
		border-radius:4px;
		padding: 0 8px;
		color: $dark-grey;
		transition: all 200ms ease;
		text-transform: uppercase;
		background: $white;

		&:hover {
			@include themify() {
				background-color: $theme-background;
				color: $theme-color;
				border-color: $theme-background;
			}
		}
	}

	&-list {
		display:none;
	}

	&:hover &-list {
		display:flex;
		flex-flow: column nowrap;
	}
}

.alternate {
	background-color: $lightest-grey;
	border-radius:4px;
	color:$dark-grey;
	height: 56px;
	padding: 5px;
	padding-bottom: 0;
	text-align:center;
	margin-bottom:5px;
	width: 96px;

	&:hover {
		background-color:$green;
	}
}
