@mixin chip-position($position, $top: true) {
  &.badge-chip-position {
    $position: $position * -1rem;

    &-before {
      left: $position;

      @if $top {
        top: $position * 0.5;
      }
    }

    &-after {
      right: $position;

      @if $top {
        top: $position * 0.5;
      }
    }
  }
}

@mixin chip-size($size) {
  width: #{$size}rem;
  height: #{$size}rem;

  @include chip-position($size);
}

.badge-chip-container {
  position: relative;
}

.badge {
  $font-size: $font-size-base * 0.75;

  &.badge-chip {
    border-radius: 50%;
    font-family: $font-family-base;
    font-size: $font-size;
    font-weight: $badge-font-weight;
    line-height: $line-height-sm;
    display: inline-block;
    overflow: hidden;
    padding-bottom: $badge-chip-padding-y;
    padding-top: $badge-chip-padding-y;
    pointer-events: none;
    position: absolute;
    text-align: center;
    text-overflow: ellipsis;
    transition: transform 200ms ease-in-out;
    white-space: nowrap;

    @include chip-size(strip-units($font-size) * 2);

    &-sm {
      @include chip-size(strip-units($font-size-base));
    }

    &-overlap {
      @include chip-position(strip-units($font-size), false);

      &.badge-chip-sm {
        @include chip-position(strip-units($font-size-base) * 0.5, false);
      }
    }
  }
}