//SCSS file for component
.tooltip{
   position: relative;
   display: inline-block;

   &:hover{
       .tooltip__text{
           visibility: visible;
       }
   }

   &__text{
       width: max-content;
       position: absolute;
       transform: translateX(-50%);
       background: var(--tisc-primary-dark);
       color: $white;
       padding: 5px 10px;
       border-radius: 5px;
       visibility: hidden;
       z-index: 5;
       
       &--top{
           bottom: 140%;
           left: 50%;
           @include triangle(down, 7px, var(--tisc-primary-dark)); 
       }

       &--bottom{
           top: 140%;
           left: 50%;
           @include triangle(up, 7px, var(--tisc-primary-dark));
       }

       &--left{
           right: 110%;
           transform: translateY(-20%);
           @include triangle(right, 7px, var(--tisc-primary-dark));
       }

       &--right{
           left: 110%;
           transform: translateY(-20%);
           @include triangle(left, 7px, var(--tisc-primary-dark));
       }
   }
}