@import '../../styles/base/core';
@import '../../styles/variables/color';
@import '../../styles/variables/motion';
@import '../../styles/variables/typography';

$tooltip-prefix: '#{$prefix}-tooltip';

.#{$tooltip-prefix} {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  opacity: 0;
  will-change: opacity;
  transition: opacity $duration-fast $ease-in;

  &.#{$tooltip-prefix}--active {
    opacity: 1;
  }

  .#{$tooltip-prefix}--caret {
    content: '';
    position: absolute;
    display: inline-block;
    z-index: 10000;
    user-select: none;
    pointer-events: none;

    &[class^='top'] {
      top: -12px;
      transform: translate(-50%) rotate(180deg);
    }

    &.top-left {
      margin-left: 12px;
    }
    &.top-right {
      margin-left: -12px;
    }

    &[class^='bottom'] {
      bottom: -12px;
      transform: translate(-50%);
    }

    &.bottom-left {
      margin-left: 12px;
    }
    &.bottom-right {
      margin-left: -12px;
    }

    &[class^='right'] {
      right: -18px;
      transform: translateY(-50%) rotate(-90deg);
    }

    &.right-top {
      margin-top: 12px;
    }
    &.right-bottom {
      margin-top: -12px;
    }

    &[class^='left'] {
      left: -18px;
      transform: translateY(-50%) rotate(90deg);
    }

    &.left-top {
      margin-top: 12px;
    }
    &.left-bottom {
      margin-top: -12px;
    }
  }

  .#{$tooltip-prefix}--content {
    position: absolute;
    padding: 12px 20px;
    font-size: $typography-paragraph3;
    color: white;
    border-radius: 5px;
    background-color: $ink;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.22);
    z-index: 9999;
    pointer-events: none;

    // Top
    &[class^='top'] {
      bottom: 0;
      margin-bottom: 12px;
    }

    &.top {
      transform: translate(-50%);
    }

    &.top-right {
      transform: translate(-100%);
    }

    // Bottom
    &[class^='bottom'] {
      margin-top: 12px;
    }

    &.bottom {
      transform: translate(-50%);
    }

    &.bottom-right {
      transform: translate(-100%);
    }

    // Right
    &[class^='right'] {
      margin-left: 12px;
    }

    &.right {
      transform: translateY(-50%);
    }

    &.right-bottom {
      transform: translateY(-100%);
    }

    // Left
    &[class^='left'] {
      right: 0;
      margin-right: 12px;
    }

    &.left {
      transform: translateY(-50%);
    }

    &.left-bottom {
      transform: translateY(-100%);
    }
  }
}
