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

$tooltip-width = 424px
$tooltip-height = 172px
$tooltip-distance = 12px

+host-styles(mp-tutorial-tooltip)
  color rgba(255, 255, 255, 0.64)
  cursor default
  font-weight $weight-medium
  height $tooltip-height
  position absolute
  width $tooltip-width
  z-index $z-tooltip

  // default (placement=top) tooltip positioning
  bottom 'calc(100% + %s)' % $tooltip-distance
  left 'calc(50% - %s)' % ($tooltip-width / 2)

+host-styles(mp-tutorial-tooltip, '[hide="true"]')
  pointer-events none

+host-styles(mp-tutorial-tooltip, '[placement="bottom"]')
  bottom initial
  left 'calc(50% - %s)' % ($tooltip-width / 2)
  top 'calc(100% + %s)' % $tooltip-distance

+host-styles(mp-tutorial-tooltip, '[placement="left"]')
  bottom initial
  left initial
  right 'calc(100% + %s)' % $tooltip-distance
  top 'calc(50% - %s)' % ($tooltip-height / 2)

+host-styles(mp-tutorial-tooltip, '[placement="right"]')
  bottom initial
  left 'calc(100% + %s)' % $tooltip-distance
  top 'calc(50% - %s)' % ($tooltip-height / 2)

+host-styles(mp-tutorial-tooltip, '[placement="center"]')
  bottom initial
  left 'calc(50% - %s)' % ($tooltip-width / 2)
  top 'calc(50% - %s)' % ($tooltip-height / 2)

+host-styles(mp-tutorial-tooltip, '[arrow-align="top"]')
  bottom initial
  top calc(50% - 31px)

+host-styles(mp-tutorial-tooltip, '[arrow-align="bottom"]')
  bottom calc(50% - 24px)
  top initial

+host-styles(mp-tutorial-tooltip, '[arrow-align="left"]')
  left calc(50% - 32px)
  right initial

+host-styles(mp-tutorial-tooltip, '[arrow-align="right"]')
  left initial
  right calc(50% - 36px)

+prefix-classes('mp-tutorial-tooltip-')
  .stage
    height inherit

  .wrapper
    background $blue-700
    border-radius 8px
    box-shadow 0 16px 41px 0 rgba(18, 82, 143, 0.37)
    height inherit

    // fade-in animation styles

    opacity 0

    &.in
      opacity 1
      transition all ($mp-slow)ms $ease-out-quart

    &.out
      opacity 0
      transition all ($mp-slow)ms $ease-in-quart

    // slide-in animation styles

    &.placement-bottom,
    &.placement-top,
    &.placement-left,
    &.placement-right
      &.in
        transform translate(0)

    &.placement-top
      &, &.out
        transform translateY(-20px)

    &.placement-bottom
      &, &.out
        transform translateY(20px)

    &.placement-left
      &, &.out
        transform translateX(-20px)

    &.placement-right
      &, &.out
        transform translateX(20px)

    &.placement-center
      &.in
        transform scale(1)
      &, &.out
        transform scale(0.95)

    // tooltip arrow styles

    &::after
      border 11px solid transparent
      content ''
      height 0
      pointer-events none
      position absolute
      width 0

    &.placement-top::after
      border-top-color $blue-900
      left 50%
      margin-left -11px
      top 100%

    &.placement-top.hide-footer::after
      border-top-color $blue-700

    &.placement-bottom::after
      border-bottom-color $blue-700
      bottom 100%
      left 50%
      margin-left -11px

    &.placement-left::after
      border-left-color $blue-700
      left 100%
      margin-top -11px
      top 50%

    &.placement-right::after
      border-right-color $blue-700
      margin-top -11px
      right 100%
      top 50%

    // tooltip arrow special alignment styles

    &.arrow-align-top
      &.placement-left, &.placement-right
        &::after
          bottom initial
          top 32px

    &.arrow-align-bottom
      &.placement-left, &.placement-right
        &::after
          bottom 13px
          top initial

        &:not(.hide-footer)::after
          border-right-color $blue-900

    &.arrow-align-right
      &.placement-top, &.placement-bottom
        &::after
          left initial
          right 23px

    &.arrow-align-left
      &.placement-top, &.placement-bottom
        &::after
          left 32px
          right initial

  .close-btn
    cursor pointer
    position absolute
    right 10px
    svg-icon-style($blue-100, white)
    top 10px

  .content
    padding 23px 30px

  .footer
    background $blue-900
    border-radius 0 0 8px 8px
    border-top 1px solid $blue-900
    bottom 0
    display flex
    flex-direction row
    height 42px
    justify-content space-between
    position absolute
    width 100%

    ul.steps
      list-style none
      margin 0
      padding 0
      padding-left 30px

      li.step
        background $blue-100
        border-radius 50%
        float left
        height 6px
        margin 17px 14px 17px 0
        position relative
        width 6px

        &.active
          background transparent

          &::after
            border 4px solid $mp-yellow
            border-radius 50%
            box-shadow 0 2px 3px 0 rgba(19, 102, 179, 0.66)
            content ''
            height 4px
            left -3px
            position absolute
            top -3px
            width 4px

    .next, .done
      color $blue-100
      cursor pointer
      font-size 12px
      font-weight bold
      padding 13px 25px 17px 0
      text-transform uppercase

      &:hover
        color $white