.wp-block-coblocks-row {
	position: relative;

	// Don't use flexbox if the row is 1 column, 100% wide.
	&:not([data-columns="1"]) {
		display: flex;

		.wp-block-coblocks-row__inner {
			display: flex;
			flex: 1;
		}
	}
}

.wp-block-coblocks-row[data-columns="1"] .wp-block-coblocks-column__inner {

	> [class*="wp-block-"] {
		margin-left: auto;
		margin-right: auto;
		max-width: calc(6 * (100vw / 12.5));

		&.alignwide {
			max-width: calc(6 * (100vw / 8.5));
		}

		&.alignfull {
			max-width: 100%;
		}

		&[data-columns="1"] {

			.wp-block-coblocks-column__inner {

				> :not([class*="wp-block-"]) {
					max-width: 100%;
				}
			}
		}
	}

	> :not([class*="wp-block-"]) {
		margin-left: auto;
		margin-right: auto;
		max-width: 100%;
	}
}

.wp-block-coblocks-column {
	height: 100%;
	margin-bottom: $grid-unit-40;

	// Prevent the columns from growing wider than their distributed sizes.
	min-width: 0;

	// Prevent long unbroken words from overflowing.
	overflow-wrap: break-word; // New standard.
	position: relative;
	word-break: break-word; // For back-compat.

	// Beyond mobile, allow 2 columns.
	@include break-small() {
		margin-bottom: 0;
	}

	p {
		margin-top: 0;

		&:last-of-type {
			margin-bottom: 0;
		}
	}

	&__inner.has-background-overlay * {
		position: relative;
	}
}

.has-small-gutter {

	> [class*="wp-block-coblocks-column"] {

		&:nth-child(odd) {
			margin-right: var(--coblocks-spacing--1, map-get($spacing, 1));
		}

		&:nth-child(even) {
			margin-left: var(--coblocks-spacing--1, map-get($spacing, 1));
		}

		&:not(:first-child) {
			margin-left: var(--coblocks-spacing--1, map-get($spacing, 1));
		}

		&:not(:last-child) {
			margin-right: var(--coblocks-spacing--1, map-get($spacing, 1));
		}
	}
}

.has-medium-gutter {

	> [class*="wp-block-coblocks-column"] {

		&:nth-child(odd) {
			margin-right: var(--coblocks-spacing--2, map-get($spacing, 2));
		}

		&:nth-child(even) {
			margin-left: var(--coblocks-spacing--2, map-get($spacing, 2));
		}

		&:not(:first-child) {
			margin-left: var(--coblocks-spacing--2, map-get($spacing, 2));
		}

		&:not(:last-child) {
			margin-right: var(--coblocks-spacing--2, map-get($spacing, 2));
		}
	}
}

.has-large-gutter {

	> [class*="wp-block-coblocks-column"] {

		&:nth-child(odd) {
			margin-right: var(--coblocks-spacing--3, map-get($spacing, 3));
		}

		&:nth-child(even) {
			margin-left: var(--coblocks-spacing--3, map-get($spacing, 3));
		}

		&:not(:first-child) {
			margin-left: var(--coblocks-spacing--3, map-get($spacing, 3));
		}

		&:not(:last-child) {
			margin-right: var(--coblocks-spacing--3, map-get($spacing, 3));
		}
	}
}

.has-huge-gutter {

	> [class*="wp-block-coblocks-column"] {

		&:nth-child(odd) {
			margin-right: var(--coblocks-spacing--4, map-get($spacing, 4));
		}

		&:nth-child(even) {
			margin-left: var(--coblocks-spacing--4, map-get($spacing, 4));
		}

		&:not(:first-child) {
			margin-left: var(--coblocks-spacing--4, map-get($spacing, 4));
		}

		&:not(:last-child) {
			margin-right: var(--coblocks-spacing--4, map-get($spacing, 4));
		}
	}
}

.has-custom-gutter {

	> [class*="wp-block-coblocks-column"] {

		&:nth-child(odd) {
			margin-right: var(--coblocks-custom-gutter, 0);
		}

		&:nth-child(even) {
			margin-left: var(--coblocks-custom-gutter, 0);
		}

		&:not(:first-child) {
			margin-left: var(--coblocks-custom-gutter, 0);
		}

		&:not(:last-child) {
			margin-right: var(--coblocks-custom-gutter, 0);
		}
	}
}

.wp-block-coblocks-row__inner.is-stacked-on-mobile {

	@include break-small-max() {
		flex-direction: column;

		> .wp-block-coblocks-column {
			margin-left: 0 !important;
			margin-right: 0 !important;
			max-width: 100% !important;
			width: 100% !important;

			&:last-child {
				margin-bottom: 0;
			}
		}

		&.has-no-gutter > [class*="wp-block"]:not(:last-child) {
			margin-bottom: 0;
		}

		&.has-small-gutter > [class*="wp-block"]:not(:last-child) {
			margin-bottom: calc(var(--coblocks-spacing--1, #{map-get($spacing, 1)}) * 2);
		}

		&.has-medium-gutter > [class*="wp-block"]:not(:last-child) {
			margin-bottom: calc(var(--coblocks-spacing--2, #{map-get($spacing, 2)}) * 2);
		}

		&.has-large-gutter > [class*="wp-block"]:not(:last-child) {
			margin-bottom: calc(var(--coblocks-spacing--3, #{map-get($spacing, 3)}) * 2);
		}

		&.has-huge-gutter > [class*="wp-block"]:not(:last-child) {
			margin-bottom: calc(var(--coblocks-spacing--4, #{map-get($spacing, 4)}) * 2);
		}

		&.has-custom-gutter > [class*="wp-block"]:not(:last-child) {
			margin-bottom: calc(var(--coblocks-custom-gutter, 0) * 2);
		}
	}
}

/**
 * Row and Column Alignment
 */
.wp-block-coblocks-row__inner {

	[data-type="coblocks/column"] {
		display: flex;
		margin-bottom: 0;
		margin-top: 0;

		.wp-block-coblocks-column,
		.wp-block-coblocks-column__inner {
			flex: 1;
		}
	}

	&.are-vertically-aligned-top {
		align-items: flex-start;
	}

	&.are-vertically-aligned-center {
		align-items: center;
	}

	&.are-vertically-aligned-bottom {
		align-items: flex-end;
	}

	.wp-block-coblocks-column {

		&.is-vertically-aligned-top {
			display: flex;

			.wp-block-coblocks-column__inner {
				align-self: flex-start;
			}
		}

		&.is-vertically-aligned-center {
			display: flex;

			.wp-block-coblocks-column__inner {
				align-self: center;
			}
		}

		&.is-vertically-aligned-bottom {
			display: flex;

			.wp-block-coblocks-column__inner {
				align-self: flex-end;
			}
		}

		.wp-block-coblocks-column__inner {
			flex: 1;
		}

		&.is-vertically-aligned-top,
		&.is-vertically-aligned-center,
		&.is-vertically-aligned-bottom {
			width: 100%;
		}
	}
}
