--radius: 12px;
--radius2x: 2 * var(--radius);

.badge {
  position: relative;
  display: inline-block;
  padding: var(--radius2x) var(--radius2x) 0 0;
}

.badgeData {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-weight: 700;
  font-size: var(--radius);
  width: var(--radius2x);
  height: var(--radius2x);
  border-radius: 50%;
  background-color: var(--background-color);
  color: var(--color-text);
}

.primary {
  background-color: var(--color-accent);
  color: var(--color-text-inverse);
}

.accent {
  background-color: var(--color-accent);
  color: var(--color-text-inverse);
}