@import "node_modules/@wordpress/base-styles/variables";
@import "node_modules/@wordpress/base-styles/mixins";
@import "node_modules/@wordpress/base-styles/breakpoints";
 
.block-library-query-toolbar__popover .components-popover__content {
	min-width: 230px;
}

.wp-block-cp-library-query__create-new-link {
	padding: 0 $grid-unit-20 $grid-unit-20 52px;
}

.block-library-query__pattern-selection-content .block-editor-block-patterns-list {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: $grid-unit-10;

	.block-editor-block-patterns-list__list-item {
		margin-bottom: 0;
		.block-editor-block-preview__container {
			max-height: 250px;
		}
	}
}

.block-library-query-pattern__selection-modal {
	// To keep modal dimensions consistent as subsections are navigated, width
	// and height are used instead of max-(width/height).
	.components-modal__frame {
		@include break-small() {
			width: calc(100% - #{$grid-unit-20 * 2});
			height: calc(100% - #{$header-height * 2});
		}

		@include break-medium() {
			width: $break-medium - $grid-unit-20 * 2;
		}

		@include break-large() {
			height: 70%;
		}
	}

	.block-library-query-pattern__selection-search {
		background: $white;
		position: sticky;
		top: 0;
		padding: $grid-unit-20 0;
		margin-bottom: 2px;
		z-index: z-index(".block-library-query-pattern__selection-search");
	}
}

.block-library-query-toolspanel__filters {
	.components-form-token-field__help {
		margin-bottom: 0;
	}
}