@import '../../global-sass-files/variables';

// Tooltip
.tooltip {
  position: relative;
  display: flex;
  margin-bottom: 3px;
  .tooltiptext {
    visibility: hidden;
    min-width: 120px;
    background-color: #232f39;
    color: #fff;
    padding: 8px 15px;
    box-sizing: border-box;
    position: absolute;
    z-index: 1;
    bottom: 160%;
    left: -2px;
    opacity: 0;
    transition: opacity 0.3s;
    max-width: 220px;
    &:after {
      content: "";
      position: absolute;
      top: 100%;
      left: 0;
      border-width: 9px;
      border-style: solid;
      border-color: #232f39 transparent transparent transparent;
    }
  }
  &:hover {
    .tooltiptext {
      visibility: visible;
      opacity: 1;
      font-size: 12px;
      color: $white-color;
      font-family: $primary-font-regular;
    }
  }
}