@import "../../styles/common";

$tooltip-color: $white;
$tooltip-bg: $black;

$tooltip-arrow-width: rem(8);
$tooltip-distance: $tooltip-arrow-width;
$tooltip-arrow-color: $tooltip-bg;
$tooltip-padding-y: $spacing-small;
$tooltip-padding-x: $spacing-medium;

$tooltip-neutral: transparentize($black, 0.1);
$tooltip-light: transparentize($white, 0.1);
$tooltip-light-text: $near-black;
$tooltip-success: transparentize($green, 0.1);
$tooltip-danger: transparentize($red, 0.1);

:global {
  .phasers-tooltip-neutral {
    .phasers-tooltip-inner {
      background-color: $tooltip-neutral;
    }

    &.phasers-tooltip-placement-top .phasers-tooltip-arrow,
    &.phasers-tooltip-placement-topLeft .phasers-tooltip-arrow,
    &.phasers-tooltip-placement-topRight .phasers-tooltip-arrow {
      border-top-color: $tooltip-neutral;
    }

    &.phasers-tooltip-placement-bottom .phasers-tooltip-arrow,
    &.phasers-tooltip-placement-bottomLeft .phasers-tooltip-arrow,
    &.phasers-tooltip-placement-bottomRight .phasers-tooltip-arrow {
      border-bottom-color: $tooltip-neutral;
    }

    &.phasers-tooltip-placement-left .phasers-tooltip-arrow,
    &.phasers-tooltip-placement-leftTop .phasers-tooltip-arrow,
    &.phasers-tooltip-placement-leftBottom .phasers-tooltip-arrow {
      border-left-color: $tooltip-neutral;
    }

    &.phasers-tooltip-placement-right .phasers-tooltip-arrow,
    &.phasers-tooltip-placement-rightTop .phasers-tooltip-arrow,
    &.phasers-tooltip-placement-rightBottom .phasers-tooltip-arrow {
      border-right-color: $tooltip-neutral;
    }
  }
}

:global {
  .phasers-tooltip-light {
    .phasers-tooltip-inner {
      background-color: $tooltip-light;
      color: $tooltip-light-text;
      box-shadow: 0px 1px 8px 2px rgba(0, 0, 0, 0.1);
    }

    &.phasers-tooltip-placement-top .phasers-tooltip-arrow,
    &.phasers-tooltip-placement-topLeft .phasers-tooltip-arrow,
    &.phasers-tooltip-placement-topRight .phasers-tooltip-arrow {
      border-top-color: $tooltip-light;
    }

    &.phasers-tooltip-placement-bottom .phasers-tooltip-arrow,
    &.phasers-tooltip-placement-bottomLeft .phasers-tooltip-arrow,
    &.phasers-tooltip-placement-bottomRight .phasers-tooltip-arrow {
      border-bottom-color: $tooltip-light;
    }

    &.phasers-tooltip-placement-left .phasers-tooltip-arrow,
    &.phasers-tooltip-placement-leftTop .phasers-tooltip-arrow,
    &.phasers-tooltip-placement-leftBottom .phasers-tooltip-arrow {
      border-left-color: $tooltip-light;
    }

    &.phasers-tooltip-placement-right .phasers-tooltip-arrow,
    &.phasers-tooltip-placement-rightTop .phasers-tooltip-arrow,
    &.phasers-tooltip-placement-rightBottom .phasers-tooltip-arrow {
      border-right-color: $tooltip-light;
    }
  }
}

:global {
  .phasers-tooltip-success {
    .phasers-tooltip-inner {
      background-color: $tooltip-success;
    }

    &.phasers-tooltip-placement-top .phasers-tooltip-arrow,
    &.phasers-tooltip-placement-topLeft .phasers-tooltip-arrow,
    &.phasers-tooltip-placement-topRight .phasers-tooltip-arrow {
      border-top-color: $tooltip-success;
    }

    &.phasers-tooltip-placement-bottom .phasers-tooltip-arrow,
    &.phasers-tooltip-placement-bottomLeft .phasers-tooltip-arrow,
    &.phasers-tooltip-placement-bottomRight .phasers-tooltip-arrow {
      border-bottom-color: $tooltip-success;
    }

    &.phasers-tooltip-placement-left .phasers-tooltip-arrow,
    &.phasers-tooltip-placement-leftTop .phasers-tooltip-arrow,
    &.phasers-tooltip-placement-leftBottom .phasers-tooltip-arrow {
      border-left-color: $tooltip-success;
    }

    &.phasers-tooltip-placement-right .phasers-tooltip-arrow,
    &.phasers-tooltip-placement-rightTop .phasers-tooltip-arrow,
    &.phasers-tooltip-placement-rightBottom .phasers-tooltip-arrow {
      border-right-color: $tooltip-success;
    }
  }
}

