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

+prefix-classes('mp-tooltip-')
  .wrapper, .wrapper *
    box-sizing border-box

  .wrapper
    display flex
    pointer-events none
    position absolute

    &.hidden
      pointer-events none
      .main
        display none

    &.transitioning
      pointer-events none
      .main
        // An alternative that was tried was positioning the tooltip off the page with left:-9999, top: -9999.
        // However, this in some cases the width of the tooltip is different when it's off the page vs. when it's
        // finally positioned on the page. This screws up the tooltip position computation which depends on the
        // final width of the tooltip. Using visibility:hidden doesn't suffer from this problem.
        visibility hidden

    .main
      align-items center
      border-radius 3px
      box-shadow 0 2px 4px 0 (rgba(0, 0, 0, 0.16))
      color $white
      cursor default
      display inline-flex
      font-family $family-helvetica
      font-size-default()
      font-weight bold
      justify-content center
      padding 10px 18px
      pointer-events auto
      position relative
      text-transform initial
      z-index $z-tooltip

      .arrow
        border 5px solid transparent
        content ''
        height 0
        position absolute
        width 0

      &.placement-top .arrow
        left 50%
        margin-left -5px
        top 100%

      &.placement-bottom .arrow
        bottom 100%
        left 50%
        margin-left -5px

      &.placement-left .arrow
        left 100%
        margin-top -5px
        top 50%

      &.placement-right .arrow
        margin-top -5px
        right 100%
        top 50%

      &.type-default
        background-color $grey-900

        &.placement-top .arrow
          border-top-color $grey-900

        &.placement-bottom .arrow
          border-bottom-color $grey-900

        &.placement-left .arrow
          border-left-color $grey-900

        &.placement-right .arrow
          border-right-color $grey-900

      &.type-error
        background-color $mp-red

        &.placement-top .arrow
          border-top-color $mp-red

        &.placement-bottom .arrow
          border-bottom-color $mp-red

        &.placement-left .arrow
          border-left-color $mp-red

        &.placement-right .arrow
          border-right-color $mp-red