.kara-tooltip {
  position: absolute;
  z-index: 1000;
  display: block;
  visibility: visible;
  font-size: 14px;
  line-height: 1.5;

  &-hidden {
    display: none;
  }

  &-placement-top,
  &-placement-topLeft,
  &-placement-topRight {
    padding-bottom: 8px;
  }

  &-placement-right,
  &-placement-rightTop,
  &-placement-rightBottom {
    padding-left: 8px;
  }

  &-placement-bottom,
  &-placement-bottomLeft,
  &-placement-bottomRight {
    padding-top: 8px;
  }

  &-placement-left,
  &-placement-leftTop,
  &-placement-leftBottom {
    padding-right: 8px;
  }
}

// Wrapper for the tooltip content
.kara-tooltip-inner {
  max-width: 250px;
  padding: 8px 10px;
  color: #fff;
  text-align: left;
  text-decoration: none;
  background-color: rgba(64, 64, 64, 0.85);
  border-radius: 4px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
  min-height: 34px;
}

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

.kara-tooltip {
  &-placement-top &-arrow,
  &-placement-topLeft &-arrow,
  &-placement-topRight &-arrow {
    bottom: 3px;
    border-width: 5px 5px 0;
    border-top-color: rgba(64, 64, 64, 0.85);
  }

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

  &-placement-topLeft &-arrow {
    left: 16px;
  }

  &-placement-topRight &-arrow {
    right: 16px;
  }

  &-placement-right &-arrow,
  &-placement-rightTop &-arrow,
  &-placement-rightBottom &-arrow {
    left: 3px;
    border-width: 5px 5px 5px 0;
    border-right-color: rgba(64, 64, 64, 0.85);
  }

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

  &-placement-rightTop &-arrow {
    top: 8px;
  }

  &-placement-rightBottom &-arrow {
    bottom: 8px;
  }

  &-placement-left &-arrow,
  &-placement-leftTop &-arrow,
  &-placement-leftBottom &-arrow {
    right: 3px;
    border-width: 5px 0 5px 5px;
    border-left-color: rgba(64, 64, 64, 0.85);
  }

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

  &-placement-leftTop &-arrow {
    top: 8px;
  }

  &-placement-leftBottom &-arrow {
    bottom: 8px;
  }

  &-placement-bottom &-arrow,
  &-placement-bottomLeft &-arrow,
  &-placement-bottomRight &-arrow {
    top: 3px;
    border-width: 0 5px 5px;
    border-bottom-color: rgba(64, 64, 64, 0.85);
  }

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

  &-placement-bottomLeft &-arrow {
    left: 16px;
  }

  &-placement-bottomRight &-arrow {
    right: 16px;
  }
}