.block-editor-block-pattern-setup {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	width: 100%;
	border-radius: $radius-small;

	&.view-mode-grid {
		padding-top: $grid-unit-05;

		.block-editor-block-pattern-setup__toolbar {
			justify-content: center;
		}

		.block-editor-block-pattern-setup__container {
			column-gap: $grid-unit-30;
			display: block;
			width: 100%;
			padding: $grid-unit-40;
			padding-bottom: 0;
			padding-top: 0;
			column-count: 2;

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

			.block-editor-block-preview__container,
			div[role="button"] {
				cursor: pointer;
			}

			.block-editor-block-pattern-setup-list__item {
				scroll-margin: 5px 0;

				&:hover .block-editor-block-preview__container {
					box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
				}

				&:focus .block-editor-block-preview__container {
					@include button-style-outset__focus(var(--wp-admin-theme-color));
				}
				&:hover .block-editor-block-pattern-setup-list__item-title,
				&:focus .block-editor-block-pattern-setup-list__item-title {
					color: var(--wp-admin-theme-color);
				}
			}

			.block-editor-block-pattern-setup-list__list-item {
				break-inside: avoid-column;
				margin-bottom: $grid-unit-30;

				.block-editor-block-pattern-setup-list__item-title {
					padding-top: $grid-unit-10;
					font-size: 12px;
					text-align: center;
					cursor: pointer;
				}

				.block-editor-block-preview__container {
					min-height: 100px;
					border-radius: $radius-medium;
					border: $border-width solid $gray-300;
				}

				.block-editor-block-preview__content {
					width: 100%;
				}
			}
		}
	}

	.block-editor-block-pattern-setup__toolbar {
		height: $header-height;
		box-sizing: border-box;
		padding: $grid-unit-20;
		width: 100%;
		text-align: left;
		margin: 0;
		color: $gray-900;
		position: absolute;
		bottom: 0;
		// Block UI appearance.
		background-color: $white;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-top: 1px solid $gray-300;
		align-self: stretch;

		.block-editor-block-pattern-setup__display-controls {
			display: flex;
		}

		.block-editor-block-pattern-setup__navigation,
		.block-editor-block-pattern-setup__actions {
			width: calc(50% - 36px); // This ensures the grid / list toggle is centrally aligned.
			display: flex;
		}

		.block-editor-block-pattern-setup__actions {
			justify-content: flex-end;
		}
	}
	.block-editor-block-pattern-setup__container {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		box-sizing: border-box;

		.carousel-container {
			overflow: hidden;
			position: relative;
			padding: 0;
			margin: 0;
			height: 100%;
			list-style: none;
			transform-style: preserve-3d;
			* {
				box-sizing: border-box;
			}
			.pattern-slide {
				position: absolute;
				top: 0;
				width: 100%;
				height: 100%;
				background-color: $white;
				margin: auto;
				padding: 0;
				@media not ( prefers-reduced-motion ) {
					transition: transform 0.5s, z-index 0.5s;
				}
				z-index: z-index(".block-editor-block-pattern-setup .pattern-slide");

				&.active-slide {
					opacity: 1;
					position: relative;
					z-index: z-index(".block-editor-block-pattern-setup .active-slide");
				}

				&.previous-slide {
					transform: translateX(-100%);
					z-index: z-index(".block-editor-block-pattern-setup .{next,previous}-slide");
				}

				&.next-slide {
					transform: translateX(100%);
					z-index: z-index(".block-editor-block-pattern-setup .{next,previous}-slide");
				}
			}
		}

		.block-list-appender {
			display: none;
		}
	}
}

.block-editor-block-pattern-setup__carousel,
.block-editor-block-pattern-setup__grid {
	width: 100%;
}