Avatar Label

.pds-avatar-label {
	align-items: center;
	display: flex;
	min-width: 0;
}

.pds-avatar-label__label,
.pds-avatar-label__attribution {
	color: var(--pds-color-foreground-default);
	font-family: var(--pds-typography-ff-default);
	font-weight: var(--pds-typography-fw-medium);
	line-height: 1;
	overflow: hidden;
	padding-block: 0.15em;
	text-overflow: ellipsis;
	transform: translateY(-0.1em);
	white-space: nowrap;
}

/* Attribution ("on behalf of ..."): lighter and secondary, and it gives way
   before the name does. Name, attribution and avatar are separate flex items
   spaced by the component's gap. */
.pds-avatar-label__attribution {
	color: var(--pds-color-foreground-default-secondary);
	font-weight: var(--pds-typography-fw-regular);
	min-width: 0;
}

.pds-avatar-label--has-attribution .pds-avatar-label__label {
	flex-shrink: 0;
}

/* Size variants — sets the gap and label text size together; AgentAvatar's own
   size is set directly via the `size` prop passed through from AvatarLabel. */

.pds-avatar-label--xs {
	gap: var(--pds-spacing-2xs);
}

.pds-avatar-label--xs .pds-avatar-label__label,
.pds-avatar-label--xs .pds-avatar-label__attribution {
	font-size: var(--pds-typography-size-xs);
}

.pds-avatar-label--s {
	gap: var(--pds-spacing-2xs);
}

.pds-avatar-label--s .pds-avatar-label__label,
.pds-avatar-label--s .pds-avatar-label__attribution {
	font-size: var(--pds-typography-size-s);
}

.pds-avatar-label--m {
	gap: var(--pds-spacing-xs);
}

.pds-avatar-label--m .pds-avatar-label__label,
.pds-avatar-label--m .pds-avatar-label__attribution {
	font-size: var(--pds-typography-size-s);
}

/* Optional link — the whole component becomes clickable via `linkContent`. */

.pds-avatar-label__link {
	align-items: inherit;
	color: var(--pds-color-foreground-default);
	display: flex;
	gap: inherit;
	min-width: 0;
	text-decoration: none;

	&:hover {
		/* Explicit `text-decoration: none` here (not just on the base rule
		   above) is required: the global `a:hover` foundation rule sets
		   `text-decoration: underline` at (0,1,1) specificity, which beats
		   the base rule's (0,1,0) — without re-declaring it here at (0,2,0),
		   the underline wins during hover regardless of the base rule. */
		cursor: pointer;
		text-decoration: none;

		/* Using `-default` (blue), not `-hover` — the link-hover token is
		   amber/orange in this theme, not a darker blue. */

		.pds-avatar-label__label {
			/* The label has its own explicit `color`, so it doesn't inherit
			   from the link on hover — it has to be targeted directly. */
			color: var(--pds-color-interactive-link-default);
		}

		.pds-agent-avatar__content {
			outline: var(--pds-border-width-outline) solid
				var(--pds-color-interactive-link-default);
			outline-offset: 2px;
		}
	}

	&:focus-visible {
		border-radius: var(--pds-border-radius-container);
		outline: var(--pds-border-width-outline) solid
			var(--pds-color-interactive-focus);
		outline-offset: 2px;
		text-decoration: none;
	}
}