.mykn-badge {
  --mykn-badge-color-background: var(--badge-secondary-background);
  --mykn-badge-color-border: transparent;
  --mykn-badge-color-text: var(--badge-secondary-text);

  background-color: var(--mykn-badge-color-background);
  border: 1px solid var(--mykn-badge-color-border);
  color: var(--mykn-badge-color-text);
  align-items: center;
  align-self: baseline; // Prevent the badge from unwanted stretching in flex content (use case: Kanban title toolbar).
  border-radius: var(--sizes-border-radius-s);
  display: inline-flex;
  flex-shrink: 0;
  font-family: var(--typography-font-family-body);
  font-size: var(--typography-font-size-body-xs);
  font-weight: var(--typography-font-weight-bold);
  justify-content: center;
  line-height: var(--typography-line-height-body-xs);
  overflow: hidden;
  padding: 0 var(--sizes-spacing-xs-h);
  position: relative;
  transform-style: preserve-3d;

  &--variant-primary {
    --mykn-badge-color-background: var(--badge-primary-background);
    --mykn-badge-color-border: var(--badge-primary-border);
    --mykn-badge-color-text: var(--badge-primary-text);
  }

  &--variant-secondary {
    --mykn-badge-color-background: var(--badge-secondary-background);
    --mykn-badge-color-border: var(--badge-secondary-border);
    --mykn-badge-color-text: var(--badge-secondary-text);
  }

  &--variant-accent {
    --mykn-badge-color-background: var(--badge-accent-background);
    --mykn-badge-color-border: var(--badge-accent-border);
    --mykn-badge-color-text: var(--badge-accent-text);
  }

  &--variant-outline {
    --mykn-badge-color-background: var(--badge-outline-background);
    --mykn-badge-color-border: var(--badge-outline-border);
    --mykn-badge-color-text: var(--badge-outline-text);
  }

  &--variant-info {
    --mykn-badge-color-background: var(--badge-info-background);
    --mykn-badge-color-border: var(--badge-info-border);
    --mykn-badge-color-text: var(--badge-info-text);
  }

  &--variant-success {
    --mykn-badge-color-background: var(--badge-success-background);
    --mykn-badge-color-border: var(--badge-success-border);
    --mykn-badge-color-text: var(--badge-success-text);
  }

  &--variant-warning {
    --mykn-badge-color-background: var(--badge-warning-background);
    --mykn-badge-color-border: var(--badge-warning-border);
    --mykn-badge-color-text: var(--badge-warning-text);
  }

  &--variant-danger {
    --mykn-badge-color-background: var(--badge-danger-background);
    --mykn-badge-color-border: var(--badge-danger-border);
    --mykn-badge-color-text: var(--badge-danger-text);
  }

  &[class*="level"]:before,
  &[class*="level"]:after {
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }

  &:before {
    background-color: var(--mykn-badge-color-background);
    z-index: -2;
  }

  &:after {
    z-index: -1;
    background-color: var(--mykn-badge-color-background);
    opacity: 0.025;
  }

  &--rounded {
    border-radius: var(--typography-font-size-body-xs);
  }

  .mykn-icon {
    margin-inline-end: var(--sizes-spacing-xs-h);
  }
}