tooltip css

@import "../../lib/styles/colors";

// Tooltip container
.tooltip {
  display: inline-flex;
  position: relative;
  z-index: 10;

  &.centerX {
    justify-content: center;
  }
  &.centerY {
    align-items: center;
  }
  .tooltipInfo {
    position: absolute;
    visibility: hidden;
    background: $mine-shaft;
    opacity: 0.09;
    color: white;
    text-align: center;
    border-radius: 4px;
    padding: 8px 11px;
    line-height: 1.5;
    font-weight: 400;
    font-size: 1.8rem;

    // Fade in tooltip
    opacity: 0;
    transition: opacity 1s;
    width: 180px;

    // The arrow which is a cube that we rotate to have traingle
    &:after {
      z-index: 10;
      content: "";
      position: absolute;
      height: 10px;
      width: 10px;
      background: $mine-shaft;
      border-radius: 2px;
    }
    // right tooltip position
    &.right {
      left: calc(100% + 10px);
      opacity: 1;
      bottom: 50%;
      transform: translateY(50%);
      // Triangle positioning
      &:after {
        top: 50%;
        transform: translateY(-50%) rotate(-46deg);
        left: -5px;
        bottom: 0;
      }
    }
    // left tooltip position
    &.left {
      right: calc(100% + 10px);
      opacity: 1;
      top: 50%;
      transform: translateY(-50%);
      // Triangle positioning
      &:after {
        top: 50%;
        transform: translateY(-50%) rotate(135deg);
        right: -4px;
      }
    }
    // Top tooltip position
    &.top {
      // position the cube to the bottom of the container first then move the object itself in x axis by 50%
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);
      // Triangle positioning
      &:after {
        bottom: -4px;
        transform: translateX(-50%) rotate(225deg);
        left: 50%;
      }
    }
    // Bottom tootlip position
    &.bottom {
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      &:after {
        top: -4px;
        transform: translateX(-50%) rotate(44deg);
        left: 50%;
      }
    }
  }
  // Show tooltip content on hover
  &:hover {
    .tooltipInfo {
      visibility: visible;
      opacity: 1;
    }
  }
}