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

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

.wc-block-sidebar {
	margin: 0;
	padding-left: percentage($gap-largest / 1060px);
	width: 35%;

	// Reset Gutenberg <Panel> styles when used in the sidebar.
	.components-panel__body {
		border-top: 1px solid $core-grey-light-600;
		border-bottom: 1px solid $core-grey-light-600;

		&.is-opened {
			padding-left: 0;
			padding-right: 0;

			> .components-panel__body-title {
				margin-bottom: 0;
				margin-left: 0;
				margin-right: 0;
			}
		}
	}

	.components-panel__body-title,
	.components-panel__body-toggle {
		&,
		&:hover,
		&:focus,
		&:active {
			background-color: transparent;
			color: inherit;
		}
	}

	.components-panel__body-toggle {
		font-weight: normal;
		font-size: inherit;
		padding-left: 0;
		padding-right: 36px;

		&.components-button,
		&.components-button:focus:not(:disabled):not([aria-disabled="true"]) {
			color: inherit;
		}

		.components-panel__arrow {
			right: 0;
		}
	}
}

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

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

			// Reset card component styling on mobile.
			.components-card {
				background: transparent;
				box-shadow: none;
				border: none;
			}
			.components-card__body {
				border: none;
				padding: 0;
			}
		}
	}
}