// These styles are copied directly from @wordpress/interface
// in order to remove our dependency on this experimental package.

// TODO: Replace these styles with our own styles.

//
// complementary-area-header
//
.components-panel__header.interface-complementary-area-header__small {
	background: $white;
	padding-right: $grid-unit-05;

	.interface-complementary-area-header__small-title {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 100%;
	}

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

.interface-complementary-area-header {
	background: $white;
	padding-right: $grid-unit-05;
}

//
// complementary-area
//
.interface-complementary-area {
	background: $white;
	color: $gray-900;

	@include break-small() {
		-webkit-overflow-scrolling: touch;
	}

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

	.components-panel {
		border: none;
		// Make a stacking context that keeps all descendents behind the sticky header
		position: relative;
		z-index: z-index( '.interface-complementary-area .components-panel' );
	}

	.components-panel__header {
		position: sticky;
		top: 0;
		z-index: z-index( '.interface-complementary-area .components-panel__header' );

		&.edit-post-sidebar__panel-tabs {
			top: $panel-header-height;

			@include break-medium() {
				top: 0;
			}
		}
	}

	p {
		margin-top: 0;
	}

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

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

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

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

//
// fullscreen-mode
//
body.js.is-fullscreen-mode {
	@include break-medium {
		// Reset the html.wp-topbar padding.
		// Because this uses negative margins, we have to compensate for the height.
		margin-top: -$admin-bar-height;
		height: calc( 100% + #{$admin-bar-height} );

		#adminmenumain,
		#wpadminbar {
			display: none;
		}

		#wpcontent,
		#wpfooter {
			margin-left: 0;
		}
	}
}

//
// interface-skeleton
//
// On Mobile devices, swiping the HTML element should not scroll.
// By making it fixed, we prevent that.
html.interface-interface-skeleton__html-container {
	position: fixed;
	width: 100%;

	@include break-medium() {
		position: initial;
		width: initial;
	}
}

.interface-interface-skeleton {
	display: flex;
	flex-direction: row;
	height: auto;
	max-height: 100%;

	// Fill the available space on Mobile.
	position: fixed;
	top: $admin-bar-height-big;
	left: 0;
	right: 0;
	bottom: 0;

	// Adjust to admin-bar going small.
	@media (min-width: #{ ($break-medium + 1) }) {
		top: $admin-bar-height;

		.is-fullscreen-mode & {
			top: 0;
		}
	}
}

.interface-interface-skeleton__editor {
	display: flex;
	flex-direction: column;
	flex: 0 1 100%;
	overflow: hidden;
}

@include editor-left( '.interface-interface-skeleton' );

.interface-interface-skeleton__body {
	flex-grow: 1;
	display: flex;

	// Even on Mobile, we choose to scroll this element on its own.
	// This helps enable a fixed-to-top toolbar that makes the editing experience
	// on Mobile Safari usable.
	// Unfortunately an issue still exists where if you swipe the top toolbar
	// or beyond the bottom of the page when the soft keyboard is showing, you scroll
	// the body element and can scroll the toolbar out of view.
	// This is still preferable, though, as it allows the editor to function at all.
	overflow: auto;

	// In future versions of Mobile Safari, hopefully overscroll-behavior will be supported.
	// This allows us to disallow the scroll-chaining and rubber-banding that is currently
	// is the cause of the issue outlined above.
	// In other words, the following behavior doesn't yet work in Safari, but if/when
	// it is added, it should take care of the issue.
	// See also: https://drafts.csswg.org/css-overscroll/
	overscroll-behavior-y: none;

	// Footer overlap prevention
	.has-footer & {
		@include break-medium() {
			padding-bottom: $button-size-small + $border-width;
		}
	}
}

.interface-interface-skeleton__content {
	flex-grow: 1;

	// Treat as flex container to allow children to grow to occupy full
	// available height of the content area.
	display: flex;
	flex-direction: column;

	// On Mobile the header is fixed to keep HTML as scrollable.
	// Beyond the medium breakpoint, we allow the sidebar.
	// The sidebar should scroll independently, so enable scroll here also.
	overflow: auto;

	// On Safari iOS on smaller viewports lack of a z-index causes the background
	// to "bleed" through the header.
	// See https://github.com/WordPress/gutenberg/issues/32631
	z-index: z-index( '.interface-interface-skeleton__content' );
}

.interface-interface-skeleton__secondary-sidebar,
.interface-interface-skeleton__sidebar {
	display: block;
	flex-shrink: 0;
	position: absolute;
	z-index: z-index( '.interface-interface-skeleton__sidebar' );
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: $white;
	color: $gray-900;

	// On Mobile the header is fixed to keep HTML as scrollable.
	@include break-medium() {
		position: relative !important;
		z-index: z-index( '.interface-interface-skeleton__sidebar {greater than small}' );
		width: auto; // Keep the sidebar width flexible.
	}
}

.interface-interface-skeleton__sidebar {
	overflow: auto;

	@include break-medium() {
		border-left: $border-width solid $gray-200;
	}
}

.interface-interface-skeleton__secondary-sidebar {
	@include break-medium() {
		border-right: $border-width solid $gray-200;
	}
}

.interface-interface-skeleton__header {
	flex-shrink: 0;
	height: auto; // Keep the height flexible.
	border-bottom: $border-width solid $gray-200;
	z-index: z-index( '.interface-interface-skeleton__header' );
	color: $gray-900;
}

.interface-interface-skeleton__footer {
	height: auto; // Keep the height flexible.
	flex-shrink: 0;
	border-top: $border-width solid $gray-200;
	color: $gray-900;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: $white;
	z-index: z-index( '.interface-interface-skeleton__footer' );

	// On Mobile the footer is hidden
	display: none;
	@include break-medium() {
		display: flex;
	}

	.block-editor-block-breadcrumb {
		z-index: z-index( '.edit-post-layout__footer' );
		display: flex;
		background: $white;
		height: $button-size-small;
		align-items: center;
		font-size: $default-font-size;
		padding: 0 ( $grid-unit-15 + 6px );
	}
}

.interface-interface-skeleton__actions {
	z-index: z-index( '.interface-interface-skeleton__actions' );
	position: fixed !important; // Need to override the default relative positioning
	top: -9999em;
	bottom: auto;
	left: auto;
	right: 0;
	width: $sidebar-width;
	color: $gray-900;

	&:focus {
		top: auto;
		bottom: 0;
	}
}

//
// more-menu-dropdown
//
.interface-more-menu-dropdown {
	margin-left: -4px;

	// the padding and margin of the more menu is intentionally non-standard
	.components-button {
		width: auto;
		padding: 0 2px;
	}

	@include break-small() {
		margin-left: 0;

		.components-button {
			padding: 0 4px;
		}
	}
}

.interface-more-menu-dropdown__content .components-popover__content {
	min-width: 280px;

	// Let the menu scale to fit items.
	@include break-mobile() {
		width: auto;
		max-width: $break-mobile;
	}

	.components-dropdown-menu__menu {
		padding: 0;
	}
}

.components-popover.interface-more-menu-dropdown__content {
	z-index: z-index( '.components-popover.edit-widgets-more-menu__content' );
}

//
// pinned-items
//
.interface-pinned-items {
	display: flex;

	// We intentionally hide pinned items (plugins) on mobile, and unhide them at desktop breakpoints.
	// Otherwise the list can wreak havoc on the layout.
	.components-button:not( :first-child ) {
		display: none;

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

	.components-button {
		margin-left: $grid-unit-05;

		svg {
			max-width: $icon-size;
			max-height: $icon-size;
		}
	}
}