.d-badge {
  font-family: var(--d-font-stacks);
  font-weight: 500;
  font-size: 12px;
  line-height: 12px;
  border-radius: 8px;
  padding: 8px;
  width: fit-content;
  display: inline-block;
}

.d-badge-green {
  color: var(--d-color-green-60);
}

.d-badge-orange {
  color: var(--d-color-yellow-60);
}

.d-badge-red {
  color: var(--d-color-red-60);
}

.d-badge-neutral {
  color: var(--d-color-neutral-80);
}

.d-badge-pink {
  color: var(--d-color-pink-80);
}

.d-badge-purple {
  color: var(--d-color-purple-80);
}

.d-badge-blue {
  color: var(--d-color-blue-70);
}

.d-badge-filled {
  &.d-badge-green {
    background-color: var(--d-color-green-10);
  }

  &.d-badge-orange {
    background-color: var(--d-color-yellow-20);
  }

  &.d-badge-red {
    background-color: var(--d-color-red-10);
  }

  &.d-badge-neutral {
    background-color: var(--d-color-neutral-10);
  }

  &.d-badge-pink {
    background-color: var(--d-color-pink-10);
  }

  &.d-badge-purple {
    background-color: var(--d-color-purple-10);
  }

  &.d-badge-blue {
    background-color: var(--d-color-blue-10);
  }
}

.d-badge-light {
  border: 1px solid var(--d-color-neutral-20);
  vertical-align: middle;

  &::before {
    content: "•";
    display: inline-block;
    vertical-align: sub;
    font-weight: 900;
    font-size: 24px;
    line-height: 0;
    margin-right: 4px;
  }
}