* {
  box-sizing: var(--air-box-sizing, border-box);
}

:host {
  display: var(--air-badge-host-display, inline-block);
}

.badge {
  display: var(--air-badge-display, block);
  padding-top: var(--air-badge-padding-top, var(--air-spacing-01, 0.25rem));
  padding-right: var(--air-badge-padding-right, var(--air-spacing-02, 0.5rem));
  padding-bottom: var(--air-badge-padding-bottom, var(--air-spacing-01, 0.25rem));
  padding-left: var(--air-badge-padding-left, var(--air-spacing-02, 0.5rem));
  border-radius: var(--air-badge-border-radius, calc(var(--air-badge-font-size, var(--air-caption-font-size, 0.875rem)) + 2 * var(--air-spacing-01, 0.25rem)));
  background-color: var(--air-badge-background-color, var(--air-color-accent, #8a2be2));
}
.badge-text {
  font-size: var(--air-badge-font-size, var(--air-caption-font-size, 0.875rem));
  font-family: var(--air-badge-font-family, var(--air-caption-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"));
  font-weight: var(--air-badge-font-weight, var(--air-caption-font-weight, 400));
  line-height: var(--air-badge-line-height, var(--air-caption-line-height, 1.5));
  color: var(--air-badge-color, var(--air-color-white, #ffffff));
}