/* ===================================
   BENEFIT GRADE CHIP
   The privadent benefit grade under the tariff name of the tariff card (benefit-board.ejs), as the offer's
   tariff card shows it (frontend _grade-chip.scss). Linked by benefit-board.ejs.
   =================================== */

/* --- Benefit grade chip ("Leistung | 1"), as the offer's tariff card shows it (_grade-chip.scss): "Leistung" on
   white, the grade in white on a segment whose colour follows the grade (`data-tone`). --- */
.tariff-card__grade {
  display: inline-flex;
}
.tariff-card__grade .grade-chip[hidden] {
  display: none;
}
.grade-chip {
  --grade-bg: #0b8a5f;
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--grade-bg) 45%, transparent);
  border-radius: 7px;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}
.grade-chip[data-tone="brilliant"] { --grade-bg: #0d9a6a; }
.grade-chip[data-tone="fresh"] { --grade-bg: #4f8a1f; }
.grade-chip[data-tone="mellow"] { --grade-bg: #6f8a14; }
.grade-chip[data-tone="muted"] { --grade-bg: #7f7a12; }
.grade-chip[data-tone="faded"] { --grade-bg: #8a6f14; }
.grade-chip__key,
.grade-chip__value {
  display: inline-flex;
  align-items: center;
  height: 20px;
}
.grade-chip__key {
  padding: 0 7px;
  background: #fff;
  color: rgba(0, 0, 0, 0.6);
}
.grade-chip__value {
  padding: 0 8px;
  background: var(--grade-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.08);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}