style.scss

.edit-post-meta-boxes-main {
	filter: drop-shadow(0 -1px rgba($color: #000, $alpha: 0.133)); // 0.133 = $gray-200 but with alpha.
	// Windows High Contrast mode will show this outline, but not the shadow.
	outline: 1px solid transparent;
	background-color: $white;
	display: flex;
	flex-direction: column;
	overflow: hidden;

	&.is-resizable {
		padding-block-start: $grid-unit-30;
	}
}

.edit-post-meta-boxes-main__presenter {
	display: flex;
	box-shadow: 0 $border-width $gray-300;
	// Windows High Contrast mode will show this outline, but not the shadow.
	outline: 1px solid transparent;
	position: relative;
	z-index: 1;

	// Button style reset for both toggle or resizable.
	.is-toggle-only > &,
	.is-resizable.edit-post-meta-boxes-main & > button {
		appearance: none;
		padding: 0;
		border: none;
		outline: none;
		background-color: transparent;
	}

	.is-toggle-only > & {
		flex-shrink: 0;
		cursor: pointer;
		height: $button-size-compact;
		justify-content: space-between;
		align-items: center;
		padding-inline: $grid-unit-30 $grid-unit-15;

		&:is(:hover, :focus-visible) {
			color: var(--wp-admin-theme-color);
		}
		&:focus-visible::after {
			content: "";
			position: absolute;
			inset: var(--wp-admin-border-width-focus);
			@include button-style__focus();
		}
		> svg {
			fill: currentColor;
		}
	}

	.is-resizable.edit-post-meta-boxes-main & {
		inset: 0 0 auto;

		> button {
			cursor: inherit;
			width: $grid-unit-80;
			height: $grid-unit-30;
			margin: auto;

			&::before {
				content: "";
				background-color: $gray-300;
				// Windows High Contrast mode will show this outline, but not the background-color.
				outline: 2px solid transparent;
				outline-offset: -2px;
				position: absolute;
				inset-block: calc(50% - #{$grid-unit-05} / 2) auto;
				transform: translateX(-50%);
				width: inherit;
				height: $grid-unit-05;
				border-radius: $radius-small;
				transition: width 0.3s ease-out;
				@include reduce-motion("transition");
			}
		}

		&:is(:hover, :focus-within) > button::before {
			background-color: var(--wp-admin-theme-color);
			width: $grid-unit-80 + $grid-unit-20;
		}
	}
}

@media (pointer: coarse) {
	.is-resizable.edit-post-meta-boxes-main {
		padding-block-start: $button-size-compact;

		.edit-post-meta-boxes-main__presenter > button {
			height: $button-size-compact;
		}
	}
}

.edit-post-meta-boxes-main__liner {
	overflow: auto;
	// Keep the contents behind the resize handle or details summary.
	isolation: isolate;
}

// In case the canvas is not iframe’d.
.edit-post-layout__metaboxes {
	clear: both;
}

.has-metaboxes .editor-visual-editor {
	// Contains z-indexes of children so that the block toolbar will appear behind
	// the drop shadow of the meta box pane.
	isolation: isolate;
}

// Adjust the position of the notices
.components-editor-notices__snackbar {
	position: fixed;
	right: 0;
	bottom: 24px;
	padding-left: 24px;
	padding-right: 24px;
}

@include editor-left(".edit-post-layout .components-editor-notices__snackbar");