$tooltip-background-color: $grey-dark !default
$tooltip-max-width: 24rem !default

.tooltip
  position: relative
  &:hover,
  &.is-tooltip-active
    &::before,
    &::after
      z-index: 99999
      position: absolute
      display: inline-block
      pointer-events: none
    &:before
      content: ""
      border-style: solid
      border-width: .5rem
    &::after
      opacity: 0
      content: attr(data-tooltip)
      overflow: hidden
      white-space: nowrap
      text-overflow: ellipsis
      font-size: $size-7
      padding: .4rem .8rem
      transform: translate(-50%, 1rem)
      background: rgba($tooltip-background-color, 0.9)
      border-radius: $radius
      color: $white
      max-width: $tooltip-max-width

  &:focus,
  &:hover,
  &.is-tooltip-active
    &::before
      top: 0
      bottom: auto
      left: 50%
      opacity: 1
      margin-left: -.5rem
      margin-top: -.5rem
      border-color: rgba($tooltip-background-color, 0.9) transparent transparent transparent
    &::after
      top: auto
      bottom: 100%
      left: 50%
      opacity: 1
      transform: translate(-50%, -0.5rem)

  &.is-tooltip-right
    &::after
      top: auto
      bottom: 50%
      left: 100%
      right: auto
      transform: translate(-1rem, 50%)
    &:focus,
    &:hover,
    &.is-tooltip-active
      &::before
        top: 50%
        left: 100%
        right: auto
        border-color: transparent rgba($tooltip-background-color, 0.9) transparent transparent
      &::after
        transform: translate(0.5rem, 50%)

  &.is-tooltip-bottom
    &::after
      top: 100%
      bottom: auto
      left: 50%
      right: auto
      transform: translate(-50%, -1rem)
    &:focus,
    &:hover,
    &.is-tooltip-active
      &::before
        top: 100%
        bottom: auto
        left: 50%
        right: auto
        border-color: transparent transparent rgba($tooltip-background-color, 0.9) transparent
      &::after
        transform: translate(-50%, 0.5rem)

  &.is-tooltip-left
    &::after
      top: auto
      bottom: 50%
      left: auto
      right: 100%
      transform: translate(1rem, 50%)
    &:focus,
    &:hover,
    &.is-tooltip-active
      &::before
        top: 50%
        left: auto
        right: calc(100% - .5rem)
        border-color: transparent transparent transparent rgba($tooltip-background-color, 0.9)
      &::after
        transform: translate(-0.5rem, 50%)

  &.is-tooltip-multiline
    &::after
      min-width: $tooltip-max-width
      text-overflow: clip
      white-space: normal
      word-break: break-word

  @each $name, $pair in $colors
    $color: nth($pair, 1)
    $color-invert: nth($pair, 2)
    &.is-tooltip-#{$name}
      &::before
        border-color: rgba($color, 0.9) transparent transparent transparent
      &.is-tooltip-right
        &::before
          border-color: transparent rgba($color, 0.9) transparent transparent
      &.is-tooltip-bottom
        &::before
          border-color: transparent transparent rgba($color, 0.9) transparent
      &.is-tooltip-left
        &::before
          border-color: transparent transparent transparent rgba($color, 0.9)
      &::after
        background: rgba($color, 0.9)
        color: $color-invert