[hidden] {
  display: none !important;
}

:host {
  position: relative;
  box-sizing: border-box;
}
:host *, :host *:before, :host *:after {
  box-sizing: inherit;
}

/**
 * @prop --color: The text color (default: primary contrast).
 * @prop --background-color: The badge background color (default: primary).
 */
:host {
  display: inline-flex;
  --flow-color-base: var(--flow-color-primary, #389DFF);
  --flow-color-base-rgb: var(--flow-color-primary-rgb, 56, 157, 255);
  --flow-color-contrast: var(--flow-color-primary-contrast, #ffffff);
  --flow-color-contrast-rgb: var(
    --flow-color-primary-contrast-rgb,
    255, 255, 255
  ) !important;
  --flow-color-shade: var(--flow-color-primary-shade, #2d7ecc);
  --flow-color-tint: var(--flow-color-primary-tint, #60b1ff);
  --color: var(--flow-color-contrast);
  --background-color: var(--flow-color-base);
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--flow-font-sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol);
  font-size: var(--flow-font-size-x-small, 0.75rem);
  font-weight: var(--flow-font-weight-semibold, 500);
  letter-spacing: var(--flow-letter-spacing-normal, normal);
  line-height: 1;
  border-radius: var(--flow-border-radius-small, 0.125rem);
  white-space: nowrap;
  padding: 3px 6px;
  user-select: none;
  cursor: inherit;
  color: var(--color);
  background-color: var(--background-color);
}

.badge--pill {
  border-radius: var(--flow-border-radius-pill, 9999px);
}

.badge--pulse {
  animation: pulse 1.5s infinite;
  --pulse-rgb: var(--flow-color-base-rgb);
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--pulse-rgb), 0.75);
  }
  70% {
    box-shadow: 0 0 0 0.5rem rgba(var(--pulse-rgb), 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(var(--pulse-rgb), 0);
  }
}