/*
  The streak's row in the account menu, under the name: a filled tile rather than a plain row, from
  the streaks mockup. The menu's own rows are `atomics-menu`'s; these rules out-specify them.
*/

atomics-streak-row {
  display: contents;
}

/*
  Not shrunk by the menu, a column that scrolls once it runs out of room: a row's two lines would be
  squeezed into one. The tile is the mockup's grey glass, since `--ds-fill` is the menu's own colour
  in the dark.
*/
atomics-menu [role='menu'] atomics-streak-row [streak-row] {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  width: auto;
  margin: 2px 4px 4px;
  padding: 8px 8px 8px 10px;
  border-radius: 9px;
  background: rgba(127, 127, 127, 0.13);
  color: var(--ds-ink);
  text-decoration: none;
}

atomics-menu [role='menu'] atomics-streak-row [streak-row][hidden] {
  display: none;
}

atomics-menu [role='menu'] atomics-streak-row [streak-row]:is(:hover, :focus-visible) {
  background: var(--ds-accent-soft);
  color: var(--ds-ink);
  outline: none;
}

atomics-streak-row [flame] {
  flex: 0 0 auto;
  color: var(--ds-accent);
}

atomics-streak-row [flame] path {
  fill: currentColor;
}

/* No streak running: the flame outlined and grey. */
atomics-streak-row [streak-row][data-off] [flame] {
  color: var(--ds-mute);
}

atomics-streak-row [streak-row][data-off] [flame] path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

atomics-streak-row [row-text] {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

atomics-streak-row [row-title] {
  font-size: 13px;
  font-weight: 650;
}

atomics-streak-row [row-sub] {
  color: var(--ds-mute);
  font-size: 11.5px;
}