@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, $shadow-color, $font-color) {
  $box-shadow-first-two: 0 0.5em $background, 0 -0.5em $background;

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

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

      box-shadow: $box-shadow-first-two, 0.5em 0 $shadow-color, 0 0 $shadow-color;
    }
  } @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 $shadow-color,
        -0.5em 0 $shadow-color;
    }
  } @else {
    &:first-child {
      @include span-style($color, $background, 0, 100%);

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

$em: 0.75em;

// Default style
.nes-ui-badge {
  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;
  margin-right: 2em;

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

  @each $type in $types {
    &.nes-ui-is-split { 
      & span.nes-ui-is-#{nth($type, 1)} {
        @include badge-style(nth($type, 2), nth($type, 3), is-split, nth($type, 3), $color-black-absolute);
      }
    }

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

    & span.nes-ui-is-#{nth($type, 1)} {
      @include badge-style(nth($type, 2), nth($type, 3), is-default, nth($type, 3), $color-black-absolute);
    }
  }
} 
 
.nes-ui-dark-mode {
  .nes-ui-badge {
    $types: 'dark' $color-black-absolute $color-black-absolute,
      'primary' $base-color map-get($primary-colors, 'normal'),
      'success' $base-color map-get($success-colors, 'normal'),
      'disabled' $base-color map-get($disabled-colors, 'normal'),
      'warning' $base-color map-get($warning-colors, 'normal'),
      'error' $base-color map-get($error-colors, 'normal');

    @each $type in $types {
      &.nes-ui-is-split {
        & span.nes-ui-is-#{nth($type, 1)} {
          @include badge-style(nth($type, 2), nth($type, 3), is-split,  nth($type, 3), $color-black-absolute);
        }
      } 

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

      & span.nes-ui-is-#{nth($type, 1)} {
        @include badge-style(nth($type, 2), nth($type, 3), is-default,  nth($type, 3), $color-black-absolute);
      }
    } 
  }
}