:host {
  --padding: var(--manifold-tag-padding, 0.25em 1em);
  --text-color: var(--manifold-tag-text-color, var(--manifold-text-color-accent));
  --font-family: var(--manifold-tag-font-family, var(--manifold-font-family));
  --font-weight: var(--manifold-tag-font-weight, 700);
  --font-size: var(--manifold-tag-font-size, var(--manifold-font-d3));
  --text-transform: var(--manifold-tag-text-transform, initial);
  --background: var(--manifold-tag-background, var(--manifold-color-primary));
  --free-background: var(--manifold-tag-free-background, var(--background));
  --free-text-color: var(--manifold-tag-free-text-color, var(--text-color));
  --radius: var(--manifold-tag-radius, 3em);

  display: -webkit-inline-box;

  display: inline-flex;
  -webkit-box-align: center;
          align-items: center;
  padding: var(--padding);
  color: var(--text-color);
  font-weight: var(--font-weight);
  font-size: var(--font-size);
  line-height: 1.5;
  text-transform: var(--text-transform);
  background: var(--background);
  border-radius: var(--radius);
}

:host([data-tag='free']) {
  color: var(--free-text-color);
  background: var(--free-background);
}