@media (prefers-reduced-motion: no-preference) {
  :host(.ic-badge-show) {
    animation: expand var(--ic-transition-duration-slow);
  }

  :host(.ic-badge-hide) {
    animation: shrink var(--ic-transition-duration-slow);
  }
}

:host {
  display: flex;
  height: var(--ic-space-md);
  min-width: var(--ic-space-md);
  width: -moz-fit-content;
  width: fit-content;
  border-radius: calc(2 * var(--ic-space-xxl));
  position: absolute;
}

:host ic-typography {
  --ic-typography-color: var(--ic-badge-text);
}

:host(.ic-badge-neutral) {
  background-color: var(--ic-badge-dark) !important;
}

:host(.ic-badge-light) ic-typography {
  --ic-typography-color: var(--ic-badge-text-monochrome);
}

:host(.ic-badge-light) ::slotted(*) {
  fill: var(--ic-badge-icon-monochrome);
}

:host(.ic-badge-info) {
  background-color: var(--ic-badge-info) !important;
}

:host(.ic-badge-light) {
  background-color: var(--ic-badge-light) !important;
}

:host(.ic-badge-warning) {
  background-color: var(--ic-badge-warning) !important;
}

:host(.ic-badge-warning) ic-typography {
  --ic-typography-color: var(--ic-badge-warning-text);
}

:host(.ic-badge-warning) ::slotted(*) {
  fill: var(--ic-badge-warning-icon);
}

:host(.ic-badge-error) {
  background-color: var(--ic-badge-error) !important;
}

:host(.ic-badge-success) {
  background-color: var(--ic-badge-success) !important;
}

:host(.ic-badge-ai) {
  background-color: var(--ic-badge-ai) !important;
}

:host(.ic-badge-small) {
  height: var(--ic-space-sm);
  min-width: var(--ic-space-sm);
}

:host(.ic-badge-large) {
  height: calc(var(--ic-space-md) + var(--ic-space-xxs));
  min-width: calc(var(--ic-space-md) + var(--ic-space-xxs));
}

:host(.ic-badge-dot.ic-badge-medium) {
  height: var(--ic-space-xs);
  width: var(--ic-space-xs);
  min-width: var(--ic-space-xs);
}

:host(.ic-badge-dot.ic-badge-small) {
  height: calc(var(--ic-space-xxs) + var(--ic-space-xxxs));
  width: calc(var(--ic-space-xxs) + var(--ic-space-xxxs));
  min-width: calc(var(--ic-space-xxs) + var(--ic-space-xxxs));
}

:host(.ic-badge-dot.ic-badge-large) {
  height: var(--ic-space-sm);
  width: var(--ic-space-sm);
  min-width: var(--ic-space-sm);
}

:host ::slotted(*) {
  fill: var(--ic-badge-icon);
}

:host(.ic-badge-foreground-dark) ::slotted(*) {
  fill: var(--ic-color-text-primary-light);
}

:host(.ic-badge-foreground-light) ::slotted(*) {
  fill: white;
}

:host(.ic-badge-foreground-dark) ic-typography {
  --ic-typography-color: var(--ic-color-text-primary-light);
}

:host(.ic-badge-foreground-light) ic-typography {
  --ic-typography-color: var(--ic-color-text-primary-dark);
}

:host(.ic-badge-text) ic-typography {
  align-self: center;
  padding: 0 calc((var(--ic-space-xs) + var(--ic-space-1px)) / 2)
    var(--ic-space-1px);
}

:host(.ic-badge-text.ic-badge-small) ic-typography {
  padding: 0 0.2132rem;
}

:host(.ic-badge-text.ic-badge-large) ic-typography {
  padding: 0 calc((var(--ic-space-sm) + var(--ic-space-1px)) / 2)
    var(--ic-space-1px);
}

:host(.ic-badge-icon) ::slotted(svg) {
  width: var(--ic-space-sm);
  height: var(--ic-space-sm);
  padding: var(--ic-space-xxxs);
}

:host(.ic-badge-icon.ic-badge-small) ::slotted(svg) {
  width: var(--ic-space-xs);
  height: var(--ic-space-xs);
}

:host(.ic-badge-icon.ic-badge-large) ::slotted(svg) {
  width: calc(var(--ic-space-sm) + var(--ic-space-xxxs));
  height: calc(var(--ic-space-sm) + var(--ic-space-xxxs));
  padding: calc(var(--ic-space-xxxs) + var(--ic-space-1px));
}

:host(.ic-badge-far) {
  top: calc(-1 * var(--ic-space-xs));
  right: calc(-1 * var(--ic-space-xs));
}

:host(.ic-badge-far.ic-badge-small),
:host(.ic-badge-dot.ic-badge-far.ic-badge-large) {
  top: calc(-1 * var(--ic-space-xxs));
  right: calc(-1 * var(--ic-space-xxs));
}

:host(.ic-badge-dot.ic-badge-far),
:host(.ic-badge-dot.ic-badge-far.ic-badge-small) {
  top: calc(-1 * var(--ic-space-xxxs));
  right: calc(-1 * var(--ic-space-xxxs));
}

:host(.ic-badge-near) {
  top: calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)));
  right: calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)));
}

:host(.ic-badge-dot.ic-badge-near) {
  top: calc(-1 * var(--ic-space-1px));
  right: calc(-1 * var(--ic-space-1px));
}

:host(.ic-badge-inline) {
  position: static;
}

:host(.ic-badge-hide) {
  visibility: hidden !important;
  transition: visibility var(--ic-transition-duration-slow);
}

.sr-only {
  position: absolute;
  left: -9999px;
}

.sr-only:dir(rtl) {
  right: -9999px;
}

@keyframes expand {
  from {
    opacity: 0;
    transform: scale(0);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes shrink {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  :host(.ic-badge-hide) {
    transition: none;
  }
}