[data-lk-component="badge"] {
  display: inline-flex;
  padding: var(--lk-size-xs);
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: var(--lk-size-sm);
  background: var(--LiftKit-Default-sys-light-surface-container, #eeedf8);
  font-size: var(--lk-size-md);
  position: relative;
  overflow: hidden;

  [data-lk-slot="icon"] {
    position: relative;
    z-index: 1;
  }
}

/* Scale modifiers */
[data-lk-badge-scale="md"] {
  font-size: var(--lk-size-md);
}

[data-lk-badge-scale="lg"] {
  font-size: var(--lk-size-lg);
}

/* Color modifiers */
[data-lk-badge-color="lk-primary"] {
  background-color: var(--lk-primary);
  color: var(--lk-onprimary);
}

[data-lk-badge-color="lk-secondary"] {
  background-color: var(--lk-secondary);
  color: var(--lk-onsecondary);
}

[data-lk-badge-color="lk-tertiary"] {
  background-color: var(--lk-tertiary);
  color: var(--lk-ontertiary);
}

[data-lk-badge-color="lk-error"] {
  background-color: var(--lk-error);
  color: var(--lk-onerror);
}

[data-lk-badge-color="lk-warning"] {
  background-color: var(--lk-warning);
  color: var(--lk-onwarning);
}

[data-lk-badge-color="lk-success"] {
  background-color: var(--lk-success);
  color: var(--lk-onsuccess);
}

[data-lk-badge-color="lk-info"] {
  background-color: var(--lk-info);
  color: var(--lk-oninfo);
}

[data-lk-badge-color="lk-surface"] {
  background-color: var(--lk-surface);
  color: var(--lk-onsurface);
}

[data-lk-badge-color="lk-inverse"] {
  background-color: var(--lk-inverseprimary);
  color: var(--lk-inverseonsurface);
}

[data-lk-badge-color="lk-primarycontainer"] {
  background-color: var(--lk-primarycontainer);
  color: var(--lk-onprimarycontainer);
}

[data-lk-badge-color="lk-secondarycontainer"] {
  background-color: var(--lk-secondarycontainer);
  color: var(--lk-onsecondarycontainer);
}

[data-lk-badge-color="lk-tertiarycontainer"] {
  background-color: var(--lk-tertiarycontainer);
  color: var(--lk-ontertiarycontainer);
}

[data-lk-badge-color="lk-errorcontainer"] {
  background-color: var(--lk-errorcontainer);
  color: var(--lk-onerrorcontainer);
}

[data-lk-badge-color="lk-warningcontainer"] {
  background-color: var(--lk-warningcontainer);
  color: var(--lk-onwarningcontainer);
}

[data-lk-badge-color="lk-successcontainer"] {
  background-color: var(--lk-successcontainer);
  color: var(--lk-onsuccesscontainer);
}

[data-lk-badge-color="lk-infocontainer"] {
  background-color: var(--lk-infocontainer);
  color: var(--lk-oninfocontainer);
}

[data-lk-badge-color="lk-surfacecontainerlowest"] {
  background-color: var(--lk-surfacecontainerlowest);
  color: var(--lk-onbackground);
}

[data-lk-badge-color="lk-surfacecontainerlow"] {
  background-color: var(--lk-surfacecontainerlow);
  color: var(--lk-onbackground);
}

[data-lk-badge-color="lk-surfacecontainer"] {
  background-color: var(--lk-surfacecontainer);
  color: var(--lk-onbackground);
}

[data-lk-badge-color="lk-surfacecontainerhigh"] {
  background-color: var(--lk-surfacecontainerhigh);
  color: var(--lk-onbackground);
}

[data-lk-badge-color="lk-surfacecontainerhighest"] {
  background-color: var(--lk-surfacecontainerhighest);
  color: var(--lk-onbackground);
}

[data-lk-badge-color="lk-surfacevariant"] {
  background-color: var(--lk-surfacevariant);
  color: var(--lk-onsurfacevariant);
}

[data-lk-badge-color="lk-inversesurface"] {
  background-color: var(--lk-inversesurface);
  color: var(--lk-inverseonsurface);
}

[data-lk-component="badge-scrim"] {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.1;
}
