// Helper Classes
// These classes can be injected with javascript

// Add !important to rules that absolutely must overwrite any other styles.
//------------------------------------------------------------------------------

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

// Limit width of a container to the min and max UI widths
// <div class="width-constraint"> should be placed inside elements that span the
// full width of the viewport to maintain proper UI dimensions

// For  elements that need to be constrained to the max UI width
// (e.g. inner containers on top-level elements, etc.)
.width-constraint {
	width: 100%;
	min-width: $ui-min-width !important;
	max-width: $ui-max-width !important;
	margin: 0 auto;
	padding: {
		left: $ui-gutter-mobile;
		right: $ui-gutter-mobile;
	}

	@include min-screen-size(medium) {
		padding: {
			left: $ui-gutter-desktop;
			right: $ui-gutter-desktop;
		}
	}
}

// Constrain width to UI min and max
@mixin constrain-width {
  @extend .width-constraint;
}

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