$tooltip--mobile-breakpoint: 500px;
$tooltip-min-width--mobile: 100px;

.tooltip {
  position: relative;
  display: inline-block;
  &__text {
    visibility: hidden;
    min-width: 180px;
    width: auto;
    background-color: black;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 10px;
    /* Position the tooltip */
    position: absolute;
    bottom: 30px;
    left: 30px;
    z-index: 1;
    font-size: 14px;

    @include max-width-media-query($tooltip--mobile-breakpoint) {
      min-width: $tooltip-min-width--mobile;
    }
  }
  &:hover,
  &:focus {
    cursor: pointer;
  }
  &:hover .tooltip__text,
  &:focus .tooltip__text {
    visibility: visible;
  }
}