.badge {
  display: inline-block;
  padding: @badge-padding;
  font-size: @badge-font-size;
  line-height: 20px;
  color: @badge-color;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: @border-radius-base;

  // Empty badges collapse automatically
  &:empty {
    display: none;
  }

  em {
    font-style: normal;
  }

  &-dot {
    display: inline-block;
    width: @layout-gutter;
    height: @layout-gutter;
    padding: 0;
    border-radius: 50%;
    > * {
      display: none;
    }
  }
}

// Colors
.badge-variant(@bg) {
  .color-yiq(@bg);
  background-color: @bg;
}

.for-each(@colors, {
  .badge-@{adKey} {
    .badge-variant(extract(@adItem, @color-basic-position));
  }
});

.for-each(@aliasColors, {
    @aliasColor: ~`getColor("@{colors}", "@{adValue}", @{color-basic-position})`;
    .badge-@{adKey} {
        .badge-variant(color(@aliasColor))
    }
});