@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"]) {
			> .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"]
				> .block-editor-inner-blocks
				> .block-editor-block-list__layout {
				justify-content: flex-start;
			}
			&[data-alignment="center"]
				> .block-editor-inner-blocks
				> .block-editor-block-list__layout {
				justify-content: center;
			}
			&[data-alignment="right"]
				> .block-editor-inner-blocks
				> .block-editor-block-list__layout {
				justify-content: flex-end;
			}

			// Vertical alignment
			&[data-vertical-alignment="top"]
				> .block-editor-inner-blocks
				> .block-editor-block-list__layout {
				align-items: start;
			}
			&[data-vertical-alignment="center"]
				> .block-editor-inner-blocks
				> .block-editor-block-list__layout {
				align-items: center;
			}
			&[data-vertical-alignment="bottom"]
				> .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"]) {
	@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;
	}
}
