// Clickable Steam avatar (see the razor). Size and image come inline from the component; the anchor
// label fills the face on top and is the only thing that takes pointer events, so hosts that are
// pointer-events:none (LeaderboardRow) still get a working click here.
SteamAvatar {
	position: relative;
	flex-shrink: 0;
	background-size: cover;
	background-position: center;

	// :hover reaches ancestors of the hovered anchor label, so this lights up while the link is live.
	&:hover {
		filter: brightness( 1.25 );
	}

	// Pressed: nudge down-right like the theme's square buttons (a translate, so the face keeps its
	// size) and dim instead of brighten.
	&:active {
		transform: translate( 1px, 1px );
		filter: brightness( 0.9 );
	}

	WebLinkLabel {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		align-items: center;
		justify-content: center;
		text-align: center;
		pointer-events: all;
		cursor: blank-hand;
		font-family: "Material Icons";
		color: rgba( 0, 0, 0, 0 );
	}
}