.wui-badge {
  position: relative;
  display: inline-block;

  &-body {
    display: inline-block;
    height: 16px;
    padding: 0 6px;
    color: #fff;
    font-size: 10px;
    text-align: center;
    line-height: 16px;
    white-space: nowrap;
    border: 1px solid #fff;
    border-radius: 9px;

    &--neutral {
      @apply bg-neutral-500;
    }
    &--primary {
      @apply bg-primary-500;
    }
    &--black {
      @apply bg-black;
    }
    &--info {
      @apply bg-info-500;
    }
    &--success {
      @apply bg-success-500;
    }
    &--warning {
      @apply bg-warning-500;
    }
    &--danger {
      @apply bg-danger-500;
    }

    &--corner {
      &-top-right {
        position: absolute;
        top: 0;
        right: 0;
        transform: translateX(45%) translateY(-45%);
      }

      &-top-left {
        position: absolute;
        top: 0;
        left: 0;
        transform: translateX(-45%) translateY(-45%);
      }

      &-bottom-right {
        position: absolute;
        bottom: 0;
        right: 0;
        transform: translateX(45%) translateY(45%);
      }

      &-bottom-left {
        position: absolute;
        bottom: 0;
        left: 0;
        transform: translateX(-45%) translateY(45%);
      }
    }

    &--square {
      border-radius: 5px;
    }

    &--point {
      padding: 0;
      width: 10px;
      height: 10px;
    }
  }
}