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

.edit-site-layout {
	height: 100%;
	background: var(--wpds-color-background-surface-neutral-weak);
	color: var(--wpds-color-foreground-content-neutral);
	display: flex;
	flex-direction: column;

	// Show a dark background in "frame" mode to avoid edge artifacts.
	&:not(.is-full-canvas) .editor-visual-editor {
		background: var(--wpds-color-background-surface-neutral-weak);
	}
}

.edit-site-layout__content {
	height: 100%;
	min-height: 0;
	flex-grow: 1;
	display: flex;
}

.edit-site-layout__sidebar-region {
	z-index: 1;
	width: 100vw;
	flex-shrink: 0;

	@include break-medium {
		width: $nav-sidebar-width;
	}

	// This is only necessary for the exit animation
	.edit-site-layout.is-full-canvas & {
		position: fixed !important;
		height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
		left: 0;
		top: var(--wp-admin--admin-bar--height, 0);
	}

	.edit-site-layout__sidebar {
		display: flex;
		flex-direction: column;
		height: 100%;
		min-height: 0;
	}

	.resizable-editor__drag-handle {
		right: 0;
	}
}

.edit-site-layout__main {
	flex-grow: 1;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.edit-site-layout__mobile {
	position: relative;
	width: 100%;
	z-index: 2;
	display: flex;
	flex-direction: column;

	/*
	 * The SiteHubMobile component is displayed
	 * for pages that do not have a sidebar,
	 * yet it needs the Sidebar component for the React context.
	 *
	 * This removes the padding in this scenario.
	 * See https://github.com/WordPress/gutenberg/pull/63118
	 */
	.edit-site-sidebar__screen-wrapper {
		padding: 0;
	}

	.edit-site-sidebar-navigation-screen__main {
		padding: 0 $grid-unit-15;
	}
}

.edit-site-layout__mobile-content {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

// On mobile, the content surface lives on the scroll wrapper
// (not the inner content element) so it also covers the wrapper's
// reserved scrollbar gutter, preventing the theme background color from
// bleeding through.
.edit-site-sidebar__screen-wrapper:has(.edit-site-layout__mobile-content) {
	background: var(--wpds-color-background-surface-neutral);
}

.edit-site-layout__canvas-container {
	position: relative;
	flex-grow: 1;
	z-index: 2;
	// When animating the frame size can exceed its container size.
	overflow: visible;
}

.edit-site-layout__canvas {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;

	&.is-right-aligned {
		justify-content: flex-end;
	}

	.edit-site-resizable-frame__inner {
		color: var(--wpds-color-foreground-content-neutral);
	}

	@include break-medium {
		top: $canvas-padding;
		bottom: $canvas-padding;
		width: calc(100% - #{$canvas-padding});

		.edit-site-resizable-frame__inner-content {
			box-shadow: $elevation-x-small;
			// This ensure the radius work properly.
			overflow: hidden;

			@media not (prefers-reduced-motion) {
				transition: border-radius, box-shadow 0.4s;
			}

			.edit-site-layout:not(.is-full-canvas) & {
				border-radius: var(--wpds-border-radius-xl);
			}

			&:hover {
				box-shadow: $elevation-large;
			}
		}
	}

	.edit-site-layout.is-full-canvas & {
		top: 0;
		bottom: 0;
		width: 100%;
	}
}

// This shouldn't be necessary (we should have a way to say that a skeletton is relative
.edit-site-layout__mobile .interface-interface-skeleton,
.edit-site-layout__canvas .interface-interface-skeleton,
.edit-site-template-pages-preview .interface-interface-skeleton {
	position: relative !important;
	min-height: 100% !important;
}

.edit-site-template-pages-preview {
	height: 100%;
}

html.canvas-mode-edit-transition::view-transition-group(toggle) {
	animation-delay: 255ms;
}

@media (prefers-reduced-motion) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}
}

.edit-site-layout__actions {
	z-index: z-index(".edit-site-layout__actions");
	position: fixed !important; // Need to override the default relative positioning
	top: -9999em;
	bottom: auto;
	left: auto;
	right: 0;
	width: $sidebar-width;
	color: var(--wpds-color-foreground-content-neutral);
	background: var(--wpds-color-background-surface-neutral-strong);

	&:focus,
	&:focus-within {
		top: auto;
		bottom: 0;
	}

	&.is-entity-save-view-open {
		&:focus,
		&:focus-within {
			top: var(--wp-admin--admin-bar--height, 0);
		}
	}

	@include break-medium {
		border-left:
			$border-width solid
			var(--wpds-color-stroke-surface-neutral);
	}
}

.edit-site-layout__area {
	flex-grow: 1;
	margin: 0;
	overflow: hidden;
	box-shadow: $elevation-x-small;
	@include break-medium() {
		border-radius: var(--wpds-border-radius-xl);
		margin: $canvas-padding $canvas-padding $canvas-padding 0;
	}
}

.edit-site-layout__snackbar {
	@include snackbar-container();
}