.tooltip {
  display: block;
  z-index: 10000;
  max-width: $text-max-width;
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);

  .tooltip-inner {
    background-color: $color-aqua-lightest;
    padding: $gap * 3;
    border-left: ($gap / 2) solid $color-blue;
  }

  .tooltip-arrow {
    width: 1rem;
    height: 1rem;
    position: absolute;
    background-color: $color-aqua-lightest;
    z-index: 1;
    box-shadow: -2px 2px 2px 0 rgba(0,0,0,0.25);
  }

  &[x-placement^="top"] {
    margin-bottom: 5px;

    .tooltip-arrow {
      bottom: -5px;
      left: calc(50% - 5px);
      transform: rotate(-45deg);
      box-shadow: -2px 2px 2px 0 rgba(0,0,0,0.25);
    }
  }

  &[x-placement^="bottom"] {
    margin-top: 5px;

    .tooltip-arrow {
      top: -5px;
      left: calc(50% - 5px);
      transform: rotate(135deg);
      box-shadow: -2px 2px 2px -2px rgba(0,0,0,0.25);
    }
  }

  &[x-placement^="right"] {
    margin-left: 5px;

    .tooltip-arrow {
      left: -5px;
      top: calc(50% - 5px);
      transform: rotate(-135deg);
    }
  }

  &[x-placement^="left"] {
    margin-right: 5px;

    .tooltip-arrow {
      right: -5px;
      top: calc(50% - 5px);
      transform: rotate(45deg);
    }
  }

  &.popover {
    $color: #f9f9f9;

    .popover-inner {
      background: $color;
      color: black;
      padding: 24px;
      box-shadow: 0 5px 30px rgba(black, .1);
    }

    .popover-arrow {
      border-color: $color;
    }
  }

  &[aria-hidden='true'] {
    visibility: hidden;
    opacity: 0;
    transition: opacity .15s, visibility .15s;
  }

  &[aria-hidden='false'] {
    visibility: visible;
    opacity: 1;
    transition: opacity .15s;
  }
}


.icon-tooltip {
  @include icon-link;

  .icon {
    @include icon-size(16);
  }
}