.tooltip {
  display: inline-block;
  position: relative;
  cursor: pointer;
  color: $color-accent-primary;
  font-weight: bold;
}

.tooltip-content {
  @include position(absolute, null null null 50%);
  @include transform(translatex(-50%));
  width: 25vw;
  min-width: 150px;
  color: $color-background;
  background-color: $color-foreground;
  font-weight: normal;
  z-index: $z-index-tooltips;

  &:not(.open) {
    display: none;
  }

  &:not(.tooltip-up) {
    top: 100%;
  }

  &.tooltip-up {
    bottom: 100%;
  }

  .action-label {
    padding: 0.25em;
    border-bottom: 2px solid $color-background;

    &:last-child {
      border-bottom: 0;
    }

    &:hover {
      color: $color-foreground;
      background-color: $color-accent-secondary;
    }
  }
}

.tooltip {
  display: inline-block;
  position: relative;
  cursor: pointer;
  color: $color-accent-primary;
  font-weight: bold;
}

.tooltip-content {
  @include position(absolute, null null null 50%);
  @include transform(translatex(-50%));
  width: 25vw;
  min-width: 150px;
  color: $color-background;
  background-color: $color-foreground;
  font-weight: normal;
  z-index: $z-index-tooltips;

  @media only screen and (max-width: 640px) {
    width: 80vw;
  }

  &:not(.open) {
    display: none;
  }

  &:not(.tooltip-up) {
    top: 100%;
  }

  &.tooltip-up {
    bottom: 100%;
  }

  .action-label {
    padding: 0.25em;
    border-bottom: 2px solid $color-background;

    &:last-child {
      border-bottom: 0;
    }

    &:hover {
      color: $color-foreground;
      background-color: $color-accent-secondary;
    }
  }
}

Make tooltips larger on mobile
Make tooltips larger on mobile
