/*
 * Markup cell component — pairs with app/views/shared/_markup_cell.html.erb,
 * rendered once per market (Canada, Global) in a .wines-table row and in the
 * wines#show Details <dl> (a dd.markup-canada / dd.markup-global).
 * The headline reads "+38.9% (+$35.01)": percentage first, the same gap in
 * dollars in brackets beside it, then the sources naming the baseline the
 * markup was measured against. Red is always "the LCBO charges more".
 */

/* Table columns stay on one line; the detail card wraps to fit narrow widths. */
.wines-table .markup-canada,
.wines-table .markup-global,
.wines-table .markup-source {
  white-space: nowrap;
}

:is(.markup-canada, .markup-global) .markup-percentage {
  font-weight: 600;
}

:is(.markup-canada, .markup-global) .markup-amount {
  font-size: var(--font-size-xs);
  font-weight: 500;
}

/* Neither token clears AA 4.5:1 at full strength on every row: --color-success
   is ~2.9:1 on a light row, --color-danger 4.45:1 on a hovered dark row, and the
   12px .markup-amount can't lean on the large-text allowance. Mixing each toward
   --color-text (the .btn-warning recipe) darkens it in light mode and lightens it
   in dark mode from one rule: >=5.1:1 on every row background, hover included, in
   both themes. test/system/markup_contrast_test.rb measures it. */
:is(.markup-canada, .markup-global) :is(.markup-percentage, .markup-amount).positive {
  color: color-mix(in srgb, var(--color-danger) 85%, var(--color-text));
}

:is(.markup-canada, .markup-global) :is(.markup-percentage, .markup-amount).negative {
  color: color-mix(in srgb, var(--color-success) 60%, var(--color-text));
}

:is(.markup-canada, .markup-global) .no-markup {
  color: var(--color-text-light);
  font-weight: 600;
}

:is(.markup-canada, .markup-global) .markup-sources {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--space-xs);
}

:is(.markup-canada, .markup-global) .markup-source {
  font-size: var(--font-size-2xs);
  /* Not --color-text-muted: this line is the only place the baseline and the
     per-provider breakdown appear, and muted is <3:1 at this size in both themes. */
  color: var(--color-text-light);
}