/* ==========================================================================
   Tooltip
   ========================================================================== */

$tooltipBackgroundColor: white
$tooltipTriangle: (width: 8px, height: 10px)
$tooltipMessage: (width: 300px, padding: 20px)

.tooltip
  position: relative

  &--icon
    position: relative

    +flex(center,center)
    width: 18px
    height: 18px
    border-radius: 9px
    background-color: $blue

    font-size: 0.6rem
    line-height: 1
    font-weight: bold()
    color: white
    cursor: help

  &--message
    position: absolute
    left: #{ (map-get($tooltipMessage, width) / 2) * -1 + map-get($tooltipTriangle, width)}
    bottom: calc(100% + #{map-get($tooltipTriangle, height)} + 2px )
    display: block
    margin: 0
    width: map-get($tooltipMessage, width)
    padding: map-get($tooltipMessage, padding)
    background-color: $tooltipBackgroundColor
    box-shadow: 0 5px 10px -2px rgba(black,0.2)

    font-size: 0.7rem
    line-height: 1.3
    color: $grey

    opacity: 0
    pointer-events: none
    transform: translate3d(0,5px,0)
    transition: transform 0.3s, opacity 0.3s

    .tooltip:hover &
      opacity: 1
      transform: translate3d(0,0,0)

    //Triangle
    &:after
      content: ''
      position: absolute
      left: calc(50% - #{map-get($tooltipTriangle, width)})
      bottom: #{((map-get($tooltipTriangle, height) - 1px) * -1)}
      display: block
      width: 0
      height: 0
      border-style: solid
      border-width: map-get($tooltipTriangle, height) map-get($tooltipTriangle, width) 0 map-get($tooltipTriangle, width)
      border-color: $tooltipBackgroundColor transparent transparent transparent