/**
 * Admin Menu in Frontend: the panel around core's own wp-admin/css/admin-menu.css.
 *
 * Core styles the menu. This file places the panel, keeps the theme's global
 * styles out of it, and styles the pin button. The reset uses a doubled class
 * (0,2,0): above a theme's element and :root :where() rules, below every core
 * menu rule, which all carry an ID.
 */

#amf-menu {
	--amf-width: 160px;
	--amf-peek: 6px;
	position: fixed;
	z-index: 99990; /* Under the toolbar (99999), over the theme. */
	top: var(--wp-admin--admin-bar--height, 0px);
	bottom: 0;
	inset-inline-start: 0;
	width: var(--amf-width);
	transition: inset-inline-start 0.2s ease 0.3s;

	/* What the menu inherits from the body of wp-admin. */
	color: #3c434a;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 13px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.4em;
	letter-spacing: normal;
	text-align: start;
	text-transform: none;
}

#amf-menu.folded {
	--amf-width: 36px;
}

/*
 * Unpinned: a strip at the edge that opens on pointing or keyboard focus.
 * Keyboard focus only (:focus-visible): a clicked button keeps focus, and the
 * panel must still close when the pointer leaves.
 */
#amf-menu:not(.amf-pinned) {
	inset-inline-start: calc(var(--amf-peek) - var(--amf-width));
}

#amf-menu:not(.amf-pinned):hover,
#amf-menu:not(.amf-pinned):has(:focus-visible) {
	inset-inline-start: 0;
	transition-delay: 0s;
	box-shadow: 0 0 16px rgba(0, 0, 0, 0.25);
}

/* The panel scrolls itself when it is taller than the window. */
#amf-menu #adminmenuwrap {
	position: relative;
	z-index: auto;
	float: none;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: none;
}

#amf-menu #adminmenuwrap::-webkit-scrollbar {
	display: none;
}

/* Fly-outs escape the scrolling panel; the script sets the variables. */
#amf-menu #adminmenu .wp-submenu {
	position: fixed;
}

#amf-menu #adminmenu .opensub .wp-submenu {
	top: var(--amf-sub-top, 0px);
	right: var(--amf-sub-right, auto);
	left: var(--amf-sub-left, auto);
	margin: 0;
}

/* Core also opens a fly-out on its link's focus; here only the script opens them. */
#amf-menu #adminmenu li.menu-top:not(.opensub) > a.menu-top:focus + .wp-submenu {
	top: -1000em;
}

/* Theme reset: the browser's defaults, which is what wp-admin leaves the menu with. */
.amf-menu.amf-menu :where(:not(button)),
.amf-menu.amf-menu *::before,
.amf-menu.amf-menu *::after {
	box-sizing: content-box;
}

.amf-menu.amf-menu :where(ul, li) {
	margin: 0;
	padding: 0;
	list-style: none;
}

.amf-menu.amf-menu :where(a) {
	text-decoration: none;
	box-shadow: none;
	transition-property: border, background, color;
	transition-duration: 0.05s;
	transition-timing-function: ease-in-out;
}

.amf-menu.amf-menu :where(button) {
	box-sizing: border-box;
	min-width: 0;
	min-height: 0;
	border-radius: 0;
	box-shadow: none;
	font: inherit;
	line-height: normal;
	letter-spacing: normal;
	text-transform: none;
}

.amf-menu.amf-menu :where(img) {
	display: inline;
	max-width: none;
	height: auto;
}

/* Pin button: core's collapse button, with a pin. */
#amf-pin-button {
	display: block;
	position: relative;
	width: 100%;
	height: 34px;
	margin: 0;
	padding: 0;
	overflow: visible;
	border: none;
	background: none;
	box-shadow: none;
	color: #a7aaad;
	cursor: pointer;
	text-align: start;
}

#amf-pin-button:hover,
#amf-pin-button:focus {
	color: #72aee6;
	box-shadow: inset 4px 0 0 0 currentColor;
	transition: box-shadow 0.1s linear;
}

#amf-pin-button:focus {
	outline: 1px solid transparent;
	outline-offset: -1px;
}

#amf-pin-button .amf-pin-button-icon,
#amf-pin-button .amf-pin-button-label {
	display: block;
	position: absolute;
	top: 0;
	inset-inline-start: 0;
}

#amf-pin-button .amf-pin-button-icon {
	width: 36px;
	height: 34px;
}

#amf-pin-button .amf-pin-button-label {
	top: 8px;
	padding-inline-start: 36px;
	white-space: nowrap;
}

#amf-pin-button .amf-pin-button-icon::after {
	content: "\f109";
	display: block;
	position: relative;
	top: 7px;
	font: normal 20px/1 dashicons;
	text-align: center;
	transform: rotate(45deg);
	transition: transform 0.1s ease-in-out;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

#amf-pin-button[aria-pressed="true"] .amf-pin-button-icon::after {
	transform: none;
}

.folded #amf-pin-button .amf-pin-button-label {
	display: none;
}

/* A pinned menu takes its room from the page. */
@media screen and (min-width: 783px) {
	html:has(> body.amf-pinned) {
		margin-inline-start: 160px;
	}

	html:has(> body.amf-pinned.amf-folded) {
		margin-inline-start: 36px;
	}
}

/* Phones get the toolbar only, as in wp-admin. */
@media screen and (max-width: 782px) {
	#amf-menu {
		display: none;
	}
}

@media print {
	#amf-menu {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	#amf-menu,
	#amf-pin-button .amf-pin-button-icon::after {
		transition: none;
	}
}