.tooltip {
  @include box-shadow(0 0 4px #AAA);
  @include border-radius($DEFAULT_BORDER_RADIUS);
  color: $SECONDARY_FONT_COLOR;
  font-size: $MEDIUM_FONT_SIZE;
  position: absolute;
  z-index: 1000;
  max-width: 500px;
  background-color: $WHITE_BACKGROUND_COLOR;
  border: 1px solid $PRIMARY_BORDER_COLOR;
  padding: 4px 20px 8px 8px;
  outline: none;

  // Not sure if I need these:
  text-align: left;
  white-space: normal;

  .arrow:after {
    border-width: 10px;
    content: "";
  }

  &.right {
    .arrow {
      top: 50%;
      left: -11px;
      margin-top: -11px;
      border-right-color: $TERTIARY_FONT_COLOR;
      border-left-width: 0;
    }

    .arrow:after {
      bottom: -10px;
      left: 1px;
      border-right-color: $WHITE_FONT_COLOR;
      border-left-width: 0;
    }
  }

  &.left {
    .arrow {
      top: 50%;
      right: -11px;
      margin-top: -11px;
      border-left-color: $TERTIARY_FONT_COLOR;
      border-right-width: 0;
    }

    .arrow:after {
      right: 1px;
      bottom: -10px;
      border-left-color: $WHITE_FONT_COLOR;
      border-right-width: 0;
    }
  }

  &.bottom {
    .arrow {
      left: 50%;
      top: -11px;
      margin-left: -11px;
      border-bottom-color: $TERTIARY_FONT_COLOR;
      border-top-width: 0;
    }

    .arrow:after {
      top: 1px;
      margin-left: -10px;
      border-bottom-color: $WHITE_FONT_COLOR;
      border-top-width: 0;
    }
  }

  &.top {
    .arrow {
      left: 50%;
      bottom: -11px;
      margin-left: -11px;
      border-top-color: $TERTIARY_FONT_COLOR;
      border-bottom-width: 0;
    }

    .arrow:after {
      bottom: 1px;
      margin-left: -10px;
      border-top-color: $WHITE_FONT_COLOR;
      border-bottom-width: 0;
    }
  }

  .arrow {
    border-width: 11px;
  }

  .arrow, .arrow:after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
  }

  .tooltip-header {
    font-weight: bold;
    border-bottom: 1px solid $PRIMARY_BORDER_COLOR;
    padding-bottom: 5px
  }

  .delete-icon {
    position: absolute;
    right: 2px;
    top: 2px;
    cursor: pointer;
    line-height: 1em;
  }

  .tooltip-content {
    padding-top: 5px;
    font-weight: normal;
    line-height: 1.3em;
  }
}

.hover-tooltip {
  pointer-events: none;
}