@use "../abstracts/mixins";

.content {
	width: 100%;
	max-width: var(--content-max-width); // Default set in global.
	margin: var(--content-margin, var(--content-margin-top, 0) var(--content-margin-sides, auto) var(--content-margin-bottom, 0));
	// padding: var(--content-padding, 0);
	// background: var(--content-background);

	@include mixins.mq(lg) {
		order: var(--content-order, 0);
	}
}

// TODO: Is this used?
.has-full-content {
	--content-max-width: 100%;
}

.has-wide-content {
	--content-max-width: var(--breakpoint-xl);
}

.has-standard-content {
	--content-max-width: var(--breakpoint-md);
}

.has-narrow-content {
	--content-max-width: var(--breakpoint-sm);
}

.has-content-sidebar,
.has-sidebar-content {
	--content-max-width: unset;
}

.has-sidebar-content {
	--content-order: 1;
}