$badge-border-size: 1px !default
$badge-padding: .1rem .25rem !default
$badge-border-radius: 1rem !default
$badge-size-small: .75rem !default
$badge-size-normal: 1rem !default
$badge-size-medium: 1.2rem !default
$badge-size-large: 1.4rem !default
$badge-z-index: 99 !default

=badge-size($size)
  &::after
    z-index: 0
    min-width: $size
    min-height: $size
    font-size: $size * .75
    top: 0
    right: 0
    bottom: auto
    left: auto
    transform: translate(50%, -50%)
  &.has-badge-left
    &::after
      top: 0
      right: auto
      bottom: auto
      left: 0
      transform: translate(-50%, -50%)
  &.has-badge-bottom
    &::after
      top: auto
      right: 0
      bottom: 0
      left: auto
      transform: translate(50%, 50%)
  &.has-badge-bottom-left
    &::after
      top: auto
      right: auto
      bottom: 0
      left: 0
      transform: translate(-50%, 50%)
  &.has-badge-inline
    margin-right: $size * 1.5
    &::after
      top: 50%
      right: -10%
    &.has-badge-left
      margin-right: inherit
      margin-left: $size * 1.5
      top: 50%
      left: 10%
    &.has-badge-bottom
      margin-right: $size * 1.5
      top: 50%
      right: -10%
    &.has-badge-bottom-left
      margin-right: inherit
      margin-left: $size * 1.5
      top: 50%
      left: 10%

=badge
  position: relative
  &::after
    display: inline-block
    position: absolute
    margin: 0
    padding: $badge-padding
    text-align: center
    white-space: nowrap
    line-height: 1
    background: $primary
    background-clip: padding-box
    border-radius: 0
    box-shadow: 0 0 0 $badge-border-size $white
    color: $white
    content: attr(data-badge)
    z-index: $badge-z-index
  &[data-badge=""]
    &::after
      // content: none
      vertical-align: inherit

  @each $name, $pair in $colors
    $color: nth($pair, 1)
    $color-invert: nth($pair, 2)
    &.has-badge-#{$name}
      &::after
        background: $color
        color: $color-invert

  &.has-badge-outlined
    &::after
      background-color: $white
      box-shadow: none
      border: $badge-border-size solid $primary
      color: $primary
    @each $name, $pair in $colors
      $color: nth($pair, 1)
      $color-invert: nth($pair, 2)
      &.has-badge-#{$name}
        &::after
          background: $white
          box-shadow: none
          border: $badge-border-size solid $color
          color: $color
  &.has-badge-rounded
    &::after
      border-radius: $radius-rounded

  +badge-size($badge-size-normal)

  &.has-badge-small
    +badge-size($badge-size-small)
  &.has-badge-medium
    +badge-size($badge-size-medium)
  &.has-badge-large
    +badge-size($badge-size-large)

  // IE FIX: on IE badge was cropped
  &.button
    &:not(.is-clipped)
      &::after
        overflow: visible

[data-badge]
  +badge