/**
 * The one avatar context menu.
 *
 * The node lives in the top layer (`popover`), so it is outside every stacking
 * context and every `overflow: hidden` on the page: the `--f-color-*` variables
 * it takes its colours from are defined on `:root` and on `body`, which the top
 * layer still inherits from, and per-Space theming sits on `:root` as well.
 *
 * Positioning is the controller's (assets/js/avatar-menu.js); everything here
 * uses logical properties, so right-to-left needs no second stylesheet.
 */

.avatar-menu {
	position: fixed;
	inset: auto; /* The UA centres a popover; ours is placed against its avatar. */
	z-index: 1000; /* Only for the top layer being unavailable, e.g. in a print view. */
	min-inline-size: 12rem;
	max-inline-size: min(20rem, calc(100vw - 1rem));
	margin: 0;
	padding-block: 0.25rem;
	padding-inline: 0;
	border: 0;
	border-radius: var(--f-radius, 4px);
	background-color: var(--f-color-bg-1, #fff);
	box-shadow: 0 8px 30px rgb(0 0 0 / 25%);
	color: var(--f-color-text-0, #222);
	font-size: 0.9rem;
	line-height: 1.3;
	overflow: hidden auto;
	max-block-size: min(24rem, calc(100vh - 2rem));
}

.avatar-menu:not(:popover-open) {
	display: none;
}

/* Whose menu this is. The name is in the menu's aria-label for anyone who
   cannot see it, so this one is hidden from the accessibility tree. */
.avatar-menu-name {
	display: block;
	padding-block: 0.4rem;
	padding-inline: 0.75rem;
	overflow: hidden;
	border-block-end: 1px solid var(--f-color-border-0, #e0e0e0);
	color: var(--f-color-text-2, #666);
	font-size: 0.8rem;
	font-weight: normal;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The rows are text: no icon column, and the weight of the text around them, not
   the theme's link weight (the menu borrows `card` for its looks). */
.avatar-menu-item {
	display: flex;
	gap: 0.5rem;
	align-items: baseline;
	inline-size: 100%;
	margin: 0;
	padding-block: 0.5rem;
	padding-inline: 0.75rem;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-weight: normal;
	text-align: start;
	text-decoration: none;
	cursor: pointer;
}

/* A row is an `a` when it leads somewhere and a `button` when it does something,
   and the two have to be indistinguishable. Foundation gives `[type=button]`
   rounded corners, and that selector is exactly as specific as the class above
   and comes later, which turned an entry like the fridge's "take off this card"
   into a pill among plain rows. So the row says it is not a themed button in
   the terms the theme used. */
.avatar-menu-item[type='button'] {
	border-radius: 0;
	appearance: none;
}

.avatar-menu-item:hover,
.avatar-menu-item:focus-visible {
	background-color: var(--f-color-bg-2, #f2f2f2);
	color: var(--f-color-text-0, #222);
}

.avatar-menu-item[aria-disabled='true'] {
	color: var(--f-color-text-2, #666);
	cursor: default;
}

.avatar-menu-item[aria-disabled='true']:hover {
	background: none;
}

.avatar-menu-item.is-danger {
	color: var(--f-color-alert, #cc4b37);
}

.avatar-menu-item.is-danger:hover,
.avatar-menu-item.is-danger:focus-visible {
	background-color: var(--f-color-alert, #cc4b37);
	color: #fff;
}

/* An entry that is off asking somebody, see §5.3 of the concept. */
.avatar-menu-item.is-loading .avatar-menu-label {
	opacity: 0.6;
}

.avatar-menu-item.is-loading::after {
	content: '';
	inline-size: 0.75em;
	block-size: 0.75em;
	flex: none;
	margin-inline-start: auto;
	border: 2px solid currentColor;
	border-block-start-color: transparent;
	border-radius: 50%;
	animation: avatar-menu-spin 0.8s linear infinite;
}

@keyframes avatar-menu-spin {
	to {
		transform: rotate(1turn);
	}
}

@media (prefers-reduced-motion: reduce) {
	.avatar-menu-item.is-loading::after {
		animation-duration: 3s;
	}
}

/* Entries have to be big enough to hit with a thumb. */
@media (hover: none) {
	.avatar-menu-item {
		align-items: center;
		min-block-size: 2.75rem;
	}
}

/* The trigger. It is a link to the profile before anything is loaded, and stays
   one when the browser has no Popover API, so it never looks like a dead end. */
.avatar-trigger {
	cursor: pointer;
}

/* An avatar inside a Foundation menu (the members list renders its cards into
   `ul.menu.is-accordion-submenu`) is still an avatar, not a menu link. Without
   this, `.accordion-menu .is-accordion-submenu a` wins over `.clipped.square`
   on `padding-bottom`, so the square collapses to a 24px strip and the padding
   box pushes the absolutely positioned image down and to the right. Only the
   trigger inside a menu needs this, and only because it is an `<a>`: the same
   avatar as a `<span>`, or the checkbox variant of a member card, is fine. */
.menu .avatar-container .avatar-trigger {
	padding: 0;
}

/* `.square` states its 1:1 ratio as `padding-bottom`, which the reset above
   clears along with the rest, so put the ratio back. */
.menu .avatar-container .avatar-trigger.square {
	padding-bottom: 100%;
}

/* The theme shrinks an avatar a little while it is being pointed at. That used
   to hang off `img[role="button"]`; the role sits on the trigger now. */
.avatar-trigger img {
	transition: var(--f-transition-short, 0.15s ease);
}

.avatar-container:hover .avatar-trigger img,
.avatar-trigger:hover img {
	border-radius: var(--f-radius, 4px);
	transform: scale(0.8);
}

.avatar-trigger:focus-visible img {
	border-radius: var(--f-radius, 4px);
	transform: scale(0.9);
}

@media (prefers-reduced-motion: reduce) {
	.avatar-trigger img {
		transition: none;
	}
}