/* start dropdown */
#logout-menuBar,
#action-menuBar {
	position: relative;
}
#logout-link,
#action-link {
	font-size: 12px;
	font-weight: 700;
}
#logout-menu,
#action-menu {
	max-height: 0;

	display: block;
	position: absolute;
	right: 0;

	background: var(--lightest);
	border: 0 solid transparent;
	border-radius: 4px;
	overflow: hidden;
	z-index: 999;
	transition: all 1s ease-out; /* all := max-height, border */
}
#logout-menu a,
#action-menu a {
	display: block;

	border-bottom: 1px solid var(--primary);
	color: var(--darkest);
	padding: var(--space-xsmall);
	text-decoration: none;
	text-align: right;
	white-space: nowrap;
}
#logout-menu a:first-child {
	border-radius: 4px 4px 0 0;
}
#logout-menu a:last-child {
	border-bottom: none;
	border-radius: 0 0 4px 4px;
}
#logout-menu a:hover,
#logout-menu a:focus,
#action-menu a:hover,
#action-menu a:focus {
	background: var(--light-gray);
	color: var(--darkest);
}
/* expanded state */
#logout-link:hover #logout-menu,
#logout-link.locked #logout-menu,
#action-link:hover #action-menu,
#action-link.locked #action-menu,
#logout-header:focus-visible + #logout-menu,
#action-header:focus-visible + #action-menu,
#logout-menu:has(a:focus-visible),
#action-menu:has(a:focus-visible) {
	border: 1px solid var(--primary);
	max-height: 200px;
}
#logout-header,
#action-header {
	transition: border-radius 1s ease-out;
}
/* expanded state */
#logout-link:hover #logout-header,
#logout-link.locked #logout-header,
#action-link:hover #action-header,
#action-link.locked #action-header,
#logout-header:focus-visible,
#action-header:focus-visible {
	border-radius: 4px 4px 0 0;
}
#dropdown-arrow {
	margin-left: var(--space-2xsmall);
}
#dropdown-arrow:before {
	content: "\f0d7";
}
/* expanded state */
#logout-link:hover #dropdown-arrow:before,
#action-link:hover #dropdown-arrow:before {
	content: "\f0d8";
}
/* end dropdown */