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

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

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

.wp-block-columns {
	@include mixins.media( tablet ) {
		&.is-style-first-col-to-second > [data-type="core/column"]:nth-child(2),
		&.is-style-first-col-to-third > [data-type="core/column"]:nth-child(2),
		&.is-style-first-col-to-third > [data-type="core/column"]:nth-child(3) {
			order: -1;
		}
	}

	&.is-style-borders {
		> [data-type="core/column"] {
			border-bottom: 1px solid np-colors.$neutral-300;
			position: relative;

			&:last-child,
			[data-type="core/column"] {
				border-bottom: 0;
			}

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

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

				&:nth-child(odd)::after {
					border-color: np-colors.$neutral-300;
				}

				&:last-child::after,
				[data-type="core/column"]::after {
					display: none;
				}
			}

			@include mixins.media( tablet ) {
				&::after {
					border-color: np-colors.$neutral-300;
				}
			}
		}

		@include mixins.media( tablet ) {
			&.is-style-first-col-to-second,
			&.is-style-first-col-to-third {
				> [data-type="core/column"]:first-child::after {
					display: none;
				}
			}

			&.is-style-first-col-to-second > [data-type="core/column"]:nth-child(2)::after,
			&.is-style-first-col-to-third > [data-type="core/column"]:nth-child(3)::after {
				display: block;
			}
		}
	}
}

/**
 * Temporary WP<6.0 styles
 * TODO: These styles can be removed once WP 6.0 is released.
 */
.editor-styles-wrapper {
	.wp-block-columns {
		&.is-not-stacked-on-mobile,
		&:not(.is-not-stacked-on-mobile) {
			> .wp-block-column:not(:first-child) {
				margin-left: 0;
			}
		}
	}
}
