@import 'variables';

.explanation-tooltip {
  cursor: help;
  font-size: 1.5rem;
  text-decoration: underline dotted;
}

//tt-code {
//  text-decoration: none;
//  text-decoration-color: $explanation;
//}

.tooltip {
  display: inline-block;
  position: relative;

  &:hover {
    .tooltiptext {
      opacity: 1;
      overflow: visible;
      visibility: visible;
    }
  }

  .tooltiptext {
    background-color: $grey-two;
    border-radius: 6px;
    bottom: 125%;
    box-shadow: 1px 1px 14px 2px darken($bg, 6.5%);
    color: $white;
    font-size: 1.25rem;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    padding: 5px 0;
    position: absolute;
    text-align: center;
    transition: opacity .3s;
    visibility: hidden;
    width: 120px;
    z-index: $z-index-tooltip;

    &::after {
      border-color: $grey-two transparent transparent;
      border-style: solid;
      border-width: 5px;
      content: '';
      font-size: 1.25rem;
      left: 50%;
      margin-left: -5px;
      position: absolute;
      top: 100%;
    }
  }

  a {
    text-decoration: none;
  }

}
