@use "@wordpress/base-styles/colors" as *;
@use "@wordpress/base-styles/mixins" as *;
@use "@wordpress/base-styles/variables" as *;
@use "@wordpress/base-styles/z-index" as *;

$actions-height: 92px;

.editor-start-template-options__modal {
	.editor-start-template-options__modal__actions {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: $actions-height;
		background-color: $white;
		margin-left: - $grid-unit-40;
		margin-right: - $grid-unit-40;
		padding-left: $grid-unit-40;
		padding-right: $grid-unit-40;
		border-top: 1px solid $gray-300;
		z-index: z-index(".editor-start-template-options__modal__actions");
	}

	.block-editor-block-patterns-list {
		// Since the actions container is positioned absolutely,
		// this padding bottom ensures that the content wrapper will properly
		// detect overflowing content and start showing scrollbars at the right
		// moment. Without this padding, the content would render under the actions
		// bar without causing the wrapper to show a scrollbar.
		padding-bottom: $actions-height;
	}
}

.editor-start-template-options__modal-content .block-editor-block-patterns-list {
	column-count: 2;
	column-gap: $grid-unit-30;

	@include break-medium() {
		column-count: 3;
	}

	@include break-wide() {
		column-count: 4;
	}

	.block-editor-block-patterns-list__list-item {
		break-inside: avoid-column;

		.block-editor-block-patterns-list__item-title {
			display: none;
		}
	}
}