/* BADGE */
%badge {
  background: $main-color;
  box-shadow: 0 0 10px -3px $main-color, 0 0 0 1px $main-color;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  line-height: 12px;
  transition: all 0.3s ease-in-out;
}
%tabBarItemSelected {
  %badge {
    background: #fff;
    box-shadow: none;
    color: #000;
    mix-blend-mode: screen;
  }
}

// NUMBER BADGE (AKA PINGS)
%numberBadge,
%inboxBadge,
%textBadge {
  background: $main-color  !important;
  box-shadow: 0 0 10px -3px $main-color, 0 0 0 1px $main-color;
  color: #fff;
  font-weight: 600;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  transition: all 0.3s ease-in-out;
}
%numberBadge {
  font-size: 12px;
  line-height: 12px;
}
%channelWrapperSelected,
%privateChannelInteractiveSelected,
%topPillItemSelected {
  %numberBadge,
  %textBadge {
    background: #fff !important;
    box-shadow: none;
    color: $main-color;
    mix-blend-mode: screen;
  }
}

// FLOWER STAR BADGE
%flowerStarContainer {
  color: var(--main-color);
  %flowerStarIcon {
    color: #fff;
  }
  %flowerStarChild {
    >svg {
      color: #fff;
    }
  }
}

%gameVerifiedIcon>svg>path {
  fill: var(--main-color);
}