.editor-styles-wrapper .wp-block-woocommerce-mini-cart-contents {
	max-width: 480px;
	/* We need to override the margin top here to simulate the layout of
	the mini cart contents on the front end. */
	margin: 0 auto !important;

	.wp-block-woocommerce-filled-mini-cart-contents-block > .block-editor-inner-blocks > .block-editor-block-list__layout {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
	}

	.wp-block-woocommerce-mini-cart-items-block {
		display: grid;
		flex-grow: 1;
		margin-bottom: $gap;
		padding: 0 $gap;

		> .block-editor-inner-blocks > .block-editor-block-list__layout {
			display: flex;
			flex-direction: column;
			height: 100%;
		}
	}

	.wp-block-woocommerce-mini-cart-products-table-block {
		margin-bottom: auto;
		margin-top: $gap;
	}

	h2.wc-block-mini-cart__title {
		@include font-size(larger);
		margin: $gap-largest $gap 0;
	}

	table.wc-block-cart-items {
		color: inherit;
	}

	.block-editor-button-block-appender {
		box-shadow: inset 0 0 0 1px;
		color: inherit;
	}
}