.badge-primary {
  background-color: rgba($accent-color1, 0.1);
  color: $accent-color1;
}

.badge-secondary {
  background-color: rgba($accent-color2, 0.1);
  color: $accent-color2;
}

.badge-success {
  background-color: rgba($accent-color4, 0.1);
  color: $accent-color4;
}

.badge-danger {
  background-color: rgba($accent-color5, 0.1);
  color: $accent-color5;
}

.badge-warning {
  background-color: rgba($accent-color6, 0.1);
  color: $accent-color6;
}

.badge-info {
  background-color: rgba($accent-color3, 0.1);
  color: $accent-color3;
}

.badge-light {
  background-color: $base-color5;
  color: $base-color2;
}

.badge-dark {
  color: $base-color1;
  background-color: rgba($base-color1, 0.1);
}

.btn {
  .badge-primary {
    background-color: $accent-color1;
    color: #fff;
  }

  .badge-secondary {
    background-color: $accent-color2;
    color: #fff;
  }

  .badge-success {
    background-color: $accent-color4;
    color: #fff;
  }

  .badge-danger {
    background-color: $accent-color5;
    color: #fff;
  }

  .badge-warning {
    background-color: $accent-color6;
    color: #fff;
  }

  .badge-info {
    background-color: $accent-color3;
    color: #fff;
  }

  .badge-dark {
    color: #fff;
    background-color: $base-color1;
  }
}

.badge {
  font-size: 0.75em;
  font-weight: 400;
  line-height: 1em;
  padding: 0.5em 0.58em;
  border-radius: 4px;
  text-transform: uppercase;
}

.badge.badge-pill {
  border-radius: 12px;
  text-transform: initial;
  padding: 0.5em 0.7em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  .badge {
    font-weight: inherit;
    padding: 0.25em 0.5em;
  }
}

.up-badge {
  position: relative;

  .badge {
    min-width: 25px;
    border-radius: 50%;
    font-size: 14px;
    position: absolute;
    right: -10px;
    top: -10px;
    padding: 0.4em 0.4em;
  }
}