$font-size-base         : 12px;
$line-height-base       : 1.5;
$border-radius-base     : 2px;
$overlay-shadow              : none;
//** Tooltip text color
$tooltip-color: #fff;
//** Tooltip background color
$tooltip-bg: #000;
$tooltip-opacity: 0.7;

$tooltip-border-width: 0;
$tooltip-border-color: transparent;
$tooltip-shadow-width: 0px;

//** Tooltip arrow width
$tooltip-arrow-width: 6px;
//** Tooltip distance with trigger
//** Tooltip arrow color
$tooltip-arrow-color: #000;
$tooltip-arrow-inner-color: $tooltip-bg;

.rcc-tooltip {
  position: absolute;
  z-index: 1070;
  display: block;
  visibility: visible;
  line-height: $line-height-base;
  font-size: $font-size-base;
  padding: $tooltip-shadow-width;
  opacity: $tooltip-opacity;

  &-hidden {
    display: none;
  }
  &-placement {
    &-top {
      margin-top: -10px;
    }
    &-right {
      margin-left: 10px;
    }
    &-bottom {
      margin-top: 10px;
    }
    &-left {
      margin-left: -10px;
    }
  }
  &-placement-top &-arrow,
  &-placement-topLeft &-arrow,
  &-placement-topRight &-arrow{
    bottom: -$tooltip-arrow-width + $tooltip-shadow-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-arrow-width + $tooltip-shadow-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-inner,
  &-placement-rightTop &-arrow-inner,
  &-placement-rightBottom &-arrow-inner {
    left: $tooltip-border-width;
    margin-top: -$tooltip-arrow-width;
    border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
    border-right-color: $tooltip-arrow-inner-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-arrow-width + $tooltip-shadow-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-inner,
  &-placement-leftTop &-arrow-inner,
  &-placement-leftBottom &-arrow-inner {
    right: $tooltip-border-width;
    margin-top: -$tooltip-arrow-width;
    border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
    border-left-color: $tooltip-arrow-inner-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-arrow-width + $tooltip-shadow-width;;
    margin-left: -$tooltip-arrow-width;
    border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
    border-bottom-color: $tooltip-arrow-color;
  }

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

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

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

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

// Wrapper for the tooltip content
.rcc-tooltip-inner {
  padding: 10px;
  // min-width: 150px;
  // max-width: 250px;
  color: $tooltip-color;
  text-align: left;
  text-decoration: none;
  background-color: $tooltip-bg;
  border-radius: $border-radius-base;
  min-height: 34px;
  border:$tooltip-border-width solid $tooltip-border-color;
  box-shadow: $overlay-shadow;
}

// Arrows
.rcc-tooltip-arrow,
.rcc-tooltip-arrow-inner{
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}