:global {
  .phasers-tooltip-danger {
    .phasers-tooltip-inner {
      background-color: $tooltip-danger;
    }

    &.phasers-tooltip-placement-top .phasers-tooltip-arrow,
    &.phasers-tooltip-placement-topLeft .phasers-tooltip-arrow,
    &.phasers-tooltip-placement-topRight .phasers-tooltip-arrow {
      border-top-color: $tooltip-danger;
    }

    &.phasers-tooltip-placement-bottom .phasers-tooltip-arrow,
    &.phasers-tooltip-placement-bottomLeft .phasers-tooltip-arrow,
    &.phasers-tooltip-placement-bottomRight .phasers-tooltip-arrow {
      border-bottom-color: $tooltip-danger;
    }

    &.phasers-tooltip-placement-left .phasers-tooltip-arrow,
    &.phasers-tooltip-placement-leftTop .phasers-tooltip-arrow,
    &.phasers-tooltip-placement-leftBottom .phasers-tooltip-arrow {
      border-left-color: $tooltip-danger;
    }

    &.phasers-tooltip-placement-right .phasers-tooltip-arrow,
    &.phasers-tooltip-placement-rightTop .phasers-tooltip-arrow,
    &.phasers-tooltip-placement-rightBottom .phasers-tooltip-arrow {
      border-right-color: $tooltip-danger;
    }
  }
}

:global {
  .phasers-tooltip {
    position: absolute;
    z-index: 999;
    display: block;
    visibility: visible;
    font-size: $font-size-6;
    font-weight: 600;
    line-height: $line-height-copy;

    &-hidden {
      display: none;
    }

    &-placement-top,
    &-placement-topLeft,
    &-placement-topRight {
      padding: $tooltip-arrow-width 0 $tooltip-distance 0;
    }
    &-placement-right,
    &-placement-rightTop,
    &-placement-rightBottom {
      padding: 0 $tooltip-arrow-width 0 $tooltip-distance;
    }
    &-placement-bottom,
    &-placement-bottomLeft,
    &-placement-bottomRight {
      padding: $tooltip-distance 0 $tooltip-arrow-width 0;
    }
    &-placement-left,
    &-placement-leftTop,
    &-placement-leftBottom {
      padding: 0 $tooltip-distance 0 $tooltip-arrow-width;
    }

    // Wrapper for the tooltip content
    &-inner {
      padding: $tooltip-padding-y $tooltip-padding-x;
      color: $tooltip-color;
      text-align: left;
      text-decoration: none;
      background-color: $tooltip-bg;
      border-radius: $border-radius-3;
      // box-shadow: $overlay-shadow;
      min-height: 34px;
      max-width: $max-width-5;
    }

    // Arrows
    &-arrow {
      position: absolute;
      width: 0;
      height: 0;
      border-color: transparent;
      border-style: solid;
    }

    & {
      &-placement-top &-arrow,
      &-placement-topLeft &-arrow,
      &-placement-topRight &-arrow {
        bottom: $tooltip-distance - $tooltip-arrow-width;
        margin-left: -$tooltip-arrow-width;
        border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
        border-top-color: $tooltip-arrow-color;
      }

      &-placement-top &-arrow {
        left: 50%;
      }

      &-placement-topLeft &-arrow {
        left: 15%;
      }

      &-placement-topRight &-arrow {
        right: 15%;
      }

      &-placement-right &-arrow,
      &-placement-rightTop &-arrow,
      &-placement-rightBottom &-arrow {
        left: $tooltip-distance - $tooltip-arrow-width;
        margin-top: -$tooltip-arrow-width;
        border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
        border-right-color: $tooltip-arrow-color;
      }

      &-placement-right &-arrow {
        top: 50%;
      }

      &-placement-rightTop &-arrow {
        top: 15%;
        margin-top: 0;
      }

      &-placement-rightBottom &-arrow {
        bottom: 15%;
      }

      &-placement-left &-arrow,
      &-placement-leftTop &-arrow,
      &-placement-leftBottom &-arrow {
        right: $tooltip-distance - $tooltip-arrow-width;
        margin-top: -$tooltip-arrow-width;
        border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
        border-left-color: $tooltip-arrow-color;
      }

      &-placement-left &-arrow {
        top: 50%;
      }

      &-placement-leftTop &-arrow {
        top: 15%;
        margin-top: 0;
      }

      &-placement-leftBottom &-arrow {
        bottom: 15%;
      }

      &-placement-bottom &-arrow,
      &-placement-bottomLeft &-arrow,
      &-placement-bottomRight &-arrow {
        top: $tooltip-distance - $tooltip-arrow-width;
        margin-left: -$tooltip-arrow-width;
        border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
        border-bottom-color: $tooltip-arrow-color;
      }

      &-placement-bottom &-arrow {
        left: 50%;
      }

      &-placement-bottomLeft &-arrow {
        left: 15%;
      }

      &-placement-bottomRight &-arrow {
        right: 15%;
      }
    }
  }
}