/**
 * What an avatar looks like as a menu trigger.
 *
 * The menu it opens is styled in assets/css/menu.css, which is every menu in
 * Spaces; this is only the avatar end of it.
 */

/* 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;
	}
}