/**	Labels & Badges
*************************************************** **/

.badge {
  line-height: 1 !important;
  &.badge-square {
    font-size: 13px;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    margin-right: 10px;
    padding: 0;
    &.float-left {
      margin-left: 10px;
    }
    &.float-right {
      margin-right: 10px;
    }
  }
}

h1 .badge, h2 .badge, h3 .badge, h4 .badge, h5 .badge, h6 .badge {
  padding: 3px 10px;
}

section {
  .nav-pills > li {
    > a {
      color: #111;
    }
    &.active > a {
      &:hover {
        color: #111;
      }
      color: #111;
    }
  }
  &.dark {
    .nav-pills > li {
      > a {
        color: #fff;
      }
      &.active > a {
        &:hover {
          color: #fff;
        }
        color: #fff;
        background-color: rgba(255, 255, 255, 0.3) !important;
      }
    }
    a.badge, .badge {
      color: #fff;
    }
  }
}

/* corner */

.badge.badge-corner {
  top: -8px !important;
  right: -8px !important;
  position: absolute !important;
  color: #fff !important;
}

/* colors */

span.badge-default, .list-group-item.active > .badge.badge-default {
  background-color: #333 !important;
}

span.badge-blue, .list-group-item.active > .badge {
  background: #3498db !important;
}

span.badge-red, .list-group-item.active > .badge {
  background: #e74c3c !important;
}

span.badge-green, .list-group-item.active > .badge.badge-green {
  background: #2ecc71 !important;
}

span.badge-sea, .list-group-item.active > .badge.badge-sea {
  background: #1abc9c !important;
}

span.badge-orange, .list-group-item.active > .badge.badge-orange {
  background: #e67e22 !important;
}

span.badge-purple, .list-group-item.active > .badge.badge-purple {
  background: #9b6bcc !important;
}

span.badge-aqua, .list-group-item.active > .badge.badge-aqua {
  background: #27d7e7 !important;
}




[class*="u-badge"] {
  position: absolute;
  display: inline-block;
  text-align: center;
  @include px-to-rem("font-size", 13px);
  color: $m-color-main;
  z-index: 3;
}

[class*="u-badge"]:not([class*="--top-left"], [class*="--bottom-left"], [class*="--bottom-right"]) {
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
}

.u-badge {
  &--top-left {
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
  }

  &--bottom-left {
    bottom: 0;
    left: 0;
    transform: translate(-50%, 50%);
  }

  &--bottom-right {
    bottom: 0;
    right: 0;
    transform: translate(50%, 50%);
  }
}