$box-tooltip--caret-size: 6px;

.box-tooltip {
  position: fixed;
  visibility: hidden;
  z-index: $z--dygraph-legend;
}

.box-tooltip--contents {
  border-width: $ix-border;
  border-style: solid;
  background-color: $g1-raven;
  border-radius: $radius;
  padding: 10px;
  font-size: 13px;
  word-break: break-all;
  word-wrap: break-word;
  width: calc(100% - #{$box-tooltip--caret-size * 2});

  pre {
    word-break: break-all;
    word-wrap: break-word;
    white-space: pre-wrap;
  }
}

.box-tooltip__primary {
  .box-tooltip--contents {
    border-color: $c-pool;
  }

  &.right .box-tooltip--caret {
    border-right-color: $c-pool;
  }

  &.left .box-tooltip--caret {
    border-left-color: $c-pool;
  }
}

.box-tooltip__danger {
  .box-tooltip--contents {
    border-color: $c-dreamsicle;
  }

  &.right .box-tooltip--caret {
    border-right-color: $c-dreamsicle;
  }

  &.left .box-tooltip--caret {
    border-left-color: $c-dreamsicle;
  }
}

.box-tooltip--caret {
  position: absolute;
  width: 0;
  height: 0;
  border: $box-tooltip--caret-size solid transparent;
  transform: translate(0,-50%);
}

.box-tooltip--caret-container {
  position: absolute;
  top: 0;
  width: $box-tooltip--caret-size * 2;
  height: 100%;
}

.box-tooltip.left {
  .box-tooltip--contents {
    margin-right: $box-tooltip--caret-size * 2;
  }
  .box-tooltip--caret-container {
    right: 0;
  }
  .box-tooltip--caret {
    left: 0;
  }
}

.box-tooltip.right {
  .box-tooltip--contents {
    margin-left: $box-tooltip--caret-size * 2;
  }
  .box-tooltip--caret-container {
    left: 0;
  }
  .box-tooltip--caret {
    right: 0;
  }
}

.tooltip--link {
  padding-bottom: 10px;
}
