/* stylelint-disable no-descending-specificity -- grouped by context. */

.cw-account-nav {
	position: relative;
}

.cw-account-nav__toggle {
	appearance: none;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	line-height: 0;
	margin: 0;
	padding: 0;
	vertical-align: middle;
}

/* The theme paints every button as filled on hover and focus, which would
   box in the chevron. */
.cw-account-nav__toggle:hover,
.cw-account-nav__toggle:focus {
	background: none;
	color: inherit;
}

.cw-account-nav__toggle:focus-visible {
	outline: 1px dotted currentcolor;
	outline-offset: 2px;
}

.cw-account-nav__toggle:focus:not(:focus-visible) {
	outline: none;
}

.cw-account-nav__toggle svg {
	fill: currentcolor;
	height: 18px;
	transition: transform 0.15s ease;
	width: 18px;
}

@media (prefers-reduced-motion: reduce) {

	.cw-account-nav__toggle svg {
		transition: none;
	}
}

.cw-account-nav[data-cw-open] .cw-account-nav__toggle svg {
	transform: rotate(180deg);
}

.cw-account-nav__submenu {
	display: none;
}

/* Hover opens the panel from the script, which sets this attribute too, so the
   toggle never reports a state the panel contradicts. */
.cw-account-nav[data-cw-open] > .cw-account-nav__submenu {
	display: block;
}

/* The `ul` outweighs `.site-header .nav3 li:nth-child(n+2)`, which lays the
   tertiary menu out as a spaced row. The site's own CSS also shouts the
   tertiary labels, which a stacked panel should not inherit. */
:is(.site-header, .mobile-sidebar, .subpage-sidebar) :is(.nav3, .cw-account-nav--icon) .cw-account-nav__submenu {
	font-weight: 400;
	text-align: left;
	text-transform: none;
}

:is(.site-header, .mobile-sidebar, .subpage-sidebar) :is(.nav3, .cw-account-nav--icon) ul.cw-account-nav__submenu li {
	display: block;
	margin: 0;
}

/* The site's own CSS hangs a divider off every tertiary item but the last,
   which in a stacked panel reads as a stray tick and doubles the row height. */
:is(.site-header, .mobile-sidebar, .subpage-sidebar) :is(.nav3, .cw-account-nav--icon) ul.cw-account-nav__submenu li::after {
	content: none;
}

:is(.site-header, .mobile-sidebar, .subpage-sidebar) :is(.nav3, .cw-account-nav--icon) .cw-account-nav__submenu a {
	display: block;
	margin: 0;
	white-space: nowrap;
}

:is(.site-header, .mobile-sidebar, .subpage-sidebar) :is(.nav3, .cw-account-nav--icon) .cw-account-nav__submenu a:hover {
	opacity: 1;
}

:is(.site-header, .mobile-sidebar, .subpage-sidebar) :is(.nav3, .cw-account-nav--icon) ul.cw-account-nav__submenu .cw-account-nav__logout {
	margin: 0.375rem 0 0;
	padding-top: 0.375rem;
	position: relative;
}

:is(.site-header, .mobile-sidebar, .subpage-sidebar) :is(.nav3, .cw-account-nav--icon) ul.cw-account-nav__submenu .cw-account-nav__logout a {
	align-items: center;
	display: flex;
	gap: 0.5rem;
}

.cw-account-nav__logout::before {
	background-color: currentcolor;
	content: "";
	height: 1px;
	left: 0;
	opacity: 0.25;
	position: absolute;
	right: 0;
	top: 0;
}

.cw-account-nav__logout svg {
	fill: currentcolor;
	flex-shrink: 0;
	height: 16px;
	width: 16px;
}

/* The theme font-size tokens are `em` steps, so a list nested inside
   `.site-header .nav3 li` compounds them; the base size resets the chain. */
.site-header :is(.nav3, .cw-account-nav--icon) .cw-account-nav__submenu {
	background-color: var(--newspack-theme-color-bg-dark, #111);
	border-radius: 4px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
	color: var(--newspack-theme-color-bg-body, #fff);
	font-size: var(--newspack-theme-font-size-base);
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	position: absolute;
	right: 0;
	top: 100%;

	/* One below `#wpadminbar`, so the bar stays on top for signed-in editors. */
	z-index: 99998;
}

/* Bridges the margin gap so the pointer stays inside the menu item. */
.site-header :is(.nav3, .cw-account-nav--icon) .cw-account-nav__submenu::before {
	content: "";
	height: 12px;
	left: 0;
	position: absolute;
	right: 0;
	top: -12px;
}

.site-header :is(.nav3, .cw-account-nav--icon) .cw-account-nav__submenu a {
	background-color: transparent;
	border-radius: 0;
	color: var(--newspack-theme-color-bg-body, #fff);
	padding: 0.5rem 1rem;
}

.site-header :is(.nav3, .cw-account-nav--icon) .cw-account-nav__submenu li:first-child a {
	border-radius: 4px 4px 0 0;
}

.site-header :is(.nav3, .cw-account-nav--icon) .cw-account-nav__submenu li:last-child a {
	border-radius: 0 0 4px 4px;
}

.site-header :is(.nav3, .cw-account-nav--icon) .cw-account-nav__submenu a:hover,
.site-header :is(.nav3, .cw-account-nav--icon) .cw-account-nav__submenu a:focus {
	background-color: #020202;
}

/* The small-screen icon sits outside any nav menu and opens from its link. */
.site-header .cw-account-nav--icon .cw-account-nav__toggle {
	display: none;
}

:is(.mobile-sidebar, .subpage-sidebar) .nav3 .cw-account-nav__submenu {
	padding: 0.25rem 0 0;
}

:is(.mobile-sidebar, .subpage-sidebar) .nav3 .cw-account-nav__submenu a {
	padding: 0.125rem 0.5rem;
}