@import "https://assets.elements.dev/assets/app/shared/styles/page.bbd96b3881544aa4.css";

/*
 * <ActionRow> — paired vote+comments cluster + right-anchored kebab.
 * Bare at rest, hover paints a soft bg pill, voted flips the whole
 * cluster to the info hue (currentColor on the SVGs makes both
 * icons + the count + the · all recolor together).
 */

.action-row {
  display: flex;
  align-items: center;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 12px;
  /* Tabular nums so the score column doesn't jiggle when a vote
     flips 999 → 1.0k or 9 → 10. */
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  /* The cluster's hover-pill extends 6px past the visible text via
     padding + negative margin. The row needs enough horizontal
     headroom for that to not get clipped against neighbors. */
  line-height: 1;
}

.action-row.is-voted .action-cluster {
  color: var(--accent);
}
.action-row.is-voted .action-cluster .action-sep {
  /* In the voted state the dot should pick up the same accent hue
     so the cluster reads as one tinted unit. currentColor doesn't
     reach the dot because we paint it explicitly in the rest state
     (rule below). Match it here. */
  color: var(--accent);
}

/* ─── Cluster (vote + comments halves, INDEPENDENT hover pills) ──── */

/* The cluster is now just an alignment container. Each half owns
   its own hover pill so the row reads as TWO buttons sharing a
   dot separator, not one mashed unit. Negative left margin pulls
   the first half's left padding back so the visible triangle sits
   flush with the left edge of the parent (matches the title and
   byline above on /feed and /home). */
.action-cluster {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.action-half {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* No padding on the half itself — hover is color-only, so the
     content sits flush against the parent's left edge (aligning
     with the title and byline above on /feed). */
  padding: 0;
  transition: color var(--duration-fast) var(--ease-out);
}
.action-half:hover,
.action-half:active {
  color: var(--accent-deep);
}
.action-half:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* A plain gap between groups, no dot: the vote and comment icons already
   mark where each group starts, and a dot between every item read as
   noise. The markup keeps the element so spacing stays in one place. */
.action-sep {
  display: inline-block;
  width: 14px;
  margin: 0;
  font-size: 0;
  color: transparent;
  user-select: none;
}

/* Inline-links slot — quiet sibling links rendered between the
   vote/comments cluster and the kebab. Same color + size as the
   cluster's count text so they read as actions, not buttons. */
.action-row .action-inline {
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  font-size: inherit;
}
.action-row .action-inline:hover {
  color: var(--ink);
  text-decoration-style: solid;
}

.action-ic {
  display: inline-block;
  width: 12px;
  height: 12px;
  vertical-align: -1px;
  flex-shrink: 0;
}

.action-count {
  display: inline-block;
}

/* ─── Menu kebab (own tap target, own hover pill) ──────────── */

/* Kebab sits IMMEDIATELY next to the comments half — not pinned
   right. Pinning it to the row edge buried it in whitespace; users
   missed it entirely. Keeping it adjacent makes the trio (vote |
   comments | menu) read as one action row. */
.action-menu-wrap {
  display: inline-flex;
  align-items: center;
}

.action-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Override framework `<button>` defaults (44px height, padding,
     line-height, border, bg) — kebab is inline glyph chrome, not
     a sized button. */
  height: auto;
  min-height: 0;
  line-height: 1;
  /* 24px touch target around the 16px glyph, without growing the row. */
  padding: 4px;
  margin: -4px;
  background: transparent;
  border: 0;
  color: var(--ink-soft);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* Color-only hover, matching the action halves. No bg pill, no
     border tint — those come from @elements/ui/style/base/button.css's
     default `button:hover { background; border-color }` which we
     have to explicitly cancel. */
  transition: color var(--duration-fast) var(--ease-out);
}
.action-menu-ic {
  width: 16px;
  height: 16px;
  display: block;
}
.action-menu:hover {
  color: var(--accent-deep);
  background: transparent;
  border-color: transparent;
}
/* No `:active` button-press state. */
.action-menu:active {
  background: transparent;
  border-color: transparent;
  transform: none;
}
.action-menu:focus,
.action-menu:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Menu rows. The content is the package's .menu; consumers that still pass
   plain buttons and links into the slot get the same row treatment as a
   DropdownMenuItem until they move to one. */
.action-menu-list > :is(button, a):not(.menu-item) {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  height: auto;
  min-height: var(--item-height);
  margin: 0;
  padding: 0 var(--item-padding-x);
  border: 0;
  border-radius: var(--radius-item);
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: default;
}
.action-menu-list > :is(button, a):not(.menu-item):hover {
  background: var(--item-highlight);
  color: var(--item-highlight-ink);
}
.action-menu-list > :is(button, a):not(.menu-item):is(:focus, :focus-visible) {
  outline: none;
  box-shadow: none;
}
.action-menu-list > :is(button, a):not(.menu-item):active {
  transform: none;
}
.action-menu-list > .action-menu-divider {
  display: block;
  height: var(--overlay-border-width);
  margin: var(--overlay-padding) calc(var(--overlay-padding) * -1);
  background: var(--overlay-border);
}

/* ─── Compact variant ───────────────────────────────────────── */

.action-row.is-compact {
  font-size: 11px;
}
.action-row.is-compact .action-cluster {
  padding: 4px 6px;
  margin: -4px -6px;
}
.action-row.is-compact .action-menu {
  width: 28px;
  height: 28px;
}

/* ─── Boxes ─────────────────────────────────────────────────────────
   The same controls as a post page: the vote, the comment count and the
   menu are small boxes with a faint border and soft ink, full strength
   on hover. A cast vote takes a light tint of the accent. */
.action-row {
  --ctl-border: color-mix(in srgb, var(--ink) 9%, var(--bg));
  --ctl-ink:    color-mix(in srgb, var(--ink) 52%, var(--bg));
  font-size: 12.5px;
}
.action-row .action-cluster {
  gap: 0.375rem;
}
.action-row .action-sep {
  width: 0.375rem;
}
.action-row .action-cluster .action-sep {
  display: none;
}
.action-row .action-half,
.action-row .action-menu {
  height: 1.625rem;
  min-height: 0;
  padding: 0 0.5rem;
  margin: 0;
  gap: 0.3125rem;
  border: 1px solid var(--ctl-border);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--ctl-ink);
  transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.action-row .action-menu {
  width: 1.625rem;
  padding: 0;
  justify-content: center;
}
.action-row .action-half:hover,
.action-row .action-menu:hover,
.action-row .action-menu[data-state="open"] {
  border-color: var(--rule);
  color: var(--ink);
  background: var(--bg);
}
.action-row .action-ic {
  width: 0.875rem;
  height: 0.875rem;
  vertical-align: 0;
}
.action-row.is-voted .action-cluster {
  color: inherit;
}
.action-row.is-voted .action-vote {
  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg));
  color: var(--accent-deep);
}