.badge {
  @apply
    border-2
    border-white
    bg-white
    inline-flex
    items-center
    justify-center
    rounded-full
    text-blue
    text-center;

  padding-top: 1px;
  min-width: 21px;
  min-height: 21px;
}

.badge-with-icon:not(.badge-with-icon--only) {
  min-width: 35px;
}

.badge-with-icon--right .badge__icon {
  margin-left: 2px;
}

.badge:not(.badge-with-icon--right) .badge__icon {
  margin-right: 2px;
}

.badge__icon {
  @apply relative;
  margin-top: -1px;
  /** Assuming a 5by10 icon */
  min-height: 5px;
  min-width: 10px;
}

/** TODO: Fix arrow height weirdness */
.badge__icon .arrow {
  @apply absolute;
  left: 0;
}

.badge-with-icon--only .badge__icon {
  margin-right: unset;
}

.badge__text {
  @apply
    align-middle
    antialiased
    font-semibold
    leading-none
    text-tn;
}

.badge:not(.badge-with-icon) {
  @apply p-1;
}

.badge--wide {
  @apply px-1;
}