.block-editor-block-pattern-setup {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	width: 100%;
	border-radius: $radius-block-ui;
	box-shadow: inset 0 0 0 $border-width $gray-900;
	outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode.

	// TODO change to check parent.
	&.view-mode-grid {
		.block-editor-block-pattern-setup__toolbar {
			justify-content: center;
		}

		.block-editor-block-pattern-setup__container {
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-gap: $grid-unit-20;
			padding: $grid-unit-20;
			max-height: 550px;
			overflow: auto;
			margin: 0 $border-width $border-width $border-width;
			width: calc(100% - #{ $border-width * 2 });
			background: $white;

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

			.block-editor-block-pattern-setup-list__item-title {
				padding: $grid-unit-05;
				font-size: $helptext-font-size;
				text-align: center;
			}

			.block-editor-block-preview__container {
				border-radius: $radius-block-ui;
				border: $border-width solid $gray-300;
			}
		}
	}

	.block-editor-block-pattern-setup__toolbar {
		box-sizing: border-box;
		position: relative;
		padding: $grid-unit-20;
		width: 100%;
		text-align: left;
		margin: 0;
		color: $gray-900;
		// Block UI appearance.
		border-radius: $radius-block-ui $radius-block-ui 0 0;
		background-color: $white;
		box-shadow: inset 0 0 0 $border-width $gray-900;
		outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode.

		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;

		.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%;
		box-sizing: border-box;

		.carousel-container {
			overflow: hidden;
			position: relative;
			padding: 0;
			margin: 0;
			list-style: none;
			transform-style: preserve-3d;
			* {
				box-sizing: border-box;
			}
			.pattern-slide {
				opacity: 0;
				position: absolute;
				top: 0;
				width: 100%;
				margin: auto;
				padding: $grid-unit-20;
				transition: transform 0.5s, opacity 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;
		}
	}
}