bulmil/dist/collection/core/elements/badge/badge.css


.badge {
  background-color: #5851ff;
  border: 2px solid transparent;
  border-radius: 14px;
  box-shadow: 0 0 0 2px white;
  color: white;
  font-size: 0.65rem;
  height: 14px;
  line-height: calc(7px + 1px);
  min-width: 14px;
  overflow: hidden;
  padding: 0.05rem 0.15rem;
  position: absolute;
  right: 0;
  text-overflow: ellipsis;
  top: 0;
  -webkit-transform: translate(50%, -50%);
      -ms-transform: translate(50%, -50%);
          transform: translate(50%, -50%);
  white-space: nowrap;
}
.badge.is-outlined {
  background-color: white;
  border-color: #5851ff;
  color: #5851ff;
}
.badge.is-left {
  bottom: 0;
  left: 0;
  right: auto;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.badge.is-right {
  bottom: auto;
  left: auto;
  right: 0;
  top: 50%;
  -webkit-transform: translate(50%, -50%);
      -ms-transform: translate(50%, -50%);
          transform: translate(50%, -50%);
}
.badge.is-top {
  bottom: auto;
  left: 50%;
  right: auto;
  top: 0;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.badge.is-top-left {
  bottom: auto;
  left: 0;
  right: auto;
  top: 0;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.badge.is-top-right {
  bottom: auto;
  left: auto;
  right: 0;
  top: 0;
  -webkit-transform: translate(50%, -50%);
      -ms-transform: translate(50%, -50%);
          transform: translate(50%, -50%);
}
.badge.is-bottom {
  bottom: 0;
  left: 50%;
  right: auto;
  top: auto;
  -webkit-transform: translate(-50%, 50%);
      -ms-transform: translate(-50%, 50%);
          transform: translate(-50%, 50%);
}
.badge.is-bottom-left {
  bottom: 0;
  left: 0;
  right: auto;
  top: auto;
  -webkit-transform: translate(-50%, 50%);
      -ms-transform: translate(-50%, 50%);
          transform: translate(-50%, 50%);
}
.badge.is-bottom-right {
  bottom: 0;
  left: auto;
  right: 0;
  top: auto;
  -webkit-transform: translate(50%, 50%);
      -ms-transform: translate(50%, 50%);
          transform: translate(50%, 50%);
}
.badge.is-white:not(.is-outlined) {
  background-color: white;
  color: #0a0a0a;
}
.badge.is-white.is-outlined {
  border-color: white;
  color: white;
}
.badge.is-black:not(.is-outlined) {
  background-color: #0a0a0a;
  color: white;
}
.badge.is-black.is-outlined {
  border-color: #0a0a0a;
  color: #0a0a0a;
}
.badge.is-light:not(.is-outlined) {
  background-color: whitesmoke;
  color: rgba(0, 0, 0, 0.7);
}
.badge.is-light.is-outlined {
  border-color: whitesmoke;
  color: whitesmoke;
}
.badge.is-dark:not(.is-outlined) {
  background-color: #363636;
  color: #fff;
}
.badge.is-dark.is-outlined {
  border-color: #363636;
  color: #363636;
}
.badge.is-primary:not(.is-outlined) {
  background-color: #5851ff;
  color: #fff;
}
.badge.is-primary.is-outlined {
  border-color: #5851ff;
  color: #5851ff;
}
.badge.is-primary.is-light {
  color: #0a00f0;
}
.badge.is-primary.is-light:not(.is-outlined) {
  background-color: #ebebff;
}
.badge.is-primary.is-light.is-outlined {
  border-color: #5851ff;
}
.badge.is-link:not(.is-outlined) {
  background-color: #5851ff;
  color: #fff;
}
.badge.is-link.is-outlined {
  border-color: #5851ff;
  color: #5851ff;
}
.badge.is-link.is-light {
  color: #0a00f0;
}
.badge.is-link.is-light:not(.is-outlined) {
  background-color: #ebebff;
}
.badge.is-link.is-light.is-outlined {
  border-color: #5851ff;
}
.badge.is-info:not(.is-outlined) {
  background-color: #3298dc;
  color: #fff;
}
.badge.is-info.is-outlined {
  border-color: #3298dc;
  color: #3298dc;
}
.badge.is-info.is-light {
  color: #1d72aa;
}
.badge.is-info.is-light:not(.is-outlined) {
  background-color: #eef6fc;
}
.badge.is-info.is-light.is-outlined {
  border-color: #3298dc;
}
.badge.is-success:not(.is-outlined) {
  background-color: #48c774;
  color: #fff;
}
.badge.is-success.is-outlined {
  border-color: #48c774;
  color: #48c774;
}
.badge.is-success.is-light {
  color: #257942;
}
.badge.is-success.is-light:not(.is-outlined) {
  background-color: #effaf3;
}
.badge.is-success.is-light.is-outlined {
  border-color: #48c774;
}
.badge.is-warning:not(.is-outlined) {
  background-color: #ffdd57;
  color: rgba(0, 0, 0, 0.7);
}
.badge.is-warning.is-outlined {
  border-color: #ffdd57;
  color: #ffdd57;
}
.badge.is-warning.is-light {
  color: #947600;
}
.badge.is-warning.is-light:not(.is-outlined) {
  background-color: #fffbeb;
}
.badge.is-warning.is-light.is-outlined {
  border-color: #ffdd57;
}
.badge.is-danger:not(.is-outlined) {
  background-color: #f14668;
  color: #fff;
}
.badge.is-danger.is-outlined {
  border-color: #f14668;
  color: #f14668;
}
.badge.is-danger.is-light {
  color: #cc0f35;
}
.badge.is-danger.is-light:not(.is-outlined) {
  background-color: #feecf0;
}
.badge.is-danger.is-light.is-outlined {
  border-color: #f14668;
}

.tabs li {
  position: relative;
}