@import '~@lbry/components/sass/badge/_index.scss';

.badge {
  vertical-align: middle;
  white-space: nowrap;
}

.badge--tag {
  @extend .badge;
  background-color: lighten($lbry-teal-5, 55%);
  color: darken($lbry-teal-5, 20%);
  svg {
    stroke: $lbry-teal-5;
  }

  [data-mode='dark'] & {
    color: var(--dm-color-01);
    background-color: lighten(mix($lbry-black, $lbry-teal-5, 80%), 10%);
  }
}

.badge--alert {
  @extend .badge;
  background-color: $lbry-red-2;
  color: $lbry-white;
}

.badge--mature {
  background-color: lighten($lbry-grape-1, 10%);
  color: $lbry-black;

  svg {
    stroke: $lbry-black;
  }

  [data-mode='dark'] & {
    background-color: darken(mix($lbry-grape-1, $lbry-gray-5, 50%), 20%);
  }
}