_white = $UI.colors.white

_sizes = {
  s: 2u,
  m: 2.5u,
  l: 3u,
  dot: 1u
}

.root
  position relative
  align-self flex-start

.badge
  position absolute
  justify-content center
  align-items center
  border 1px solid _white
  opacity 0

  &.visible
    opacity 1

  for size, unit in _sizes
    _halfSize = unit / 2

    &.{size}
      min-width unit
      height unit
      border-radius _halfSize

      &.top
        top -(_halfSize)
      &.bottom
        bottom -(_halfSize)

  &.hasLabel
    &.s
    &.m
      padding 0 0.5u
    &.l
      padding 0 1u

.label
  color _white

  &.s
    font-size 1.25u
    line-height 1.5u

  &.m
    font-size 1.5u
    line-height 2u

  &.l
    font-size 2u
    line-height 2.5u

  &.icon
    margin-left 0.25u

.icon
  color _white

// ----- JS EXPORTS
:export
  colors $UI.colors