@use "sass:math";
@import "../assets/gutenberg";

@mixin make-grid-columns($current-size-index: 1, $sizes: ("xxl", "xl", "lg", "md", "sm", "xs"), $grid-columns: 12) {
	@if $current-size-index <= length($sizes) {
		$size: nth($sizes, $current-size-index);

		@for $i from 1 through $grid-columns {
			&[data-size-#{$size}="#{$i}"] {
				flex: 0 0 percentage(math.div($i, $grid-columns));
				// Add a `max-width` to ensure content within each column does not blow out
				// the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
				// do not appear to require this.
				max-width: percentage(math.div($i, $grid-columns));
			}
		}
		&[data-size-#{$size}="0"] {
			@include make-grid-columns($current-size-index + 1);
		}
	}
	@else {
		flex-grow: 1;
		flex-basis: 0;
	}
}

// Row block
[data-type="wp-bootstrap-blocks/row"] {
	// Row background on hover to make it visible
	&:not(.is-selected):not(.has-child-selected):hover {
		background-color: rgba(220, 220, 220, 0.5);
		outline: 1px dashed $gray-600;
	}

	@include break-small() {
		&:not([data-editor-stack-columns="true"]) {
			.wp-block-wp-bootstrap-blocks-row {
				> .block-editor-inner-blocks > .block-editor-block-list__layout {
					display: flex;
					flex-wrap: wrap;
					box-sizing: border-box;

					> [data-type="wp-bootstrap-blocks/column"] {
						margin: 0;
						box-sizing: border-box;

						// Grid implementation
						@include make-grid-columns();

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

					// Set block list appender width to use full width of container to wrap to new line
					> .block-list-appender {
						width: 100%;
					}
				}
			}

			// Horizontal alignment
			&[data-alignment="left"] .wp-block-wp-bootstrap-blocks-row > .block-editor-inner-blocks > .block-editor-block-list__layout {
				justify-content: flex-start;
			}
			&[data-alignment="center"] .wp-block-wp-bootstrap-blocks-row > .block-editor-inner-blocks > .block-editor-block-list__layout {
				justify-content: center;
			}
			&[data-alignment="right"] .wp-block-wp-bootstrap-blocks-row > .block-editor-inner-blocks > .block-editor-block-list__layout {
				justify-content: flex-end;
			}

			// Vertical alignment
			&[data-vertical-alignment="top"] .wp-block-wp-bootstrap-blocks-row > .block-editor-inner-blocks > .block-editor-block-list__layout {
				align-items: start;
			}
			&[data-vertical-alignment="center"] .wp-block-wp-bootstrap-blocks-row > .block-editor-inner-blocks > .block-editor-block-list__layout {
				align-items: center;
			}
			&[data-vertical-alignment="bottom"] .wp-block-wp-bootstrap-blocks-row > .block-editor-inner-blocks > .block-editor-block-list__layout {
				align-items: flex-end;
			}

			/*
			 * If there is a block within a full-width block (align full),
			 * their toolbar must be offset by 14 px
			 * due to the negative margins on .block-editor-block-list__layout
			 */
			&[data-align="full"] {
				.wp-block {
					.block-editor-block-toolbar {
						left: $block-padding;
					}
				}
			}
		}
	}
}

// Fix column padding in WordPress >= 5.4 (block-editor-xy classes only exist in WordPress >= 5.2)
body:not(.branch-5-3) [data-type="wp-bootstrap-blocks/row"]:not([data-editor-stack-columns="true"]):not([data-no-gutters="true"]):not([data-horizontal-gutters="gx-0"]) .wp-block-wp-bootstrap-blocks-row {
	@include break-small() {
		> .block-editor-inner-blocks > .block-editor-block-list__layout {
			> [data-type="wp-bootstrap-blocks/column"] {
				padding-left: $block-padding;
				padding-right: $block-padding;
			}
		}
	}
}

.wp-bootstrap-blocks-template-selector-list {
	display: flex;
	flex-wrap: wrap;
}

.wp-bootstrap-blocks-template-selector-button {
	flex: 0 0 50%;
	display: flex;

	> .components-button {
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: auto;
		padding: 8px;

		// Align margin to text position
		&.has-text svg {
			margin-right: 0;
			margin-bottom: 4px;
			width: 40px;
			height: 40px;
		}

		&.is-active,
		&.is-active:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover {
			color: $gray-900;
			box-shadow: inset 0 0 0 2px $gray-700;

			// Windows High Contrast mode will show this outline, but not the box-shadow.
			outline: 2px solid transparent;
			outline-offset: -2px;
		}
	}
}

.wp-bootstrap-blocks-template-selector-button-label {
	font-size: 12px;
}

// Column block
[data-type="wp-bootstrap-blocks/column"] {
	// Column background on hover to make it visible
	&:not(.is-selected):not(.has-child-selected):hover {
		background-color: rgba(255, 255, 255, 0.7);
		outline: 1px dashed $gray-600;
	}

	&[data-content-vertical-alignment="top"],
	&[data-content-vertical-alignment="center"],
	&[data-content-vertical-alignment="bottom"] {
		display: flex;
		flex-direction: column;
	}
	&[data-content-vertical-alignment="top"] {
		justify-content: flex-start;
	}
	&[data-content-vertical-alignment="center"] {
		justify-content: center;
	}
	&[data-content-vertical-alignment="bottom"] {
		justify-content: flex-end;
	}
}