//----------------------------------------------------------------------------------------------------------------------
// HIDDEN
//----------------------------------------------------------------------------------------------------------------------

/// Hide an element.
/// @group base
.hidden {
	display: none !important;
}

// Viewport classes
@each $size, $breakpoint in (
	"s": $breakpoint-s,
	"m": $breakpoint-m,
	"l": $breakpoint-l,
	"switch": $breakpoint-switch
) {

/// Hide an element only until a specific viewport size is reached
/// @name .hidden-until-[s|m|l|nav]
/// @group base
	.hidden-until-#{$size} {
		@include media("<", $breakpoint) {
			display: none !important
		}
	}


/// Hide an element only for a specific viewport size and up
/// @name .hidden-[s|m|l|nav]
/// @group base
	.hidden-#{$size} {
		@include media(">=", $breakpoint) {
			display: none !important
		}
	}
}