style.scss

.edit-site-patterns__header {
	position: sticky;
	top: 0;
	background: $gray-900;
	padding: $grid-unit-40 $grid-unit-40 $grid-unit-20;
	z-index: z-index(".edit-site-patterns__header");

	.edit-site-patterns__button {
		color: $gray-600;
	}
}

.edit-site-patterns__section-header {
	.screen-reader-shortcut:focus {
		top: 0;
	}
}

.edit-site-patterns__pattern-title {
	.is-link {
		text-decoration: none;
		color: $gray-200;

		&:hover,
		&:focus {
			color: $white;
		}
	}

	.edit-site-patterns__pattern-icon {
		border-radius: $grid-unit-05;
		background: var(--wp-block-synced-color);
		fill: $white;
	}

	.edit-site-patterns__pattern-lock-icon {
		fill: currentcolor;
	}
}

.edit-site-patterns__delete-modal {
	width: $modal-width-small;
}

.edit-site-page-patterns-dataviews {
	.page-patterns-preview-field {
		display: flex;
		flex-direction: column;
		height: 100%;
		border-radius: 3px 3px 0 0;

		&.is-viewtype-grid {
			.block-editor-block-preview__container {
				height: 100%;
				border-radius: 3px 3px 0 0;
			}
		}

		.page-patterns-preview-field__button {
			box-shadow: none;
			border: none;
			padding: 0;
			background-color: unset;
			box-sizing: border-box;
			cursor: pointer;
			overflow: hidden;
			height: 100%;
			border-radius: 3px 3px 0 0;

			&:focus-visible {
				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
				// Windows High Contrast mode will show this outline, but not the box-shadow.
				outline: 2px solid transparent;
			}
		}
	}

	.edit-site-patterns__pattern-icon {
		fill: var(--wp-block-synced-color);
		flex-shrink: 0;
	}

	.edit-site-patterns__pattern-lock-icon {
		min-width: min-content;
	}

	.edit-site-patterns__section-header {
		border-bottom: 1px solid #f0f0f0;
		min-height: 72px;
		padding: $grid-unit-20 $grid-unit-40;
		position: sticky;
		top: 0;
		z-index: 2;
	}

	.edit-site-patterns__pattern-title {
		display: block;
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: inherit;
	}

	.dataviews-pagination {
		z-index: z-index(".edit-site-patterns__dataviews-list-pagination");
	}
}

.dataviews-action-modal__duplicate-pattern {
	// Fix the modal width to prevent added categories from stretching the modal.
	[role="dialog"] > [role="document"] {
		width: 350px;
	}

	.patterns-menu-items__convert-modal-categories {
		position: relative;
	}

	.components-form-token-field__suggestions-list:not(:empty) {
		position: absolute;
		border: $border-width solid var(--wp-admin-theme-color);
		border-bottom-left-radius: $radius-block-ui;
		border-bottom-right-radius: $radius-block-ui;
		box-shadow: 0 0 0.5px 0.5px var(--wp-admin-theme-color);
		box-sizing: border-box;
		z-index: 1;
		background-color: $white;
		width: calc(100% + 2px); // Account for the border width of the token field.
		left: -1px;
		min-width: initial;
		max-height: $grid-unit-60 * 2; // Adjust to not cover the save button, showing three items.
	}
}

.dataviews-action-modal__duplicate-template-part {
	.components-modal__frame {
		@include break-small {
			max-width: 500px;
		}
	}
}