[data-avatar] {
	aspect-ratio: 1/1;
	border-radius: 1000rem;
	object-fit: cover;
	vertical-align: middle;
	background-color: var(--col-bg);
	width: 1.5lh;

	@media (prefers-contrast: more) {
		border: 2px solid var(--col-fg);
	}
}

[data-avatar]:not(img) {
	/* todo: auto-contrast */
	display: inline-grid;
	place-items: center;
	width: 1.5lh;
	padding: 0.3rem;
	background-color: var(--col-fg2);
	color: var(--col-bg);
	overflow: hidden;
	font-weight: 700;
}

[data-avatar]:has(> img), [data-avatar]:has(> :is(button, a[href]) > img) {
	padding: 0;

	img {
		border-radius: 1000rem;
	}
}

a:has(> [data-avatar]) {
	text-decoration: none;
}

[data-avatar] {
	&:has(a[href] > :first-child:last-child):first-child:last-child,
	&:has(button), &:is(button) {
		position: relative;
		border: 2px solid var(--col-accent);
		translate: 0 0;
		--t-translate: 0.2s;
		z-index: 1;
		padding: 0;
	}

	&:has(a[href]:hover > :first-child:last-child),
	&:has(button:hover), &:is(button:hover) {
		translate: 0 -0.3rem;
		z-index: 2;
		border-color: var(--col-accent2);
	}

	button {
		width: 100%;
		height: 100%;
	}
}

[data-group]:not([data-group="vertical"])
	> :is([data-avatar]:not(:first-child), a:has(> [data-avatar]):not(:first-child)) {
	margin-inline-start: -0.6em;
}

[data-group="vertical"] > :is([data-avatar]:not(:first-child), a:has(> [data-avatar]):not(:first-child)) {
	margin-block-start: -0.6em;
}