.badge {
  border: $border-width solid transparent;
  text-decoration: none;
  word-break: break-word;
  white-space: normal;

  &.badge-success {
    @include alert-variant($bg-success, $bg-success, $success);
  }
  &.badge-danger {
    @include alert-variant($bg-danger, $bg-danger, $danger);
  }
  &.badge-warning {
    @include alert-variant($bg-warning, $bg-warning, $warning);
  }
  &.badge-info {
    @include alert-variant($bg-info, $bg-info, $info);
  }
}

@each $color, $value in $theme-colors {
  .badge-outline-#{$color} { border-color: $value; color: $value;
    @at-root a#{&} {
      @include hover-focus { color: color-yiq($value); background-color: darken($value, 10%); }

      &:focus,
      &.focus { outline: 0; box-shadow: 0 0 0 $badge-focus-width rgba($value, .5); }
    }
  }
}

.badge-light {
  color: $colorNeutral5;
  border: $border-width solid $colorNeutral5;
  background: $colorContentBackground;
}

.badge-secondary {
  border-color: $colorButtonSecondaryBorder;
  background-color: $colorButtonSecondary;
  color: $colorButtonSecondaryFont;
}

.badge-outline-secondary {
  border-color: $colorButtonSecondaryBorder;
  background-color: $colorContentBackground;
  color: $colorButtonSecondary;
}

// Used by NOVA for the cart icon on the cart page when the cart is empty
.bubble {
  font-size: $font-size-lg;
  border-radius: 50%;
  padding: 12px;
  margin-top: 10px;
}

// Used by NOVA for the selected free gift
.badge-check {
  border: $border-width solid $colorButtonPrimaryBorder;
  .badge-circle {
    display: flex;
    background-color: $colorButtonPrimary;
    border-color: $colorButtonPrimaryBorder;
    color: $colorButtonPrimaryFont;
    opacity: 1;
    align-items: center;
    position: absolute;
    top: -20px;
    right: -22px;
  }
}

.variation {
  .badge {
    display: inline-flex;
    align-items: center;
    margin-left: map-get($spacers, 2);
  }
}

// NOVA has circle classes that are colored for some unknown reasons - and 2 of them.
.badge-circle,
.badge-circle-1 {
  background-color: $colorButtonPrimary;
  -webkit-box-shadow: none;
  box-shadow: none;
  min-width: 44px;
  width: 44px;
  height: 44px;
  border: $border-width solid $colorButtonPrimaryBorder;
  opacity: 0.8;
  color: $colorButtonPrimaryFont;

  font-size: 18px;
  line-height: 15px;
  border-radius: 50%;

  padding: 0;
  z-index: 1;

  &::before {
    display: none;
  }

  &.circle-small {
    width: 36px;
    height: 36px;
    min-width: 36px;
    font-size: 14px !important;
    line-height: 12px !important;
  }

  &:hover, &:focus {
    background-color: $colorButtonPrimaryHover;
    border-color: $colorButtonPrimaryHoverBorder;
    color: $colorButtonPrimaryHoverFont;
    opacity: 1;
  }

  transition: all .2s;

  &::before {
    display: none;
  }

  &.badge-circle-no-sizes {
    width: unset;
    height: unset;
    min-width: unset;
  }

  &.circle-small {
    width: 36px;
    height: 36px;
    min-width: 36px;
    font-size: 14px;
    line-height: 12px;
  }

  &.on-list {
    animation: size .4s;
    color: $colorButtonPrimaryFont;
    opacity: 1.0;
    border: $border-width solid $colorButtonPrimaryBorder;
    background-color: $colorButtonPrimary;
  }
}

.fa-sup,
.et-count-badge {
  position: absolute;
  top: -13px;
  right: -8px;
  @include media-breakpoint-up(md) {
    top: -15px;
    right: -12px;
  }
  left: auto;
  margin-left: 0;
  margin-top: 0;
  background-color: $colorButtonPrimary;
  padding: 4.5px 7.2px; // creates a circle
  line-height: 1;
  width: auto;
  border-radius: 200px;
  font-size: 12px;
  font-weight: 400;
  font-family: $font-family-sans-serif;
  color: $colorButtonPrimaryFont;
  text-overflow: ellipsis;
  overflow: hidden;
}
