.block-editor-patterns__grid-pagination-wrapper {

	.block-editor-patterns__grid-pagination {
		border-top: 1px solid $gray-800;
		padding: $grid-unit-05;
		justify-content: center;
		.components-button.is-tertiary {
			width: auto;
			height: $button-size-compact;
			justify-content: center;

			&:disabled {
				color: $gray-600;
				background: none;
			}

			&:hover:not(:disabled) {
				color: $white;
				background-color: $gray-700;
			}
		}
	}
}

.show-icon-labels {
	.block-editor-patterns__grid-pagination {
		.components-button {
			width: auto;
			// Hide the button icons when labels are set to display...
			span {
				display: none;
			}
			// ... and display labels.
			// Uses ::before as ::after is already used for active tab styling.
			&::before {
				content: attr(aria-label);
			}
		}
	}
}
