@keyframes pulse
 to
  box-shadow: 0 0 0 20px alpha($red, 0)

.roundButton
  commonFontStyles()
  position: relative
  display: flex
  align-items: center
  justify-content: center
  border-radius: 50%
  $commonBoxShadow()
  background: $primary
  color: white
  transition: transitOpacity()
  &.inverse
    background: white
    color: $primary
  &.secondary
    background: $secondary
    &.inverse
      background: white
      color: $secondary
  &.flat
    $commonBoxShadow(0)
  &.labelSelected
    background: $orchid
    color: white
  &.labelDeselected
    background: white
    color: black

  &.regular
    width: 40px
    height: @width
    line-height: @height
    > .icon
      font-size: 20px
  &.oval
    width: 40px
    height: 32px
    line-height: @height
    > .icon
      font-size: 10px
  &.large
    width: 50px
    height: @width
    line-height: @height
    > .icon
      font-size: 24px
    > .pulse
      width: 50px
      height: @width
  &.huge
    width: 80px
    height: @width
    line-height: @height
    > .icon
      font-size: 40px
  &.small
    width: 32px
    height: @width
    line-height: @height
    > .icon
      font-size: 16px
  &.tiny
    width: 24px
    height: @width
    line-height: @height
    > .icon
      font-size: 16px

  &[disabled]
    opacity: .5
    cursor: not-allowed

  > .pulse
    position: absolute
    top: 0
    bottom: 0
    left: 0
    right: 0
    height: 100%
    width: 100%
    border-radius: 50%
    box-shadow: 0 0 0 0 alpha(@background, .7)
    animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1)