$inner-padding: 5px

iw-tooltip-container
  z-index: 6
  position: absolute
  display: block
  padding: $inner-padding

  .tooltip-container__content
    border-radius: 3px
    color: white
    padding: 5px
    background: black    

  &:after
    border: $inner-padding solid transparent
    content: " "
    height: 0
    width: 0
    position: absolute
    pointer-events: none

  &.iw-tooltip-container--bottom:after
    left: 50%
    bottom: calc(100% - #{$inner-padding})
    border-bottom-color: black
    margin-left: -$inner-padding

  &.iw-tooltip-container--top:after
    left: 50%
    top: calc(100% - #{$inner-padding})
    border-top-color: black
    margin-left: -$inner-padding

  &.iw-tooltip-container--right:after
    top: 50%
    right: calc(100% - #{$inner-padding})
    border-right-color: black
    margin-top: -$inner-padding

  &.iw-tooltip-container--left:after
    top: 50%
    left: calc(100% - #{$inner-padding})
    border-left-color: black
    margin-top: -$inner-padding
