.wc-block-components-sidebar-layout {
	display: flex;
	flex-wrap: wrap;
	margin: 0 auto $gap;
	position: relative;

	.wc-block-components-main {
		box-sizing: border-box;
		margin: 0;
		padding-right: percentage($gap-largest / 1060px); // ~1060px is the default width of the content area in Storefront.
		width: 65%;
	}
}

.wc-block-components-sidebar {
	box-sizing: border-box;
	margin: 0;
	padding-left: percentage($gap-large / 1060px);
	width: 35%;

	.wc-blocks-components-panel {
		> h2 {
			@include font-size(large);
			@include reset-box();
		}
	}
}

.is-medium,
.is-small,
.is-mobile {
	&.wc-block-components-sidebar-layout {
		flex-direction: column;
		margin: 0 auto $gap;

		.wc-block-components-main {
			padding: 0;
			width: 100%;
		}
		.wc-block-components-sidebar {
			padding: 0;
			width: 100%;
		}
	}
}

.is-large {
	.wc-block-components-sidebar {
		.wc-block-components-totals-item,
		.wc-blocks-components-panel {
			padding-left: $gap;
			padding-right: $gap;
		}
	}
}

// For Twenty Twenty we need to increase specificity a bit more.
.theme-twentytwenty {
	.wc-block-components-sidebar .wc-blocks-components-panel > h2 {
		@include font-size(large);
		@include reset-box();
	}
}