$badge-padding-hor: 4.5px !default;
$badge-padding-hor-small: 2px !default;

$badge-height: 18px !default;
$badge-height-small: 14px !default;

$badge-bg: $error !default;
$badge-font-size: 12px !default;
$badge-font-size-small: 10px !default;

$badge-color: $white !default;

$badge-dot-height: 8px !default;
$badge-dot-height-small: 6px !default;

$badge-colors: (
  'brand': $brand,
  'red': $error
) !default;

$badge-theme-colors: map-merge(
  $map1: $auxiliary-colors,
  $map2: $badge-colors
) !default;

.mx {
  &-badge-wrapper {
    position: relative;
    display: inline-block;
  }

  &-badge {
    display: inline-block;
    padding-left: $badge-padding-hor;
    padding-right: $badge-padding-hor;
    height: $badge-height;
    min-width: $badge-height;
    border-radius: div($badge-height, 2);
    background-color: $badge-bg;

    box-sizing: border-box;

    color: $badge-color;
    font-size: $badge-font-size;
    line-height: $badge-height;
    text-align: center;

    &--small {
      padding-left: $badge-padding-hor-small;
      padding-right: $badge-padding-hor-small;
      min-width: $badge-height-small;
      height: $badge-height-small;
      border-radius: div($badge-height-small, 2);

      line-height: $badge-height-small;

      font-size: $badge-font-size-small;
    }

    &--dot {
      min-width: 0;
      padding: 0;

      @include circle($badge-dot-height);

      &.mx-badge--small{
        @include circle($badge-dot-height-small);
      }

    }

    &--fixed {
      position: absolute;
      top: 0;
      right: 0;
      transform: translate(50%, -50%);
      transform-origin: center;
    }

    @each $name, $color in $badge-theme-colors {
      &--#{$name} {
        background-color: $color;

        @if($name == 'gray'){
          color: $dark-gray !important;
        }
      }
    }
  }
}