.badge {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  line-height: var(--line-height-01);
}

.badge-prepend {
  margin-left: calc($spacing-01 / -2);
  margin-right: $spacing-01;
}

.badge-close {
  @include reset-button();

  display: flex;
  align-items: center;
  justify-content: center;

  // a random number that would cause the close button to expand enough
  // so that it won't be affected by badge's padding
  $expand: 100px;
  padding: $expand $spacing-01;
  margin: (-$expand) (-$spacing-02) (-$expand) $spacing-02;
  user-select: none;
  color: inherit;

  .badge-close-icon {
    font-size: $font-size-base;
  }

  &:hover {
    background-color: var(--neutral-40);
  }
}