@mixin arrow($size, $type, $color) {

  --#{$type}-arrow-size: $size;

  .#{$type}-arrow {
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    margin: $size;
    border-color: $color;
    z-index: 1;
  }

  &[x-placement^="top"] {
    margin-bottom: $size;

    .#{$type}-arrow {
      border-width: $size $size 0 $size;
      border-left-color: transparent !important;
      border-right-color: transparent !important;
      border-bottom-color: transparent !important;
      bottom: -$size;
      left: calc(50% - var(--#{$type}-arrow-size));
      margin-top: 0;
      margin-bottom: 0;
    }
  }

  &[x-placement^="bottom"] {
    margin-top: $size;

    .#{$type}-arrow {
      border-width: 0 $size $size $size;
      border-left-color: transparent !important;
      border-right-color: transparent !important;
      border-top-color: transparent !important;
      top: -$size;
      left: calc(50% - var(--#{$type}-arrow-size));
      margin-top: 0;
      margin-bottom: 0;
    }
  }

  &[x-placement^="right"] {
    margin-left: $size;

    .#{$type}-arrow {
      border-width: $size $size $size 0;
      border-left-color: transparent !important;
      border-top-color: transparent !important;
      border-bottom-color: transparent !important;
      left: -$size;
      top: calc(50% - var(--#{$type}-arrow-size));
      margin-left: 0;
      margin-right: 0;
    }
  }

  &[x-placement^="left"] {
    margin-right: $size;

    .#{$type}-arrow {
      border-width: $size 0 $size $size;
      border-top-color: transparent !important;
      border-right-color: transparent !important;
      border-bottom-color: transparent !important;
      right: -$size;
      top: calc(50% - var(--#{$type}-arrow-size));
      margin-left: 0;
      margin-right: 0;
    }
  }
}

.tooltip {
  display: block !important;
  z-index: $z-index-modal - 2;

  .tooltip-inner {
    background: $background-color-inverse-soft;
    color: $text-color-inverse;
    border-radius: $border-radius-base;
    padding: $space-x-small $space-small;
    box-shadow: $box-shadow-large;
    overflow: auto;
    max-height: 73.5vh; // magic! fully visible on mobile, no scrolling on wide screen
  }

  @include arrow(5px, "tooltip", $background-color-inverse-soft);

  &.popover {
    .popover-inner {
      background: $background-color-soft;
      color: $text-color-base;
      border-radius: $border-radius-base;
      padding: $space-x-small $space-small;
      box-shadow: $box-shadow-x-large;

      nav {
        margin-left: -$space-small;
        margin-right: -$space-small;

        a {
          padding-left: 12px;
        }
      }
    }

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

    @include arrow(7px, "popover", $background-color-soft);
  }


  &[aria-hidden='true'] {
    visibility: hidden;
    opacity: 0;
    transition: opacity 60ms;
  }

  &[aria-hidden='false'] {
    visibility: visible;
    opacity: 1;
    transition: opacity 60ms;
  }
}