/**
 * ONEsta drawer: shared structure and navigation styles.
 * Layout variants live in slide.css, displace.css and clip.css.
 */

html.onesta-drawer-scroll-locked {
	overflow: hidden;
	overscroll-behavior: none;
}

html:has(body[class*="onesta-drawer-"]) {
	scrollbar-gutter: stable;
}

body[class*="onesta-drawer-"] {
	--onesta-drawer-viewport-start: var(--onestar-admin-bar-offset, 0px);
}

body[class*="onesta-drawer-"] :is(.onesta-drawer-open,.onesta-drawer-close) {
		display: inline-flex;
		box-sizing: border-box;
		min-inline-size: 44px;
		min-block-size: 44px;
		align-items: center;
		justify-content: center;
		color: inherit;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

:is(body[class*="onesta-drawer-"] :is(.onesta-drawer-open,.onesta-drawer-close)):focus-visible {
			outline: 2px solid currentcolor;
			outline-offset: 3px;
		}

body[class*="onesta-drawer-"] :is(.onesta-drawer-open,.onesta-drawer-close) svg {
		pointer-events: none;
	}

body[class*="onesta-drawer-"] .wp-block-navigation:has( > .onesta-drawer-open) {
		min-inline-size: 44px;
	}

/* Compact/narrow base: a closed drawer does not participate in layout. */

body[class*="onesta-drawer-"] .onesta-drawer[data-state="closed"]:not(:popover-open):not(.onesta-drawer-fallback-open),body[class*="onesta-drawer-"] .onesta-drawer[data-onesta-popover-pending]:not(.onesta-drawer-fallback-open) {
		display: none;
	}

@media (width >= 782px) {
		body[class*="onesta-drawer-"] .wp-block-navigation .has-child:not(.onesta-has-mega) > .wp-block-navigation__submenu-icon {
			display: none;
		}

		body[class*="onesta-drawer-"] .wp-block-navigation .has-child:not(.onesta-has-mega) > .wp-block-navigation-item__content::after {
			content: "";
			display: inline-block;
			inline-size: 0.4em;
			block-size: 0.4em;
			margin-inline-start: 0.35em;
			border-inline-end: 1.5px solid currentcolor;
			border-block-end: 1.5px solid currentcolor;
			transform: rotate(45deg) translateY(-0.15em);
			transition: transform var(--onesta-duration, 0.2s) ease;
			vertical-align: middle;
		}

		body[class*="onesta-drawer-"] .wp-block-navigation .has-child:not(.onesta-has-mega):is(:hover,:focus-within) > .wp-block-navigation-item__content::after {
			transform: rotate(-135deg) translateY(-0.1em);
		}

		body[class*="onesta-drawer-"] .wp-block-navigation .has-child:not(.onesta-has-mega) > .wp-block-navigation__submenu-container {
			min-inline-size: 0;
			padding: 0;
			border: 0;
			border-radius: var(--onesta-radius, 0.5rem);
			background: var(--onesta-header-bg, var(--wp--preset--color--background, #fff));
			box-shadow: none;
			color: var(--onesta-header-color, inherit);
			transform: translateY(0.5rem);
			transition:
				opacity var(--onesta-duration, 0.2s) ease,
				transform var(--onesta-duration, 0.2s) ease,
				visibility 0s var(--onesta-duration, 0.2s);
		}

		body[class*="onesta-drawer-"] .wp-block-navigation .has-child:not(.onesta-has-mega):is(:hover,:focus-within) > .wp-block-navigation__submenu-container {
			min-inline-size: 13.75rem;
			padding: 0.5rem 0;
			box-shadow: 0 0.5rem 2rem rgb(0 0 0 / 12%);
			transform: none;
			transition-delay: 0s;
		}

		body[class*="onesta-drawer-"]:not(.onesta-drawer-pc) :is(.onesta-drawer-open,.onesta-drawer-close) {
			display: none;
		}

		body[class*="onesta-drawer-"]:not(.onesta-drawer-pc) .onesta-drawer {
			display: block;
			position: static;
			inset: auto;
			inline-size: auto;
			block-size: auto;
			overflow: visible;
			background: transparent;
		}

		body[class*="onesta-drawer-"]:not(.onesta-drawer-pc) .onesta-drawer[data-state="closed"]:not(:popover-open):not(.onesta-drawer-fallback-open),body[class*="onesta-drawer-"]:not(.onesta-drawer-pc) .onesta-drawer[data-onesta-popover-pending]:not(.onesta-drawer-fallback-open) {
			display: block;
		}

		body[class*="onesta-drawer-"]:not(.onesta-drawer-pc) .onesta-drawer :is(.wp-block-navigation__responsive-close,.wp-block-navigation__responsive-dialog,.wp-block-navigation__responsive-container-content,.wp-block-navigation__container) {
			display: flex;
			position: static;
			inline-size: auto;
			block-size: auto;
			min-block-size: 0;
			overflow: visible;
			padding: 0;
			background: transparent;
			color: inherit;
		}

		body[class*="onesta-drawer-"]:not(.onesta-drawer-pc) .onesta-drawer .wp-block-navigation__container {
			flex-flow: row wrap;
		}

		body[class*="onesta-drawer-"]:not(.onesta-drawer-pc) .onesta-drawer :is(.wp-block-navigation-item,.wp-block-navigation-item__content) {
			inline-size: auto;
		}

		body[class*="onesta-drawer-"]:not(.onesta-drawer-pc) .onesta-drawer-extra {
			display: none;
		}
	}

@media (prefers-reduced-motion: reduce) {
		body[class*="onesta-drawer-"] :is(.onesta-drawer,.onesta-drawer::before,.onesta-drawer::after,.onesta-drawer *,.onesta-drawer *::before,.onesta-drawer *::after,.wp-site-blocks,.wp-site-blocks::before,.wp-site-blocks::after) {
			scroll-behavior: auto;
			animation: none;
			transition: none;
		}
	}

.onesta-drawer :is(svg,.onesta-drawer-open svg,.onesta-drawer-close svg) {
		pointer-events: none;
	}

.onesta-drawer:is([popover],[data-onesta-drawer-layer="document"]) {
		box-sizing: border-box;
		max-inline-size: none;
		max-block-size: none;
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		color: inherit;
	}

.onesta-drawer[data-onesta-drawer-layer="document"]:not(.onesta-drawer-document-open) {
		display: none;
	}

.onesta-drawer::backdrop {
		background: transparent;
	}

/* ONEsta owns this class lifecycle after Core's controller is dequeued. */

.onesta-drawer.wp-block-navigation__responsive-container.is-menu-open {
		animation: none;
	}

.onesta-drawer.onesta-drawer-fallback-open {
		position: fixed;
		inset-block: var(--onesta-drawer-viewport-start, 0px) 0;
		inset-inline: 0;
		z-index: 100000;
	}

.onesta-drawer .wp-block-navigation__responsive-close {
		display: contents;
	}

.onesta-drawer [data-onesta-drawer-sheet] {
		box-sizing: border-box;
		position: relative;
		min-inline-size: 0;
		min-block-size: 100%;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
		background: var(--onesta-drawer-bg, var(--wp--preset--color--base, #fff));
		color: var(--onesta-drawer-text, var(--wp--preset--color--contrast, #111));
		-webkit-overflow-scrolling: touch;
	}

:is(.onesta-drawer [data-onesta-drawer-sheet]):focus-visible {
			outline: 2px solid currentcolor;
			outline-offset: 3px;
		}

.onesta-drawer .onesta-drawer-close {
		display: inline-flex;
		position: absolute;
		inset-block-start: max(1rem, env(safe-area-inset-top));
		inset-inline-end: max(1rem, env(safe-area-inset-right));
		z-index: 2;
	}

.onesta-drawer .wp-block-navigation__responsive-container-content {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: clamp(1rem, 3vi, 2rem);
		min-inline-size: 0;
		padding-block: calc(44px + 1rem) 1rem;
	}

.onesta-drawer .wp-block-navigation__container {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		inline-size: 100%;
		margin: 0;
		padding: 0;
		list-style: none;
	}

.onesta-drawer .wp-block-navigation-item {
		box-sizing: border-box;
		inline-size: 100%;
		min-inline-size: 0;
	}

.onesta-drawer .wp-block-navigation-item:nth-child(1) { --onesta-drawer-stagger: 0; }

.onesta-drawer .wp-block-navigation-item:nth-child(2) { --onesta-drawer-stagger: 1; }

.onesta-drawer .wp-block-navigation-item:nth-child(3) { --onesta-drawer-stagger: 2; }

.onesta-drawer .wp-block-navigation-item:nth-child(4) { --onesta-drawer-stagger: 3; }

.onesta-drawer .wp-block-navigation-item:nth-child(5) { --onesta-drawer-stagger: 4; }

.onesta-drawer .wp-block-navigation-item:nth-child(6) { --onesta-drawer-stagger: 5; }

.onesta-drawer .wp-block-navigation-item:nth-child(7) { --onesta-drawer-stagger: 6; }

.onesta-drawer .wp-block-navigation-item:nth-child(8) { --onesta-drawer-stagger: 7; }

.onesta-drawer .wp-block-navigation-item:nth-child(9) { --onesta-drawer-stagger: 8; }

.onesta-drawer .wp-block-navigation-item:nth-child(10) { --onesta-drawer-stagger: 9; }

.onesta-drawer .wp-block-navigation-item__content {
		box-sizing: border-box;
		display: flex;
		inline-size: 100%;
		min-block-size: 44px;
		align-items: center;
		padding: 0.75rem 0;
		color: inherit;
		overflow-wrap: anywhere;
	}

.onesta-drawer .wp-block-navigation__submenu-icon {
		display: inline-flex;
		min-inline-size: 44px;
		min-block-size: 44px;
		align-items: center;
		justify-content: center;
	}

:is(.onesta-drawer .wp-block-navigation__submenu-icon) svg {
			margin-block-start: 0;
			transition: transform var(--onesta-duration, 0.2s) ease;
		}

.onesta-drawer .wp-block-navigation-submenu__toggle[aria-expanded="true"] > svg {
		transform: rotate(180deg);
	}

.onesta-drawer .wp-block-navigation__responsive-container-content:has(.onesta-drawer-extra) > .wp-block-navigation__container {
		display: none;
	}

.onesta-drawer .onesta-drawer-extra {
		display: block;
		inline-size: 100%;
	}