$body-bg: #fff !default;
$border-color: #dedede !default;
$tooltip-color: #000 !default;
$tooltip-font-size: .875rem !default;

$tooltip-bg: $body-bg !default;
$tooltip-border-color: $border-color !default;
$tooltip-color: $text-dark !default;
$tooltip-padding: 10px 15px !default;
$tooltip-font-size: $font-size-base !default;
$tooltip-box-shadow: 0 6px 11px 1px rgba(36, 40, 43, .1) !default;

.wpj-tooltip {
   background: $tooltip-bg;
   border: 1px solid  $tooltip-border-color;
   color: $tooltip-color;
   padding: $tooltip-padding;
   font-size: $tooltip-font-size;
   box-shadow: $tooltip-box-shadow;
   position: absolute;
   text-align: center;
   z-index: 1000;
   white-space: normal;

   &::after {
      content: '';
      display: inline-block;
      position: absolute;
      border-top: 7px solid $tooltip-bg;
      border-left: 7px solid transparent;
      border-right: 7px solid transparent;
      left: 50%;
      bottom: -7px;
      margin-left: -7px;
   }

   &::before {
      content: '';
      display: inline-block;
      position: absolute;
      border-top: 8px solid $tooltip-border-color;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      left: 50%;
      bottom: -8px;
      margin-left: -8px;
   }
}

.review-stars-tooltip {
   bottom: 100%;
   max-width: 100%;
   left: 0;
   text-align: center;
   display: none;

   &::after,
   &::before {
      left: 42px;
   }
}
