@import 'settings';

// Available variations
//
// Add any of the below mentioned modifier classes to change the appearance of a badge.
//
// .badge-default - Default
// .badge-primary - Primary
// .badge-secondary - Secondary
// .badge-accent - Accent
// .badge-success - Success
// .badge-info - Info
// .badge-warning - Warning
// .badge-danger - Danger
//
// Markup: badge-variation.twig
//
// Weight: 1
//
// style guide: atoms.badge.variations

.badge {
  border-radius: $badge-border-radius;
  color: $badge-color;

  a:focus {
    outline: none;
    box-shadow: none;
  }
}

.badge__icon {
  fill: $default-color;
}

.badge--pill {
  @include border-radius($badge-pill-border-radius);
}

.badge-default {
  @include badge-variant($badge-default-bg, $default-color);
}

.badge-primary {
  @include badge-variant($badge-primary-bg, #fff);
}

.badge-secondary {
  @include badge-variant($badge-secondary-bg, #fff);
}

.badge-accent {
  @include badge-variant($badge-accent-bg, $default-color);
}

.badge-success {
  @include badge-variant($badge-success-bg, #fff);
}

.badge-info {
  @include badge-variant($badge-info-bg, #fff);
}

.badge-warning {
  @include badge-variant($badge-warning-bg, #fff);
}

.badge-danger {
  @include badge-variant($badge-danger-bg, #fff);
}

a .badge-default {
  color: $default-color;

  &:hover {
    color: $default-color;
  }
}
