/*
  Component: like (thumb-up toggle).
  Figma: 323:2987.

  Has two stacked icons — the outlined "off" state is shown by default,
  the filled red "on" state is revealed when [aria-pressed="true"].
*/

.c-like {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--c-fg);
	cursor: pointer;
	line-height: 1;
}

.c-like:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

.c-like__icon {
	display: inline-flex;
	width: 24px;
	height: 24px;
}
.c-like__icon--on  { display: none; }
.c-like[aria-pressed="true"] .c-like__icon--off { display: none; }
.c-like[aria-pressed="true"] .c-like__icon--on  { display: inline-flex; }

.c-like__count {
	font-size: var(--fs-link-14);
	line-height: var(--lh-link-14);
	font-weight: var(--fw-semibold);
	color: var(--c-fg-muted);
}
.c-like[aria-pressed="true"] .c-like__count { color: var(--c-accent); }