/**
 * Container
 **/
.ur-container,
.ur-container-full {
	@include create-container();
}

// Responsive containers that are 100% wide until a breakpoint
@each $breakpoint, $container-max-width in $container-max-widths {
	.ur-container-#{$breakpoint} {
		@extend .ur-container-full;
	}

	@include media-breakpoint-up($breakpoint, $grid-breakpoints) {
		%responsive-container-#{$breakpoint} {
			max-width: $container-max-width;
		}

		// Extend each breakpoint which is smaller or equal to the current breakpoint
		$extend-breakpoint: true;

		@each $name, $width in $grid-breakpoints {
			@if ($extend-breakpoint) {
				.ur-container#{breakpoint-infix($name, $grid-breakpoints)} {
					@extend %responsive-container-#{$breakpoint};
				}

				// Once the current breakpoint is reached, stop extending
				@if ($breakpoint == $name) {
					$extend-breakpoint: false;
				}
			}
		}
	}
}

/**
 * Row
 **/
.ur-row {
	@include create-row();
}

/**
 * Columns
 **/
@include make-grid-columns();