@import '../../assets/scss/constants/_zIndexes.scss';

.tooltiptext {
  visibility: hidden;
  min-width: 100px;
  //background-color: #fff;
  //box-shadow: 3px 4px 23px -3px rgba(0, 0, 0, 0.75);
  font-size: 12px;
  text-align: center;
  //border-radius: 6px;  
    padding: 3px;
  position: absolute;
  z-index: $ziTooltip;
  font-weight: normal;
  // opacity: 0;
  // transition: opacity;
  // transition-delay: 0.5s;
  // transition-duration: 0.1s;
  pointer-events: none;
  color: #464646 !important;
    background-color: #FBE7F7 !important;
    border: 1px solid #2581C4 !important;
    border-radius: 4px !important;
}

.top-tooltip {
  position: relative;
  display: flex;
  &:hover .tooltiptext {
    visibility: visible;
    //opacity: 1;
  }
  .tooltiptext {
    bottom: 115%;
    left: 50%;
    margin-left: -60px;
    &:after {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: #464646 transparent transparent transparent;
    }
  }
}

// left tooptip

.left-tooltip {
  position: relative;
  display: flex;
  &:hover .tooltiptext {
    visibility: visible;
    //opacity: 1;
  }
  .tooltiptext {
    top: 1px;
    right: 100%;
    margin-left: -60px;
    &:after {
      content: ' ';
      position: absolute;
      top: 50%;
      left: 100%; /* To the right of the tooltip */
      margin-top: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: transparent transparent transparent #464646;
    }
  }
}

// bottom tooltip
.bottom-tooltip {
  position: relative;
  display: flex;
  &:hover .tooltiptext {
    visibility: visible;
    //opacity: 1;
  }
  .tooltiptext {
    top: 100%;
    left: 50%;
    margin-left: -60px;
    &:after {
      content: ' ';
      position: absolute;
      bottom: 100%; /* At the top of the tooltip */
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: transparent transparent #464646 transparent;
    }
  }
}

// right tooltip
.right-tooltip {
  position: relative;
  display: flex;
  &:hover .tooltiptext {
    visibility: visible;
    //opacity: 1;
  }
  .tooltiptext {
    top: -2px;
    right: -120px;
    &:after {
      content: ' ';
      position: absolute;
      top: 50%;
      right: 100%;
      margin-top: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: transparent #464646 transparent transparent;
    }
  }
}