$tooltip-bg-color: rgba(00, 00, 00, 0.6);
$system-line-number-color: #7a7cef;
$ruskin-line-number-color: green;
.witness{
  .s-line-number{
    display: inline-block;
    position: relative;
    a{
      border-bottom: 1px dashed;
    }
    
    &.s-line-number-auto{
      float: right;
      a{
        color: $system-line-number-color;
      }
      
      .tooltip{
        right: -5px;
        margin-left: initial;
        left: initial;
        
        &::after{
          right: 5px;
        }
      }
    }
    &.s-line-number-ruskin{
      margin-left: 2%;
      a{
        color: $ruskin-line-number-color;
      }
    }
  
    .tooltip{
      visibility: hidden;
      opacity: 0;
      background-color: $tooltip-bg-color;
      color: #fff;
      text-align: center;
      padding: 2px 5px 0 5px;
      border-radius: 6px;
      position: absolute;
      z-index: 1;
      top: -2em;
      left: 50%;
      margin-left: -4.3em;
      transition: opacity .6s;
      
      &::after {
          content: "";
          position: absolute;
          top: 100%;
          right: 50%;
          margin-left: -5px;
          border-width: 5px;
          border-style: solid;
          border-color: $tooltip-bg-color transparent transparent transparent;
      }
    }
    
    &:hover{
      .tooltip{
        visibility: visible;
        opacity: 1;
      }
    }
  }
  
}