@use 'sass:map';

@include b(badge) {
  position: absolute;
  z-index: 1;
  display: inline-block;
  vertical-align: top;
  transform: translate(-50%, -50%);

  @each $theme, $rgb in $rd-themes {
    @include theme(#{$theme}) {
      --#{$rd-prefix}badge-color: var(--#{$rd-prefix}color-#{$theme});
    }
  }

  @include m(dot) {
    @include e(wrapper) {
      min-width: 6px;
      height: 6px;
      padding: 0;
      /* stylelint-disable-next-line declaration-property-value-allowed-list */
      border-radius: 3px;
    }
  }

  @include m(alone) {
    position: relative;
    transform: none;
  }

  @include e(wrapper) {
    display: flex;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    overflow: hidden;
    /* stylelint-disable-next-line declaration-property-value-allowed-list */
    font-size: 12px;
    line-height: 20px;
    color: map.get($rd-colors, 'white');
    background-color: var(--#{$rd-prefix}badge-color);
    /* stylelint-disable-next-line declaration-property-value-allowed-list */
    border-radius: 10px;
  }

  @include e(number-container) {
    display: inline-flex;
    flex-direction: column;
    transition: transform var(--#{$rd-prefix}animation-duration-base) ease-out;
  }
}