@use "../abstracts/mixins";

.site-container {
	display: flex;
	flex-direction: column;
	flex: 1;
	width: 100%;
	max-width: var(--site-container-max-width, unset);
	margin: var(--site-container-margin, unset);
	background: var(--site-container-background, unset);
}

.has-boxed-container {
	--site-container-background: var(--color-white);

	&.has-before-header {
		--site-container-margin-top: 0;
	}

	@include mixins.mq(xl) {
		--site-container-max-width: var(--breakpoint-xl);
		--site-container-margin: var(--site-container-margin-top, var(--spacing-md)) var(--site-container-margin-sides, auto) var(--site-container-margin-bottom, var(--spacing-md));

		&.has-transparent-header {
			--site-container-margin-top: 0;
		}
	}
}