@layer base{

    .tooltip-text {
      visibility: hidden;
     
      width: auto;
      background-color: #333;
      color: #fff;
      text-align: center;
      border-radius: 5px;
      padding: 2px;
      position: fixed;
      z-index: 2;
      opacity: 0;
      transition: opacity 0.3s, transform 0.3s;
      pointer-events: none;
  }
  
  
  
  .tooltip[data-tooltip='bottom'] .tooltip-text {
      top: calc(100% + 10px);
      left: 50%;
      transform: translate(-50%,-10px);
  }
  
  .tooltip[data-tooltip='bottom']:hover .tooltip-text{transform: translate(-50%,0);}
  
  .tooltip[data-tooltip='bottom-left'] .tooltip-text {
      top: calc(100% + 10px);
      left: 0;
      transform: translate(0%,-10px);
      
  }
  
  .tooltip[data-tooltip='bottom-left']:hover .tooltip-text{transform: translate(0%,0);}
  
  .tooltip[data-tooltip='bottom-right'] .tooltip-text {
   
      top:calc(100% + 10px);
      right:0;
      transform: translate(0%,-10px);
  }
  
  .tooltip[data-tooltip='bottom-right']:hover .tooltip-text{transform: translate(0%,0);}
  
  
  .tooltip[data-tooltip='top'] .tooltip-text {
      bottom: 100%;
      left: 50%;
      transform: translate(-50%,0);
  }
  
  .tooltip[data-tooltip='top']:hover .tooltip-text{transform: translate(-50%,-10px);}
  
  .tooltip[data-tooltip='top-right'] .tooltip-text {
      bottom: 100%;
      right:0;
      transform: translate(0%,0px);
  }
  
  .tooltip[data-tooltip='top-right']:hover .tooltip-text{transform: translate(0%,-10px);}
  
  
  
  
  .tooltip[data-tooltip='top-left'] .tooltip-text {
      bottom: 100%;
      left: 0;
      transform: translate(0%,10px);
      
  
      
  }
  
  .tooltip[data-tooltip='top-left']:hover .tooltip-text{transform: translate(0%,-10px);}
  
  
  
  
  .tooltip[data-tooltip='left'] .tooltip-text {
      top: inherit;
      right:inherit;
      transform: translate(0%,-10px);
  }
  
  .tooltip[data-tooltip='left']:hover .tooltip-text{transform: translate(calc(-100% - 10px),0%);}
  
  .tooltip[data-tooltip='right'] .tooltip-text {
      top: inherit;
      left:inherit;
      transform: translate(0%,-10px);
     
  }
  
  .tooltip[data-tooltip='right']:hover .tooltip-text{transform: translate(calc(50% + 10px),0%);}
  
  .tooltip:not(.handler-active):hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    z-index: 9;
    /* transform: translateY(-10px); */
  }
  
  }