@import "@pluginjs/styles/variables.scss";

// Vars
// =====================
$tooltip: "pj-tooltip" !default;
$tooltip-zindex: $zindex-tooltip !default;
$tooltip-max-height: 50vh !default;

$tooltip-color: $color-white !default;
$tooltip-bg: $gray-darkest !default;

$tooltip-arrow-size: 10px !default;
$tooltip-arrow-spacer: $tooltip-arrow-size !default;

// Core
// =====================
.#{$tooltip} {
  position: absolute;
  top: 0;
  left: 0;
  z-index: $tooltip-zindex;
  box-sizing: border-box;
  display: block;
  color: $tooltip-color;
  background-color: $tooltip-bg;

  &-fade {
    opacity: 0;
    transition: opacity 0.15s linear;
  }

  &-show {
    opacity: 1;
  }

  &-inner {
    box-sizing: border-box;
    width: 100%;
    max-height: $tooltip-max-height;
    overflow: auto;
    color: inherit;
    background-color: inherit;

    > * {
      &:first-child {
        margin-top: 0;
      }

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  &[x-placement^="top"] {
    margin-bottom: $tooltip-arrow-spacer;
  }

  &[x-placement^="right"] {
   margin-left: $tooltip-arrow-spacer;
  }

  &[x-placement^="bottom"] {
    margin-top: $tooltip-arrow-spacer;
  }

  &[x-placement^="left"] {
    margin-right: $tooltip-arrow-spacer;
  }
}

.#{$tooltip}-arrow {
  position: absolute;
  z-index: -1;
  width: $tooltip-arrow-size;
  height: $tooltip-arrow-size;
  background-color: inherit;

  [x-placement^="top"] &,
  [x-placement^="bottom"] & {
    transform: translateY(-50%) rotate(45deg);
  }

  [x-placement^="right"] &,
  [x-placement^="left"] & {
    transform: translateX(-50%) rotate(45deg);
  }

  [x-placement^="top"] & {
    top: 100%;
  }

  [x-placement^="right"] & {
    left: 0;
  }

  [x-placement^="bottom"] & {
    top: 0;
  }

  [x-placement^="left"] & {
    left: 100%;
  }
}