@import "../tokens/positioning";
@import "../tokens/colors";

$tooltip_shadow: rgba(60, 106, 172, 0.18);

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

[class^="pb_tooltip_kit"] {
  ~ .tooltip_tooltip,
  .tooltip_tooltip {
    display: block;
    opacity: 0;
    position: absolute;
    left: $offscreen;
    top: 0;
    animation-name: fadeIn;
    animation-duration: 150ms;
    animation-timing-function: linear;
    animation-fill-mode: forwards;

    &.flipped {
      margin-top: 15px;
      .arrow {
        border-color: transparent transparent $white transparent;
        transform: rotate(180deg);
      }
    }

    .arrow {
      content: " ";
      position: absolute;
      top: 100%;
      left: calc(50% - 10px);
      border-color: $white transparent transparent transparent;
      border-style: solid;
      border-width: 10px;
      margin-bottom: 50px;
    }

    &.visible, 
    &.show {
      z-index: $z_9;
      padding: $space_xs $space_sm;
      box-shadow: $shadow_deeper;
      border-radius: $border_rad_light;
    }

    // react only
    &.visible {
      color: $white;
      background-color: rgba($black, $opacity_9);
      &.right {
        box-shadow: -8px 0 28px 0 $tooltip_shadow;
      }
      &.bottom {
        box-shadow: 0 -12px 28px 0 $tooltip_shadow;
      }
      &.left {
        box-shadow: 8px 0 28px 0 $tooltip_shadow;
      }
      // react arrow
      .arrow_bg {
        width: 10px;
        height: 10px;
        background-color: rgba($black, $opacity_9);
        transform: rotate(45deg);
      }
    }

    //rails only
    &.show {
      opacity: 1;
      margin-bottom: $space_sm;
      color: $white;
      background-color: rgba($black, $opacity_9);
      &.fade_out {
        animation-name: fadeOut;
        animation-duration: 150ms;
        animation-timing-function: linear;
        animation-fill-mode: forwards;
      }
      .arrow {
        border-color: $black transparent transparent transparent;
        opacity: $opacity_9;
      }
    }
  }

  &.dark,
  &[class*=_dark]{
    ~.tooltip_tooltip,
    .tooltip_tooltip {
      //react
      &.visible {
        color: $charcoal;
        background-color: $white;
      }
      //rails
      &.show {
        color: $charcoal;
        background-color: $white;
      }
      .arrow {        
        border-color: $white transparent transparent transparent;
        opacity: $opacity_10;
      }
      // react arrow
      .arrow_bg {
        background-color: $white;
      }
      &.flipped {
        .arrow {
          border-color: transparent transparent $black transparent;
          opacity: $opacity_9;
        }
      }
    }
  }
}

// Right
[class^="pb_tooltip_kit"] .tooltip_tooltip {
  $arrow_vertical_offset: calc(50% - #{$space_xs * 1.2});

  &[data-popper-placement="right"] {
    box-shadow: -8px 0 28px 0 $tooltip_shadow;
    margin: 0 0 0 $space_sm;
    .arrow {
      left: -18px;
      right: auto;
      margin-bottom: 0;
      top: $arrow_vertical_offset;
      transform: rotate(90deg);
    }
    &.flipped .arrow {
        transform: rotate(270deg);
    }
  }

  &[data-popper-placement="bottom"] {
    box-shadow: 0 -12px 28px 0 $tooltip_shadow;
    margin: $space_sm 0 0 0;
    .arrow {
      top: -18px;
      margin-bottom: 0;
      transform: rotate(180deg);
    }
    &.flipped .arrow {
      transform: rotate(0deg);
    }
  }

  &[data-popper-placement="left"] {
    box-shadow: 8px 0 28px 0 $tooltip_shadow;
    margin: 0 $space_sm 0 0;
    .arrow {
      margin-bottom: 0;
      right: -18px;
      left: auto;
      top: $arrow_vertical_offset;
      transform: rotate(270deg);
    }
    &.flipped .arrow {
      transform: rotate(90deg);
    }
  }
}