style.scss

.editor-list-view-sidebar {
	height: 100%;
	display: flex;
	flex-direction: column;

	@include break-medium() {
		// Same width as the Inserter.
		// @see packages/block-editor/src/components/inserter/style.scss
		width: 350px;
	}
	.edit-post-editor__document-overview-panel__header {
		display: flex;
		border-bottom: $border-width solid $gray-300;
	}
	.editor-list-view-sidebar__close-button {
		background: $white;
		order: 1;
		align-self: center;
		margin-right: $grid-unit-15;
	}
}

.editor-list-view-sidebar__tabs-tablist {
	box-sizing: border-box;
	flex-grow: 1;

}

.editor-list-view-sidebar__tabs-tab {
	width: 50%;
	margin-bottom: -$border-width;
}

.editor-list-view-sidebar__tabs-tabpanel {
	height: calc(100% - #{$grid-unit-60 - $border-width});
}

.editor-list-view-sidebar__list-view-panel-content,
.editor-list-view-sidebar__list-view-container > .document-outline {
	height: 100%;

	// Include custom scrollbars, invisible until hovered.
	@include custom-scrollbars-on-hover(transparent, $gray-600);
	overflow: auto;

	// Only reserve space for scrollbars when there is content to scroll.
	// This allows items in the list view to have equidistant padding left and right
	// right up until a scrollbar is present.
	scrollbar-gutter: auto;

	// The table cells use an extra pixels of space left and right. We compensate for that here.
	padding: $grid-unit-05;
}

.editor-list-view-sidebar__list-view-container {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.editor-list-view-sidebar__tab-panel {
	height: 100%;
}

.editor-list-view-sidebar__outline {
	display: flex;
	flex-direction: column;
	gap: $grid-unit-10;
	border-bottom: $border-width solid $gray-300;
	padding: $grid-unit-20;

	& > div > span:first-child {
		// Width of the text information fields.
		width: 90px;
		display: inline-block;
	}

	& > div > span {
		font-size: $helptext-font-size;
		line-height: $default-line-height;
		color: $gray-700;
	}
}