// ============================================================================
// :: Container
// ============================================================================
/**
 * The container is used to create a maximum width an any element and center it
 * based on its maximum width or the screen width. It is a simple layout, of
 * which its modifiers manipulate mainly to position on the screen (left, right,
 * center) or its maximum width.
 */

// ============================================================================
// :: Settings
// ============================================================================
.l-container {
	width: calc(100% - 4rem);
	max-width: $container-width;
	margin: 0 auto;
}

// ============================================================================
// :: Modifiers
// ============================================================================
.l-container-1x-s {
	width: calc(100% - 5rem);
	max-width: $container-width-small;

	margin: 0 auto;
}

.l-container-2x-s {
	width: calc(100% - 5rem);
	max-width: $container-width-extra-small;
	margin: 0 auto;
}

.l-container--stretch {
	width: 100%;
	max-width: 144rem;
}

.l-container--center {
	display: flex;
	flex-direction: column;
	align-items: center;

	text-align: center;
}

.l-container--large {
	width: 100%;
	max-width: 160rem;
}

.l-container--full-width {
	width: 100%;
	max-width: 100vw;

	.l-container__left {
		padding-left: calc((100vw - #{$container-width}) / 2);
	}

	.l-container__right {
		padding-right: calc((100vw - #{$container-width}) / 2);
	}
}