$tooltip-max-width: 300px !default;
$tooltip-pointer-size: 10px !default;
$tooltip-border-width: 1px !default;

.tooltip {
  background: #fff;
  border: $tooltip-border-width solid $colour-grey-lightmid;
  border-radius: 4px;
  padding: 1em;
  width: 90%;
  box-shadow: 0 2px 2px 0 rgba(#000, 0.1);
  position: absolute;
  margin: (-$tooltip-pointer-size * 1.5) 5% 0;
}

.tooltip__pointer {
  display: block;
  background-color: #fff;
  border-right: $tooltip-border-width solid $colour-grey-lightmid;
  border-bottom: $tooltip-border-width solid $colour-grey-lightmid;
  height: $tooltip-pointer-size;
  width: $tooltip-pointer-size;
  position: absolute;
  pointer-events: none;
  left: 50%;
  top: 100%;
  margin: (-($tooltip-pointer-size / 2) + $tooltip-border-width) 0 0 (-$tooltip-pointer-size / 2);
  transform: rotate(45deg);
}

.tooltip--top {
  margin-top: 0;

  .tooltip__pointer {
    top: -$tooltip-border-width * 2;
    transform: rotate(-135deg);
  }
}

// the breakpoint is double the tooltip's max width because this means it will never run off the edge of the screen, not matter its position on either half of the screen.
// ie half the screen will always be able to accommodate the full max width
@media (min-width: $tooltip-max-width * 2) {
  .tooltip {
    width: auto;
    max-width: $tooltip-max-width;
    margin: (-$tooltip-pointer-size * 1.5) 0 0;
  }

  .tooltip--top {
    margin-top: 0;
  }

  .tooltip--left {
    margin-left: -1em;

    .tooltip__pointer {
      left: 1em;
      margin-left: 0;
    }
  }

  .tooltip--right {
    margin-left: 1em;

    .tooltip__pointer {
      left: auto;
      right: 1em;
    }
  }
}

.no-csstransforms .tooltip__pointer {
  display: none;
}