$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
		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: -20%
		&.has-badge-left
			margin-right: inherit
			margin-left: $size * 1.5
			top: 50%
			left: 20%
		&.has-badge-bottom
			margin-right: $size * 1.5
			top: 50%
			right: -20%
		&.has-badge-bottom-left
			margin-right: inherit
			margin-left: $size * 1.5
			top: 50%
			left: 20%

=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