@import '../../../stylesheets/defaults'

+host-styles('mp-smart-hub-tooltip')
  display inline-block
  position absolute
  // this value is greater than chart-controls/chart-toggle in insights, and is preferable
  // to other methods of positioning this element. (andrew)
  z-index $z-overlay

+prefix-classes('mp-sh-tooltip-')
  .container
    border-radius 6px
    mp-box-shadow()
    position relative

    &::after
      border 10px solid transparent
      content ''
      height 0
      position absolute
      width 0

    &.placement-top
      margin-bottom 10px
    &.placement-top::after
      border-bottom 0
      border-top-color $white
      left 50%
      margin-left -10px
      top 100%

    &.placement-bottom
      margin-top 10px
    &.placement-bottom::after
      border-bottom-color $white
      border-top 0
      bottom 100%
      left 50%
      margin-left -10px

    &.placement-left
      margin-right 10px
    &.placement-left::after
      border-left-color $white
      border-right 0
      left 100%
      margin-top -10px
      top 50%

    &.placement-right
      margin-left 10px
    &.placement-right::after
      border-left 0
      border-right-color $white
      margin-top -10px
      right 100%
      top 50%

    &.visibility-closed
      display none

    &.visibility-opening
      animation fadeOverlayIn 100ms forwards
      opacity 0

    &.visibility-open
      opacity 1

    &.visibility-closing
      animation fadeOverlayOut 100ms forwards

@keyframes fadeOverlayIn
  from
    opacity 0
    transform translateY(-10px)
  to
    opacity 0.9

@keyframes fadeOverlayOut
  from
    opacity 0.9
  to
    opacity 0
    transform translateY(-10px)