@import "../variables/mixins";
@import "../variables/colors";
@import "../variables/sizes";
@import '~cartoassets/src/scss/cdb-variables/colors';

.Badge {
  display: block;
  position: absolute;
  top: -9px;
  right: -9px;
  width: 17px;
  height: 17px;
  border-radius: 23px;
  background-color: $cIcons-default;
  color: #FFF;
  font-size: $sFontSize-smallUpperCase;
  font-weight: $sFontWeight-normal;
  line-height: 17px; /* same as width/height */
  text-align: center;

  &.is-icon {
    position: relative;
    top: auto;
    right: auto;
  }
}

.Badge--negative {
  background-color: $cError;
}

.Badge--positive {
  background-color: $cHighlight-positive;
}

.Badge--alert {
  background-color: $cAlert;
}