@use "sass:map";
// Standalone badges
.badge {
  font-size: $badge-font-size;
  font-weight: $badge-font-weight;
  display: inline-flex;
  align-items: center;
  @include media-breakpoint-up(md) {
    font-size: $badge-font-size-desktop;
  }
  .icon--close {
    display: inline-flex;
    margin-left: map.get($spacers, 2);
  }
}

a.badge {
  text-decoration: none;
  &:focus-visible {
    outline: 2px solid $white;
    outline-offset: -3px;
  }
}

@each $color, $value in $theme-colors {
  .badge.text-bg-#{$color} a,
  .badge.text-bg-#{$color} {
    @if $color == light or $color == warning {
      color: $black;
    } @else {
      color: $white;
    }
  }
  .badge-outline-#{$color} a {
    color: $value !important;
  }
  .badge-outline-#{$color} {
    background: transparent !important;
    @if $color == light {
      border: $border-width solid $light;
      color: $light !important;
    } @else {
      border: $border-width solid $value;
      color: $value !important;
    }
  }
  a.badge {
    &:focus-within,
    &:active,
    &:hover {
      &.badge-outline-#{$color} {
        @if $color == dark {
          background-color: $light !important;
          border-color: $black;
        } @else if $color == light {
          border-color: $white;
          color: $white;
          background: rgba($white, 0.3) !important;
        } @else {
          background-color: tint-color($value, 90%) !important;
          border-color: shade-color($value, 15%) !important;
        }
      }
      &.text-bg-#{$color} {
        background-color: shade-color($value, 15%) !important;
      }
    }
  }
}