// Fix pattern inserter preview for fullwidth container blocks
.block-editor-block-list__layout.is-root-container > .fullwidth {
	max-width: none !important;
}

// Default outer spacing
@include breakpoint(sm) {
	:root {
		--global--grid-gap: #{2 * $s-7};
	}
}

@include breakpoint(lg) {
	:root {
		--global--grid-gap: #{2 * $s-9};
	}
}

@include breakpoint(xl) {
	:root {
		--global--grid-gap: #{2 * $s-6};
	}
}

/* Alignments and block widths */
[class*="wp-container-"].wp-block-template-part,
[class*="wp-container-"] .wp-block-post-author,
[class*="wp-container-"] .wp-block-post-comments-link,
[class*="wp-container-"] .wp-block-post-featured-image {
	margin-top: 0;
}

.wp-site-blocks > * + * {
	margin-top: 0;
}

[class*="wp-container-"] {
	.wp-block-group,
	.wp-block-post-author,
	.wp-block-post-comments-link,
	.wp-block-post-featured-image {
		margin-top: 0;
	}
}
.page-template-woocommerce-default .wp-block-group.entry-header,
.wp-block-group.alignfull,
.wp-block-group.alignfull .wp-block-group.alignfull,
.site-footer .footer-content {
	padding-left: var(--global--content--padding--left);
	padding-right: var(--global--content--padding--right);
}

.wp-block-template-part,
.wp-block-group.alignfull .wp-block-group.alignwide {
	padding-left: 0;
	padding-right: 0;
}

.wp-block-group.alignfull > .alignfull,
*[class*="wp-container-"] > .alignfull {
	margin-left: calc(-1 * var(--global--content--padding--left)) !important;
	margin-right: calc(-1 * var(--global--content--padding--right)) !important;
	width: calc( 100% + var(--global--content--padding--left) + var(--global--content--padding--right)) !important;
}

.wp-block-group.alignfull {

	.default-content-width {
		@include push--auto;
		padding-left: 0;
		padding-right: 0;
	}
}

.entry-content > * {

	&.alignwide {
		max-width: var(--global--max-content-width);
	}

	.aligncenter {
		clear: both;
		@include push--auto;
	}
}

// Default post width
.entry-content.post-width > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce) {
	@include push--auto;
	width: calc(100% - var(--global--grid-gap));
	max-width: var(--global--default-content-width);
}

// Outer content padding
.site-header__wrap,
.theme-aino .site-header__wrap.has-background,
.site-header-wrap,
.theme-aino .site-header-wrap.has-background,
.content-gap,
.wp-block-group.has-background.content-gap {
	padding-left: var(--global--content--padding--left);
	padding-right: var(--global--content--padding--right);
}

.site-header-wrap.has-background {
	padding-top: 0;
	padding-bottom: 0;
}

/* Centered elements */
.push-center,
.center {
	@include push--auto;
}

/* Padding top and padding bottom for blocks */
.has-padding-top {
	@include s-r-14 (padding-top);
}

.has-padding-bottom {
	@include s-r-14 (padding-bottom);
}

/* Default wide page width */
.site-main {
	.site-content {
		max-width: var(--global--max-content-width);
		@include push--auto;
	}
}

/* Default content width */
.single-post .entry-content>*,
.page-template-default .entry-content>*,
.single .entry-tags,
.comment-list,
.comment-respond,
.authorbox__details,
.author-pic-link,
.default-content-width {
	max-width: var(--global--default-content-width);
}

/* Alignwide and fullwidth Content widths */
.entry-content>*.alignwide {
	max-width: var(--global--wide-content-width);
	@include push--auto;
}

.alignwide {
	max-width: var(--global--wide-content-width);
	@include push--auto;
}

/* Grid Columns */
.posts-container {
	@include flexbox;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: flex-start;
}

.col,
.posts-container .type-page,
.posts-container .type-post {
	position: relative;
}

/* Blog Post Columns */
/* 1-Column */
.blog-1-column .posts-container .type-page,
.blog-1-column .posts-container .type-post,
.footer-1-column .footer-widget {
	width: 100%;
	flex-grow: 0;
	flex-basis: 100%; // 1-column on mobile
	clear: both;
	float: none;
}

.blog-1-column .posts-container .hentry {
	width: 100%;
	float: none;
}

/* 2-Column grid tablet */
@include breakpoint(sm) {

	.two-col-grid-tablet {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 2rem;
	}
}

@include breakpoint(lg) {

	.two-col-grid-tablet {
		display: block;
	}
}

// Flexbox Container (under development)
.flexbox {
	display: flex;

	.flex-direction {

		&__row {
		flex-direction: row;
		}

		&__row-reverse {
			flex-direction: row-reverse;
		}

		&__column {
			flex-direction: column;
		}

		&__column-reverse {
			flex-direction: column-reverse;
		}
	}

	.justify-content {

		&__flexstart {
			justify-content: flex-start;
		}


		&__flexend {
			justify-content: flex-end;
		}

		&__center {
			justify-content: center;
		}

		&__space-between {
			justify-content: space-between;
		}

		&__space-around {
			justify-content: space-around;
		}

		&__space-evenly {
			justify-content: space-evenly;
		}
	}
}

// Width classes for flex items, workaround
@include breakpoint(lg) {
	.desktop__width__50 {
	width: 50%;
	}
	.desktop__width__55 {
		width: 55%;
		}
	.desktop__width__60 {
		width: 60%;
	}
	.desktop__width__40 {
		width: 40%;
	}
	.desktop__width__45 {
		width: 45%;
	}
}