//----------------------------------------------------------------------------------------------------------------------
// SUBNAV
//----------------------------------------------------------------------------------------------------------------------

/// Sub-navigation.
/// @group layout
.subnav {
	overflow: hidden;
	height: 0;

	&.active {
		height: auto;
	}

	// Desktop nav
	@include media(">", $breakpoint-switch) {
		position: absolute;
		background: $color-canvas;
	}
}

// Subnav list
.subnav-list {
	display: block;
}

// Subnav list item
.subnav-item {
	display: block;
}

// Subnav link
.subnav-link {
	@extend %viewport-padding;
	display: block;
	@include padding(rhythm(1) null);

	// Desktop nav
	@include media(">", $breakpoint-switch) {
		padding: rhythm(0.5 1);
	}
}