@use "../theme.scss" as *;

.tooltip {
  display: inline-block;
  & .tooltip-content {
    z-index: 500;
    font-size: 0.98em;
    border-style: solid;
    border-width: 1px;
    border-color: $tooltip-border-color;
    border-radius: 4px;
    color: $tooltip-color;
    background-color: $tooltip-bg-color;
    box-shadow: 0px 0px 4px $tooltip-shadow-color;
    padding: 0.3em 0.6em;
  }
  .arrow-pointer {
    z-index: 499;
    position: absolute;
    background-color: $tooltip-bg-color;
    margin: 0.5px 0px 0px;
    width: 0.56em;
    height: 0.56em;
    border-style: solid;
    border-color: $tooltip-border-color;
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
    pointer-events: none;
    &.arrow-pointer-bottom {
      left: 50%;
      top: 99%;
      border-width: 0 1px 1px 0;
      }
    
    &.arrow-pointer-right {
      left: 99%;
      top: 50%;
      border-width: 1px 1px 0 0;
    }
    
    &.arrow-pointer-left {
      left: 1%;
      top: 50%;
      border-width: 0 0 1px 1px;
    }
    
    &.arrow-pointer-top {
      left: 50%;
      top: 1%;
      border-width: 1px 0 0 1px;
    }
  }
  
}