// Imports
@import './_variables.scss';

.nv-badge {
  @apply relative inline-block leading-none;
  &__wrapper {
    @apply relative flex;
  }

  &__badge {
    @apply items-center rounded-sm flex font-medium justify-center absolute text-center indent-0 whitespace-nowrap p-0.5 transition duration-200 ease-in pointer-events-auto;
    @apply bg-primary text-white;
    //height: 16px;
    //font-size: .75rem;
    //min-width: 16px;
  }

  @each $name, $size in $badge-sizes {
    &.nv-size--#{$name} {
      .nv-badge__badge {
        height: #{$size};
        min-width: #{$size};
        font-size: map-deep-get($badge-font-sizes, $name);
      }
    }
  }

  &--inline {
    .nv-badge__wrapper {
      @apply inline-flex items-center justify-center;
    }
    .nv-badge__badge {
      @apply relative align-middle my-0 mx-1;
    }
  }

  &--rounded {
    .nv-badge__badge {
      @apply rounded-full
    }
  }

  &--tile {
    .nv-badge__badge {
      @apply rounded-none
    }
  }

  &--bordered {
    .nv-badge__badge {
      @apply border border-2 border-white
    }
  }
}