@use "newspack-colors" as np-colors;
@use "../../../shared/sass/variables";
@use "../../../shared/sass/mixins";

body:not(.is-block-theme) div.wp-block-columns {
	gap: 32px;

	&.is-style-borders {
		gap: 64px;
	}

	@include mixins.media( tabletonly ) {
		&.is-not-stacked-on-mobile {
			gap: 20px;

			&.is-style-borders {
				gap: 40px;
			}
		}
	}
}

.wp-block-columns {
	@include mixins.media( tablet ) {
		&.is-style-first-col-to-second > .wp-block-column:nth-child(2) {
			order: -1;
		}

		&.is-style-first-col-to-third {
			> .wp-block-column:nth-child(2),
			> .wp-block-column:nth-child(3) {
				order: -1;
			}
		}
	}

	&.is-style-borders {
		> .wp-block-column {
			position: relative;

			&::after {
				border: 0 solid np-colors.$neutral-300;
				border-top-width: 1px;
				bottom: -32px;
				content: "";
				left: 0;
				position: absolute;
				right: 0;
			}

			&:last-child::after {
				display: none;
			}

			@include mixins.media( tablet ) {
				margin-bottom: 0;

				&::after {
					border-right-width: 1px;
					border-top-width: 0;
					inset: 0 -32px 0 auto;
				}
			}
		}

		@include mixins.media( tablet ) {
			&.is-style-first-col-to-second,
			&.is-style-first-col-to-third {
				> .wp-block-column:first-child::after {
					display: none;
				}
			}

			&.is-style-first-col-to-second > .wp-block-column:nth-child(2)::after,
			&.is-style-first-col-to-third > .wp-block-column:nth-child(3)::after {
				display: block;
			}
		}
	}

	&.is-not-stacked-on-mobile {
		&.is-style-borders {
			> .wp-block-column {
				&::after {
					border-right-width: 1px;
					border-top-width: 0;
					inset: 0 -20px 0 auto;

					@include mixins.media( tablet ) {
						right: -32px;
					}
				}
			}

			&.is-style-first-col-to-second,
			&.is-style-first-col-to-third {
				> .wp-block-column:first-child::after {
					display: none;
				}
			}

			&.is-style-first-col-to-second > .wp-block-column:nth-child(2)::after,
			&.is-style-first-col-to-third > .wp-block-column:nth-child(3)::after {
				display: block;
			}
		}
	}
}

/**
 * Temporary WP<6.0 styles
 * TODO: These styles can be removed once WP 6.0 is released.
 */

/* stylelint-disable no-duplicate-selectors  */
.wp-block-columns {
	&.is-not-stacked-on-mobile,
	&:not(.is-not-stacked-on-mobile) {
		> .wp-block-column:not(:first-child) {
			margin-left: 0;
		}
	}
}
/* stylelint-enable */

@media ( min-width: 600px ) and ( max-width: 781px ) {
	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column:not(:only-child) {
		flex-basis: unset !important;
		flex-grow: 1;
	}
}
