style.scss

@use "@wordpress/base-styles/colors" as *;
@use "@wordpress/base-styles/mixins" as *;
@use "@wordpress/base-styles/variables" as *;
@use "@wordpress/base-styles/z-index" as *;

// `className` on `<Modal>` is applied to `.components-modal__frame`, so the
// compound selector below bumps specificity over the shipped rule at
// `.components-modal__frame.is-full-screen :where(.components-modal__content)`
// and lets the InterfaceSkeleton run edge-to-edge inside the modal.
.media-editor-modal.components-modal__frame .components-modal__content {
	padding: 0;
	margin-bottom: 0;
}

.media-editor-modal {
	display: flex;
	flex-direction: column;

	// InterfaceSkeleton defaults to position: fixed for full-viewport usage.
	// Reset it so the skeleton flows inside the modal's content area. Stack
	// children vertically (header/body/footer) since the default row layout
	// assumes an absolutely positioned footer that overlays the bottom.
	.interface-interface-skeleton {
		position: relative;
		top: auto;
		right: auto;
		bottom: auto;
		left: auto;
		height: 100%;
		max-height: none;
		flex: 1;
		flex-direction: column;
	}

	.interface-interface-skeleton__editor {
		min-width: 0;
		flex: 1;
	}

	// The skeleton's default footer is `position: absolute; bottom: 0` with
	// a small fixed padding-bottom on the body to compensate. Our bottom
	// bar is taller than that default, so it would overlap the cropper's
	// resize handles. Put the footer in flow so it claims its own row and
	// the canvas (and sidebar) resize to fit above it. The skeleton also
	// hides the footer below the medium breakpoint by default; force it
	// visible so the bottom-bar controls remain accessible on narrow
	// viewports.
	.interface-interface-skeleton__footer {
		position: relative;
		display: flex;
	}

	.interface-interface-skeleton.has-footer .interface-interface-skeleton__body {
		padding-bottom: 0;
	}

	.media-editor-modal__canvas {
		display: flex;
		align-items: center;
		justify-content: center;
		background: $gray-100;
		overflow: auto;
		height: 100%;

		// MediaPreview uses `min-height: 100%` so it can grow when needed in
		// other contexts. Inside the modal canvas we need a definite height
		// so the image/video's `max-height: 100%` resolves and the preview
		// is contained vertically.
		.media-editor-preview {
			height: 100%;
		}

		img,
		video {
			max-width: 100%;
			max-height: 100%;
			object-fit: contain;
		}
	}

	// Matches the post editor's `.editor-sidebar` container (see
	// `packages/editor/src/components/sidebar/style.scss`): `@include reset`
	// sets `box-sizing: border-box` and makes all descendants inherit it.
	// Without this, descendants (notably the active-tab underline inside
	// `<Tabs>`) fall back to `content-box` sizing that shortens the
	// indicator under the selected tab label.
	.media-editor-modal__sidebar {
		@include reset;
	}

	// Mirror the editor's `PostPanelSection` padding for tab body content,
	// so the form inside the Details tab has breathing room.
	.media-editor-modal__panel {
		padding: $grid-unit-20;
	}

	// Match the post editor's sidebar header treatment
	// (see `packages/editor/src/components/sidebar/style.scss`): when the tab
	// list is rendered as `ComplementaryArea`'s header, zero the default
	// panel-header padding so tabs sit flush to the edge and the active-tab
	// underline can span the full tab label width.
	.components-panel__header.media-editor-modal__sidebar-header {
		padding-left: 0;
		padding-right: $grid-unit-10;

		.components-button.has-icon {
			padding: 0;

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

// The Advanced panel is a PanelBody nested inside the already-padded
// `.media-editor-modal__panel`. Pull it flush to the panel edges so the
// toggle button spans the full width (matching the block inspector's
// treatment of PanelBody headers), then re-apply horizontal padding inside
// the content area only.
.media-editor-crop-advanced-panel.components-panel__body {
	margin-left: -$grid-unit-20;
	margin-right: -$grid-unit-20;

	.components-panel__body-title {
		button.components-panel__body-toggle {
			padding-left: $grid-unit-20;
			padding-right: $grid-unit-20;
		}
	}

	.components-panel__body-content {
		padding-left: $grid-unit-20;
		padding-right: $grid-unit-20;
	}
}

// `<SnackbarNotices>` renders `.components-snackbar-list` with
// `position: absolute; width: 100%`. Portaled to `<body>` it has no
// positioned ancestor, so it collapses to a 0-size box at the document
// origin and would also be painted under the modal overlay since both
// share the default snackbar z-index. `snackbar-container` fixes the
// list to the viewport bottom; the elevated z-index (registered in
// base-styles) lifts it above the modal overlay and any popovers that
// may open inside the modal.
.media-editor-modal__snackbar {
	@include snackbar-container();
	z-index: z-index(".components-snackbar-list.media-editor-modal__snackbar");
}