.ds-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  color: var(--text-on-color-light);

  &.large {
    @include tag-medium-2;
    width: 24px;
    height: 24px;
  }

  &.medium {
    @include tag-small-2;
    width: 20px;
    height: 20px;
  }

  &.small {
    @include helper-small-2;
    width: 16px;
    height: 16px;
  }

  &.x-small {
    width: 8px;
    height: 8px;
    > span {
      display: none;
    }
  }

  &.none {
    color: var(--text-primary);
    border: 1px solid var(--border-accent-3);
  }

  &.black {
    background: var(--tag-gray-accent);
    border: 1px solid var(--tag-gray-accent);
  }

  &.blue {
    background: var(--tag-blue-accent);
    border: 1px solid var(--tag-blue-accent);
  }

  &.green {
    background: var(--tag-green-accent);
    border: 1px solid var(--tag-green-accent);
  }

  &.red {
    background: var(--tag-red-accent);
    border: 1px solid var(--tag-red-accent);
  }

  &.yellow {
    background: var(--tag-yellow-accent);
    border: 1px solid var(--tag-yellow-accent);
  }

  &.violet {
    background: var(--tag-violet-accent);
    border: 1px solid var(--tag-violet-accent);
  }
}
