:root {
	--admin-redesign-footer-height: 40px;
	--admin-redesign-sidebar-width: 300px;
}

html {
	scroll-behavior: smooth;

	@view-transition {
		navigation: auto;
	}
}

body {

	&.folded {
		--admin-redesign-sidebar-width: 70px;
	}
}

#wpwrap {
	display: grid;
	grid-template-areas: "admin-menu admin-content" "footer footer";
	grid-template-columns: var(--admin-redesign-sidebar-width) 1fr;
	grid-template-rows: calc(100dvh - var(--wp-admin--admin-bar--height) - var(--admin-redesign-footer-height)) var(--admin-redesign-footer-height);
	height: calc(100dvh - var(--wp-admin--admin-bar--height));
	padding-inline-end: 16px;
	position: fixed;
	top: var(--wp-admin--admin-bar--height);
	width: 100%;

	@media screen and (max-width: 782px) {
		display: block;
		grid-template-areas: unset;
		grid-template-columns: unset;
		grid-template-rows: unset;
		height: auto;
		padding-inline-end: 0;
		position: static;
		top: unset;
	}
}

body.block-editor-page {
	--admin-redesign-footer-height: 16px;

	& #wpwrap {
		grid-template-areas: "admin-menu admin-content";
		grid-template-columns: var(--admin-redesign-sidebar-width) 1fr;
		grid-template-rows: calc(100dvh - var(--wp-admin--admin-bar--height));
	}

	&.is-fullscreen-mode #wpwrap {
		display: block;
		grid-template-areas: none;
		grid-template-columns: unset;
		grid-template-rows: unset;
		height: 100vh;
		inset-block-start: 0;
		padding-inline-end: 0;

		& #wpcontent,
		& #wpbody-content {
			border-radius: 0;
			height: 100%;
			margin: 0;
			overflow-y: auto;
		}
	}
}

#wpcontent {
	background-color: var(--admin-redesign-surface-light-primary) !important;
	border-radius: 8px;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
	grid-area: admin-content;
	height: calc(100dvh - var(--wp-admin--admin-bar--height) - var(--admin-redesign-footer-height));
	margin: 4px !important;
	overflow-y: scroll;
}

#wpcontent,
#wpbody-content {
	width: 100%;

	@media screen and (max-width: 782px) {
		border-radius: 0;
		height: auto;
		overflow: unset;
	}

	& .interface-interface-skeleton {
		height: 100%;
		inset-block-end: 0;
		inset-block-start: 0;
		inset-inline-end: 0;
		inset-inline-start: 0;
		position: absolute;
		width: 100%;
	}

	& .block-editor__container {
		min-height: 100%;
	}
}

#wpbody {
	height: 100%;
	overflow: scroll;
	view-transition-name: wpbody;
}

#wpfooter {
	align-items: center;
	color: rgb(187.5, 187.5, 187.5);
	display: flex;
	grid-area: footer;
	justify-content: space-between;
	margin-inline-start: var(--admin-redesign-sidebar-width);
	padding-inline: 0;

	@media screen and (max-width: 782px) {
		grid-area: unset;
		inset: unset;
		position: static;
	}

	& a {
		color: rgb(187.5, 187.5, 187.5);

		&:hover {
			color: #fff;
		}
	}

	& .clear {
		display: none;
	}
}

#adminmenuback,
#adminmenuwrap,
#adminmenu {
	width: var(--admin-redesign-sidebar-width);
}

#adminmenumain {
	position: relative;
}

#adminmenuwrap {
	background-color: transparent;
	height: calc(100dvh - var(--wp-admin--admin-bar--height));
	overflow-x: hidden;
	overflow-y: scroll;
	width: var(--admin-redesign-sidebar-width);
	
	&:has(.opensub) {
		width: calc(2*var(--admin-redesign-sidebar-width));
	}

	.folded & {
		width: 300px !important;
	}

	&::-webkit-scrollbar {
		display: none;
	}
}

#adminmenu {
	align-items: stretch;
	background-color: var(--admin-redesign-surface-dark-primary);
	display: flex;
	flex-direction: column;
	gap: 4px;
	grid-area: admin-menu;
	justify-content: stretch;
	padding-block: 16px;
	padding-block-end: 32px;
	padding-inline: 16px;
	view-transition-name: adminmenu;
	width: var(--admin-redesign-sidebar-width);

	& li.menu-top {
		min-height: unset;
	}
}

#adminmenu .wp-submenu {
	inset-inline-start: calc(var(--admin-redesign-sidebar-width) - 2 * 16px);
}

.wp-menu-separator {
	background-color: transparent !important;
}


#adminmenu a:hover,
#adminmenu a:focus,
.folded #adminmenu .wp-submenu-head:hover {
	box-shadow: none;
}
