.label-pill {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  justify-content: center;
  height: clamp(25px, calc(23.89px + 0.286vw), 28px);
  padding-inline: 10.5px;
  border-radius: var(--radius-label);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: 'Spirit', var(--font-primary);
  /* Spirit is drawn 1.4x larger than the first cut the token was tuned on. */
  font-size: calc(var(--font-size-label-accent) * 0.7143);
  line-height: 1;
  white-space: nowrap;
}

/* Spirit sets tighter than the first cut: 0.125em restores the old width
   (measured: pill 80.5px vs 81.2px). */
.label-pill:not([class*='label-pill--']) {
  letter-spacing: 0.125em;
}

.label-pill--l,
.label-pill--m {
  height: clamp(26px, calc(19.454px + 0.93514vw), 32.92px);
  padding-inline: clamp(12.916px, calc(16.971px + -0.28162vw), 15px);
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: clamp(12px, calc(8.216px + 0.54054vw), 16px);
}

.label-pill--s {
  height: clamp(21px, calc(19.108px + 0.27027vw), 23px);
  padding-inline: 10px;
  background: var(--color-accent);
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: clamp(10px, calc(8.108px + 0.27027vw), 12px);
}

/* Teachers' and Courses' small pill: the frame's 12px/25px badge. */
.label-pill--xs {
  height: auto;
  padding: 4px 15px;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: clamp(12px, calc(10.108px + 0.27027vw), 14px);
  line-height: normal;
}