// NGN Chassis
// Helper Classes --------------------------------------------------------------

// Hide element
.hidden {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
}

// Font weights
.thin-weight {
	font-weight: $thin !important;
}

.light-weight {
	font-weight: $light !important;
}

.regular-weight {
	font-weight: $regular !important;
}

.semibold-weight {
	font-weight: $semibold !important;
}

.bold-weight {
	font-weight: $bold !important;
}

.ultra-weight {
	font-weight: $ultra !important;
}

// Font Styles
.normal-style {
	font-style: normal !important;
}

.italic-style {
	font-style: italic !important;
}

// @mixin width-constraint
// Limit width of a container to the min and max UI widths
// <div class="width-constraint"> can be placed as the first child element of any
// full-width container to constrain the width of the contents to the min/max UI
// width. Horizontal padding is added via $gutter
@mixin width-constraint($min-width: $ui-min-width, $max-width: $ui-max-width, $gutter: $ui-gutter, $has-padding: true) {
	width: 100%;
	min-width: $min-width !important;
	max-width: $max-width !important;
	margin: 0 auto;

	@if $has-padding {
		padding: {
	    left: $gutter;
	    right: $gutter;
	  }

		// Prevent vw padding from shrinking at viewport widths below minimum ui width
		@media screen and (max-width: $min-width) {
			@if unit($min-width) != 'rem' {
	      @if unit($min-width) == 'px' {
					padding: {
						left: round((strip-units($min-width) * (strip-units($gutter) / 100)) * 1px);
						right: round((strip-units($min-width) * (strip-units($gutter) / 100)) * 1px);
				  }
	      } @else {
	        @warn '#{unit($min-width)} cannot be used as a unit for $ui-min-width. Please use rem or px instead.';
	      }
	    } @else {
				padding: {
					left: round(((strip-units($min-width) * strip-units($typography-base)) * (strip-units($gutter) / 100)) * 1px);
					right: round(((strip-units($min-width) * strip-units($typography-base)) * (strip-units($gutter) / 100)) * 1px);
			  }
			}
		}

		// Prevent vw padding from enlarging at viewport widths above maximum ui width
		@media screen and (min-width: $max-width) {
			@if unit($max-width) != 'rem' {
	      @if unit($max-width) == 'px' {
					padding: {
						left: round((strip-units($max-width) * (strip-units($gutter) / 100)) * 1px);
						right: round((strip-units($max-width) * (strip-units($gutter) / 100)) * 1px);
				  }
	      } @else {
	        @warn '#{unit($max-width)} cannot be used as a unit for $ui-max-width. Please use rem or px instead.';
	      }
	    } @else {
				padding: {
					left: round(((strip-units($max-width) * strip-units($typography-base)) * (strip-units($gutter) / 100)) * 1px);
					right: round(((strip-units($max-width) * strip-units($typography-base)) * (strip-units($gutter) / 100)) * 1px);
			  }
			}
		}
	}
}

%width-constraint {
	@include width-constraint;
}

.width-constraint {
	@extend %width-constraint;
}