/*
 * ToySetFox deal label: a price tag with a grommet eyelet.
 *
 *   <span class="tsf-deal">−28%</span>
 *   <span class="tsf-deal tsf-deal--lg">−28%</span>
 *   <span class="tsf-deal tsf-deal--ink">Beste prijs</span>
 *
 * Everything scales with font-size (em), so one class covers a table
 * chip and a social post. The label is 2em high with a 45° chamfer of
 * 1em; the eyelet is a real hole (CSS mask), so it shows whatever is
 * behind and needs no background matching. Reads tokens.css; falls back
 * to the brand colours on its own.
 *
 * Minimum: 12 px font-size (the hole is then 3.4 px across).
 * The label is decorative framing; the text inside stays real text.
 */

.tsf-deal {
  --tsf-deal-eye: 0.72em; /* eyelet centre from the point */
  --tsf-deal-hole: 0.15em; /* hole radius */
  --tsf-deal-ring: 0.12em; /* ring width */

  position: relative;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 2em;
  padding: 0 0.62em 0 1.5em;
  border-radius: 0 0.32em 0.32em 0;
  background: var(--deal-bg, #ee5a24);
  color: var(--deal-text, #1f1b19);
  font-family: var(--font-display, 'Bricolage Grotesque', system-ui, sans-serif);
  font-size: var(--text-ui, 0.9375rem);
  font-weight: var(--fw-price, 800);
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  vertical-align: middle;
  clip-path: polygon(0 50%, 1em 0, 100% 0, 100% 100%, 1em 100%);
  -webkit-mask: radial-gradient(circle at var(--tsf-deal-eye) 50%, transparent var(--tsf-deal-hole), #000 calc(var(--tsf-deal-hole) + 0.5px));
  mask: radial-gradient(circle at var(--tsf-deal-eye) 50%, transparent var(--tsf-deal-hole), #000 calc(var(--tsf-deal-hole) + 0.5px));
}

/* the grommet ring around the hole */
.tsf-deal::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--tsf-deal-eye) - var(--tsf-deal-hole) - var(--tsf-deal-ring));
  box-sizing: border-box;
  width: calc(2 * (var(--tsf-deal-hole) + var(--tsf-deal-ring)));
  height: calc(2 * (var(--tsf-deal-hole) + var(--tsf-deal-ring)));
  margin-top: calc(-1 * (var(--tsf-deal-hole) + var(--tsf-deal-ring)));
  border: var(--tsf-deal-ring) solid var(--deal-ring, #1f1b19);
  border-radius: 50%;
}

.tsf-deal--sm {
  font-size: var(--text-xs, 0.8125rem);
}

.tsf-deal--lg {
  font-size: var(--text-h3, 1.5rem);
}

/* ink label for a secondary tag ("Beste prijs", "Bester Preis") */
.tsf-deal--ink {
  background: var(--ink, #1f1b19);
  color: var(--paper, #fff8f1);
  font-weight: var(--fw-bold, 700);
}

.tsf-deal--ink::before {
  border-color: var(--fox, #ee5a24);
}