@mixin rh-secondary-nav-item($background-color: $white, $linkcolor: $black, $link-font-size: 18, $border-color: $grey-light){

   	display: flex;
	align-items: center;
	width: 100%;
	padding: $space-5; //em(20);
	background-color: $background-color;
	border-bottom: $border-thin--standard $border-color;
	border-left: $border-thin--standard $border-color;
	border-right: $border-thin--standard $border-color;

	&:first-child{
		border-top: $border-thin--standard $border-color;
	}

	.rh-secondary-nav-link{
		font-size: em($link-font-size);
 		color: $linkcolor;
		text-decoration: none;
	}
}

.rh-secondary-nav {

	.rh-secondary-nav-item-toplevel{
	   	@include rh-secondary-nav-item();
	   	&:active, &:hover{
			background-color: $base3-light;
		}
	}

	.rh-secondary-nav-item-parentlevel{
	   	@include rh-secondary-nav-item($color-primary, $white, 20, $color-primary);
	   	&:active, &:hover{
		}
	}

	.rh-secondary-nav-item-toplevel-subsides{
	   	@include rh-secondary-nav-item();
		.rh-secondary-nav-item-icon {
	        margin-left: auto;
			&:after {
				margin-left: $space-3; //em(10);
				padding: $space-2; //em(8);
				background: $grey-lightest;
				border-radius: 50%;
				font-weight: normal;
		    	font-family: $icon--font-family;
		    	content: "\e8b1";
				font-size: $p-small;
				@include medium { font-size: $p-medium;}
				@include large { font-size: $p-large;}
			}
		}

	   	&:active, &:hover{
			background-color: $base3-light;
			.rh-secondary-nav-item-icon {
		        margin-left: auto;
				&:after {
					margin-left: $space-3; //em(10);
					padding: $space-2; //em(8);
					background: $white;
					border-radius: 50%;
					font-weight: normal;
			    	font-family: $icon--font-family;
			    	content: "\e897";
					font-size: $p-small;
					@include medium { font-size: $p-medium;}
					@include large { font-size: $p-large;}
				}
			}
		}
	}

	.rh-secondary-nav-item-sublevel{
	   	@include rh-secondary-nav-item($grey-lightest);
		border-left: $border-thin--xl $color-primary;
	   	&:active, &:hover{}
	}
}