:root {
  --badge-size: 1.5em;
}

.badge {
  --transition: 300ms ease;
  --badge-background: var(--color-bg);

  align-items: center;
  background-color: var(--badge-background, var(--color-subtle-light));
  border-radius: var(--badge-border-radius, 1em);
  border: var(--badge-border-size, 1px) solid var(--badge-border-color, var(--color-subtle-dark));
  color: var(--badge-color, var(--color-ink));
  display: inline-flex;
  font-size: 0.75em;
  font-weight: 600;
  gap: var(--badge-gap, 0.25em);
  justify-content: center;
  padding: var(--badge-padding, 0.25em 0.75em);
  transition:
    background-color var(--transition),
    border var(--transition),
    color var(--transition),
    filter var(--transition),
    opacity var(--transition);

  img {
    -webkit-touch-callout: none;
    user-select: none;
  }

  /* Default icon styles */
  &:where(:has(img, svg)) {
    text-align: start;

    img, svg {
      block-size: var(--badge-icon-size, 1em);
      inline-size: var(--badge-icon-size, 1em);
      max-inline-size: unset;
    }

    img:not([class]) {
      filter: invert(0);

      @media (prefers-color-scheme: dark) {
        filter: invert(1);
      }
    }
  }

  /* Circle badges */
  &.badge--circle {
    --badge-border-radius: 50%;
    --badge-padding: 0;

    aspect-ratio: 1;
    block-size: var(--badge-size);
    display: grid;
    inline-size: var(--badge-size);
    place-items: center;

    > * {
      grid-area: 1/1;
    }
  }

  @media print {
    display: none;
  }
}

/* Variants */
.badge--link {
  --badge-background: var(--color-link);
  --badge-color: var(--color-ink-reversed);
  --badge-border-color: var(--color-link);
}

.badge--negative {
  --badge-background: var(--color-negative);
  --badge-color: var(--color-ink-reversed);
  --badge-border-color: var(--color-negative);
}

.badge--positive {
  --badge-background: var(--color-positive);
  --badge-color: var(--color-ink-reversed);
  --badge-border-color: var(--color-positive);
}

.badge--reversed {
  --badge-background: var(--color-ink);
  --badge-color: var(--color-bg);
  --badge-border-color: var(--color-ink);
}

:is(.badge--link, .badge--negative, .badge--positive, .badge--reversed) {
  img:not([class]) {
    filter: invert(1);

    @media (prefers-color-scheme: dark) {
      filter: invert(0);
    }
  }
}

.badge--small {
  font-size: 0.65em;
}

.badge--large {
  font-size: 0.9em;
  --badge-padding: 0.4em 1em;
}

.badge--outline {
  --badge-background: transparent;
  --badge-border-size: 1px;
}

.badge--pill {
  --badge-border-radius: 2em;
}

.badge--square {
  --badge-border-radius: 0.25em;
}