@import "../../base/mixins/arrow"

// Slightly opaque blue background
$color = rgba(71, 137, 172, .8)

.tooltip
  background: $color
  border-radius: 5px
  color: #FFF
  display: block
  max-width: 300px
  max-height: 300px
  padding: 10px
  position: absolute
  z-index: 1000

  &.right
    arrow('left', 50%, 6px, @background, transparent, 1px)

  &.left
    arrow('right', 50%, 6px, @background, transparent, 1px)

  &.bottom
    arrow('top', 50%, 6px, @background, transparent, 1px)

  &.top
    arrow('bottom', 50%, 6px, @background, transparent, 1px)

  &.grey
    background: rgba(68, 68, 68, 0.8)

    &.right:before
      border-right-color: @background

    &.left:before
      border-left-color: @background

    &.bottom:before
      border-bottom-color: @background

    &.top:before
      border-top-color: @background