.badge {
  display: inline-flex;
  flex-direction: row;
  align-items: flex-start;

  background: rgba(var(--theme-secondary-color-rgb), 0.08);
  color: var(--theme-secondary-color);
  border-radius: 32px;
  white-space: nowrap;

  &.green {
    background: rgba(var(--theme-green-color-rgb), 0.08);
    color: var(--theme-green-color);
  }

  &.red {
    background: rgba(var(--theme-red-color-rgb), 0.08);
    color: var(--theme-red-color);
  }

  &.blue {
    background: rgba(var(--theme-blue-color-rgb), 0.08);
    color: var(--theme-blue-color);
  }

  &.purple {
    background: rgba(var(--theme-purple-color-rgb), 0.08);
    color: var(--theme-purple-color);
  }

  &.small {
    font: var(--font-sm-bold);
    padding: 0 10px;
  }

  &.medium {
    font: var(--font-p2-bold);
    padding: 0 12px;
  }

  &.large {
    font: var(--font-lb2-bold);
    padding: 8px 24px;
  }
}

.squareBadge {
  font: var(--font-sm);
  font-weight: 600;
  align-items: center;
  background: rgba(113, 121, 128, 0.08);
  border-radius: 12px;
  display: flex;
  height: 24px;
  justify-content: center;
  width: 24px;

  &.green {
    background: var(--theme-green-color);
    color: var(--theme-white-color);
  }

  &.red {
    background: var(--theme-red-color);
    color: var(--theme-white-color);
  }

  &.blue {
    background: var(--theme-blue-color);
    color: var(--theme-white-color);
  }

  &.purple {
    background: var(--theme-purple-color);
    color: var(--theme-white-color);
  }

  :global(.ant-tabs-tab-active) & {
    background-color: rgba(255, 67, 57, 0.08);
    color: var(--theme-red-color);
  }
}
