@import "../../variables.scss";

.tooltip {
  position: absolute;
  background: $tooltip-bg;
  color: $tooltip-color;
  text-align: center;
  padding: 0 8px;
  line-height: 24px;
  font-size: 12px;
  pointer-events: none;
  z-index: 5;
  &:before {
    content: "";
    position: absolute;
    border: 8px solid transparent;
  }
  &_position_top:before {
    border-top-color: $tooltip-bg;
    top: 100%;
    left: 50%;
    margin-left: -8px;
  }
  &_position_right:before {
    border-right-color: $tooltip-bg;
    top: 4px;
    left: -16px;
  }
  &_position_left:before {
    border-left-color: $tooltip-bg;
    top: 4px;
    left: 100%;
  }
  &_position_bottom:before {
    border-bottom-color: $tooltip-bg;
    top: -16px;
    left: 50%;
    margin-left: -8px;
  }
  &_position_center {
    pointer-events: none;
  }
}