.edit-post-sidebar {
	position: fixed;
	z-index: z-index(".edit-post-sidebar");
	top: 0;
	right: 0;
	bottom: 0;
	width: $sidebar-width;
	border-left: $border-width solid $light-gray-500;
	background: $white;
	color: $dark-gray-500;
	height: 100vh;
	overflow: hidden;

	@include break-small() {
		top: $admin-bar-height-big + $header-height;
		z-index: z-index(".edit-post-sidebar {greater than small}");
		height: auto;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	}

	@include break-medium() {
		top: $admin-bar-height + $header-height;

		body.is-fullscreen-mode & {
			top: $header-height;
		}
	}

	> .components-panel {
		border-left: none;
		border-right: none;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
		height: auto;
		max-height: calc(100vh - #{ $admin-bar-height-big + $panel-header-height });
		margin-top: -1px;
		margin-bottom: -1px;
		position: relative;
		z-index: z-index(".edit-post-sidebar .components-panel");

		@include break-small() {
			overflow: hidden;
			height: auto;
			max-height: none;
		}
	}

	> .components-panel .components-panel__header {
		position: fixed;
		z-index: z-index(".components-panel__header");
		top: 0;
		left: 0;
		right: 0;
		height: $panel-header-height;

		@include break-small() {
			position: inherit;
			top: auto;
			left: auto;
			right: auto;
		}
	}

	p {
		margin-top: 0;
	}

	h2,
	h3 {
		font-size: $default-font-size;
		color: $dark-gray-500;
		margin-bottom: 1.5em;
	}

	hr {
		border-top: none;
		border-bottom: 1px solid $light-gray-500;
		margin: 1.5em 0;
	}

	div.components-toolbar {
		box-shadow: none;
		margin-bottom: 1.5em;
		&:last-child {
			margin-bottom: 0;
		}
	}

	p + div.components-toolbar {
		margin-top: -1em;
	}

	.block-editor-skip-to-selected-block:focus {
		top: auto;
		right: 10px;
		bottom: 10px;
		left: auto;
	}
}

/* Visual and Text editor both */
.edit-post-layout.is-sidebar-opened .edit-post-layout__content {
	@include break-medium() {
		margin-right: $sidebar-width;
	}
}

.edit-post-layout.is-sidebar-opened {
	.edit-post-sidebar,
	.edit-post-plugin-sidebar__sidebar-layout {
		/* Sidebar covers screen on mobile */
		width: 100%;

		/* Sidebar sits on the side on larger breakpoints */
		@include break-medium() {
			width: $sidebar-width;
		}
	}
}

/* Text Editor specific */
.components-panel__header.edit-post-sidebar__header {
	background: $white;
	padding-right: $panel-padding / 2;

	.edit-post-sidebar__title {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 100%;
	}

	@include break-medium() {
		display: none;
	}
}

.components-panel__header.edit-post-sidebar__panel-tabs {
	justify-content: flex-start;
	padding-left: 0;
	padding-right: $grid-size-small;
	border-top: 0;
	margin-top: 0;

	.components-icon-button {
		display: none;
		margin-left: auto;

		@include break-medium() {
			display: flex;
		}
	}
}

.edit-post-sidebar__panel-tab {
	background: transparent;
	border: none;
	box-shadow: none;
	cursor: pointer;
	height: 50px;
	padding: 3px 15px; // Use padding to offset the is-active border, this benefits Windows High Contrast mode
	margin-left: 0;
	font-weight: 400;
	@include square-style__neutral;
	transition: box-shadow 0.1s linear;

	&.is-active {
		box-shadow: inset 0 -3px theme(outlines);
		font-weight: 600;
		position: relative;

		// This border appears in Windows High Contrast mode instead of the box-shadow.
		&::before {
			content: "";
			position: absolute;
			top: 0;
			bottom: 1px;
			right: 0;
			left: 0;
			border-bottom: 3px solid transparent;
		}
	}

	&:focus {
		@include square-style__focus;
	}
}