.rt-task {
  $height: $react-timelines-project-height - 2 * $react-timelines-task-spacing;

  position: relative;
  height: $height;
  line-height: $height;
  text-align: center;
}

.rt-task__content {
  padding: 0 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.rt-task__tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  z-index: 2;
  padding: 10px;
  line-height: 1.3;
  white-space: nowrap;
  text-align: left;
  background: $react-timelines-text-color;
  color: white;
  transform: translateX(-50%) scale(0);
  pointer-events: none;

  &::before {
    $size: 6px;
    position: absolute;
    top: 100%;
    left: 50%;
    border-top: $size solid $react-timelines-text-color;
    border-right: $size solid transparent;
    border-left: $size solid transparent;
    transform: translateX(-50%);
    content: ' ';
  }
}

.rt-task:hover > .rt-task__tooltip,
.rt-task:focus > .rt-task__tooltip {
  $delay: 0.3s;
  transform: translateX(-50%) scale(1);
  transition: transform 0s $delay;
}