%tooltip
  .tooltip-bubble
    position: absolute
    top: -2.8em
    width: auto
    height: 1.9em
    margin: auto
    padding: .3em .4em .3em
    z-index: 5
    background-color: #818383
    border-radius: 4px
    color: $white
    font-size: $font-size-sm
    line-height: 1.3
    text-align: center
    white-space: nowrap
    visibility: hidden

    transition: all 100ms ease
    transform: translateY(20%)
    opacity: 0

    a
      color: $white
      &:hover
        text-decoration: underline
    &:before
      content: ""
      position: absolute
      bottom: -0.3em
      width: 1em
      height: 1em
      transform: rotate(45deg)
      z-index: -1
      background-color: #818383

  &:hover .tooltip-bubble
    transform: translateY(0)
    opacity: 1
    visibility: visible

.tooltip
  @extend %tooltip
  .tooltip-bubble
    right: 0
    left: 0
    max-width: 5em
    &:before
      left: 40%

.tooltip--height
  @extend %tooltip
  .tooltip-bubble
    right: 0
    left: 0
    top: -4em
    height: 3.2em
    max-width: 8.6em
    &:before
      left: 45%

.tooltip--jobs
  @extend %tooltip
  display: inline-block
  position: relative
  .tooltip-bubble
    top: -4.5em
    left: -1.9em
    height: 3.7em
    &:before
      left: 15%

.tooltip--settings
  @extend %tooltip
  display: inline-block
  position: relative
  .icon
    width: 1.2em
    height: 1.2em
    vertical-align: middle
  .tooltip-bubble
    top: -4em
    left: -1.9em
    height: 3.2em
    &:before
      left: 2em
