@mixin span-style-is-icon($color, $background-color, $display, $width, $font-size) {
  display: $display;
  align-items: center;
  justify-content: center;
  width: $width;
  font-size: $font-size;
  color: $color;
  text-align: center;
  background-color: $background-color;
}

@mixin span-style($color, $background, $option, $width: 50%) {
  position: absolute;
  top: 0;
  width: $width;
  color: $color;
  text-align: center;
  background-color: $background;

  @if $option == left {
    left: 0;
  } @else if $option == right {
    right: 0;
  }
}

@mixin badge-style($color, $background, $option: is-default) {
  $box-shadow-first-two: 0 0.5em $background, 0 -0.5em $background;

  @if $option == is-splited {
    &:first-child {
      @include span-style($color, $background, left);

      box-shadow: $box-shadow-first-two, 0 0 $background, -0.5em 0 $background;
    }
    &:last-child {
      @include span-style($color, $background, right);

      box-shadow: $box-shadow-first-two, 0.5em 0 $background, 0 0 $background;
    }
  } @else if $option == is-icon {
    &:first-child {
      @include span-style-is-icon($color, $background, flex, 2.7em, 0.5em);

      position: absolute;
      top: -2.8em;
      left: -2.7em;
      height: 2.7em;
    }
    &:last-child {
      @include span-style-is-icon($color, $background, inline-block, 6em, 0.88em);

      box-shadow: $box-shadow-first-two, 0.5em 0 $background, -0.5em 0 $background;
    }
  } @else {
    &:first-child {
      @include span-style($color, $background, 0, 100%);

      box-shadow: $box-shadow-first-two, 0.5em 0 $background, -0.5em 0 $background;
    }
  }
}

// Default style
.nes-badge {
  $em: 0.75em;

  position: relative;
  display: inline-block;
  width: $em * 14;
  height: $em * 2.5;
  margin: 0.5em;
  font-size: $em * 1.2;
  white-space: nowrap;
  vertical-align: top;
  user-select: none;

  // Other styles
  // prettier-ignore
  $types:
    "dark" $background-color $base-color,
    "primary" $background-color map-get($primary-colors, "normal"),
    "success" $background-color map-get($success-colors, "normal"),
    "warning" $base-color map-get($warning-colors, "normal"),
    "error" $background-color map-get($error-colors, "normal");

  @each $type in $types {
    &.is-splited {
      & span.is-#{nth($type, 1)} {
        @include badge-style(nth($type, 2), nth($type, 3), is-splited);
      }
    }

    &.is-icon {
      width: $em * 7;
      & span.is-#{nth($type, 1)} {
        @include badge-style(nth($type, 2), nth($type, 3), is-icon);
      }
    }

    & span.is-#{nth($type, 1)} {
      @include badge-style(nth($type, 2), nth($type, 3));
    }
  }
}