/* [L5] New SDC: no existing component is a circular stat badge (L1-L4 ruled out;
   see docs/css-change-log.md, entry "stat-badge"). */
.bad-stat-badge--left {
  text-align: start;
}

.bad-stat-badge--center {
  text-align: center;
}

.bad-stat-badge--right {
  text-align: end;
}

/* Fixed width and height as well as aspect-ratio, so a flex or grid parent that
   stretches its children cannot turn the circle into an oval. */
.bad-stat-badge__circle {
  align-items: center;
  aspect-ratio: 1;
  background-color: var(--color-secondary-400);
  border-radius: 50%;
  color: var(--color-neutral-000);
  display: inline-flex;
  flex-direction: column;
  height: 12rem;
  justify-content: center;
  text-align: center;
  width: 12rem;

  @media (min-width: 1025px) {
    height: 18rem;
    width: 18rem;
  }
}

.bad-stat-badge__value {
  font-family: var(--text-font-display);
  font-size: calc(var(--text-size-3xl) * var(--heading-scale));
  font-weight: var(--text-weight-bold);
  line-height: 1;
  margin: 0;

  @media (min-width: 1025px) {
    font-size: 4.75rem;
  }
}

.bad-stat-badge__label {
  font-family: var(--text-font-display);
  font-size: calc(var(--dimension-s) * 1.1);
  font-weight: var(--text-weight-regular);
  line-height: var(--text-line-height-sm);
  margin: var(--dimension-xs) 0 0;
}