@import "../assets/gutenberg";

@mixin make-grid-columns($current-size-index: 1, $sizes: ("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($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($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"] {
	// Horizontal alignment
	&[data-alignment="left"] .wp-block-wp-bootstrap-blocks-row > .block-editor-inner-blocks > .block-editor-block-list__layout,
	&[data-alignment="left"] .wp-block-wp-bootstrap-blocks-row > .editor-inner-blocks > .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,
	&[data-alignment="center"] .wp-block-wp-bootstrap-blocks-row > .editor-inner-blocks > .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,
	&[data-alignment="right"] .wp-block-wp-bootstrap-blocks-row > .editor-inner-blocks > .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,
	&[data-vertical-alignment="top"] .wp-block-wp-bootstrap-blocks-row > .editor-inner-blocks > .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,
	&[data-vertical-alignment="center"] .wp-block-wp-bootstrap-blocks-row > .editor-inner-blocks > .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,
	&[data-vertical-alignment="bottom"] .wp-block-wp-bootstrap-blocks-row > .editor-inner-blocks > .editor-block-list__layout {
		align-items: flex-end;
	}

	// Row background on hover to make it visible
	&.editor-block-list__block:not(.is-selected):not(.has-child-selected):hover, /* < WP5.4 */
	&:not(.editor-block-list__block):not(.is-selected):not(.has-child-selected):hover::before  /* >= WP5.4 */ {
		background-color: rgba(220, 220, 220, 0.5);
		outline: 1px dashed $dark-gray-150;
	}

	/*
     * 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,
			.editor-block-toolbar {
				left: $block-padding;
			}
		}
	}
}

.wp-block-wp-bootstrap-blocks-row {
	@include break-small() {
		> .block-editor-inner-blocks > .block-editor-block-list__layout,
		> .editor-inner-blocks > .editor-block-list__layout {
			display: flex;
			flex-wrap: wrap;

			> [data-type="wp-bootstrap-blocks/column"] {
				margin-left: 0;
				margin-right: 0;

				// 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%;
			}
		}
	}
}

// Fix column padding in WordPress >= 5.4 (block-editor-xy classes only exists in WordPress 5.2 & 5.3)
body:not(.branch-5-2):not(.branch-5-3) .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-icon-button,
	> .components-button.has-icon {
		flex-direction: column;
		justify-content: center;
		width: 100%;
		height: auto;
		padding: 8px;

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

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

			// 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 $dark-gray-150;
	}

	&[data-center-content="true"] {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}
