$tooltip-arrow-directions: (
  bottom: top,
  top: bottom,
  left: right,
  right: left
);

@mixin arrow($direction) {

  @if not map-has-key($tooltip-arrow-directions, $direction) {
    $keys: map-keys($tooltip-arrow-directions);
    @error '[tooltip] The $direction parameter must be one of: `#{$keys}, `#{$direction}` was given.';
  }

  width: 0;
  height: 0;

  @if $tooltip-use-outline{
    border: $tooltip-arrow-size solid transparent;
    border-#{map-get($tooltip-arrow-directions, $direction)}-color: var(--tooltip-bg);
  } @else {
    border: $tooltip-arrow-size solid transparent;
    border-#{map-get($tooltip-arrow-directions, $direction)}-color: var(--tooltip-bg);
  }

}

@mixin base-effects() {
  opacity: 0;
  pointer-events: none;
  @if $tooltip-animation {
    transition: opacity .18s ease-out .18s, transform .18s ease-out .18s;
  } @else {
    transition: none;
  }
}

@mixin normalized-text() {
  text-indent: 0;
  font-weight: normal;
  font-style: normal;
  text-shadow: none;
  font-style: var(--tooltip-font-style);
  font-family: var(--tooltip-font-family);
  font-size: var(--tooltip-font-size);
}


//
// Styles
// -----------------------------------------


// IE 11 button bugfix
button[aria-label] {
  &[data-tooltip] {
    overflow: visible;
  }
}

[aria-label] {
  &[data-tooltip] {
    position: relative; // alt. absolute or fixed
    cursor: pointer; // Fixing iOS Safari event issue. More info at: https://goo.gl/w8JF4W

    &:after {
      @include base-effects();
      @include normalized-text();

      @if $tooltip-use-outline{
        background: var(--body-bg);
        border: $tooltip-border-width solid var(--tooltip-bg);
        color: var(--body-color);
      } @else {
        background: var(--tooltip-bg);
        color: var(--tooltip-color);
      }

      border-radius: var(--tooltip-border-radius);
      content: attr(aria-label);
      padding: $tooltip-padding-y $tooltip-padding-x;
      position: absolute;
      white-space: nowrap;
      z-index: $zindex-tooltip;
    }

    &:before {
      @include arrow(bottom);
      @include base-effects();
      content: "";
      position: absolute;
      z-index: 10;
    }

    &:hover,
    &[data-tooltip*=":show"] {
      &:before,
      &:after {
        opacity: 1;
        pointer-events: none;
      }
    }

    &[data-tooltip="top"],
    &[data-tooltip="bottom"] {
      &:hover {
        &:after,
        &:before {
          transform: translate(-50%, 0);
        }
      }
    }

    &[data-tooltip*="-left"] {
      &:after {
        left: 0;
      }

      &:before {
        left: 5px;
      }
    }

    &[data-tooltip*="-right"] {
      &:after {
        right: 0;
      }
      &:before {
        right: 5px;
      }
    }

    &[data-tooltip*="-left"],
    &[data-tooltip*="-right"] {
      &:hover {
        &:before,
        &:after {
          transform: translate(0, 0);
        }
      }
    }

    &[data-tooltip^="top"] {
      &:before,
      &:after {
        bottom: 100%;
        transform-origin: top;
        transform: translate(0, 0);
      }

      &:after {
        margin-bottom: $tooltip-arrow-size + 5px;
      }
    }

    &[data-tooltip="top"] {
      &:before,
      &:after {
        left: 50%;
        transform: translate(-50%, 0);
      }
    }

    &[data-tooltip^="bottom"] {
      &:before,
      &:after {
        top: 100%;
        transform: translate(0, calc(0 * -1));
      }

      &:after {
        margin-top: $tooltip-arrow-size + 5px;
      }

      &:before {
        @include arrow(top);
      }
    }

    &[data-tooltip="bottom"] {
      &:after,
      &:before {
        left: 50%;
        transform: translate(-50%, calc(0 * -1));
      }
    }

    &[data-tooltip="left"],
    &[data-tooltip="right"] {
      &:hover {
        &:before,
        &:after {
          transform: translate(0, -50%);
        }
      }
    }

    &[data-tooltip="left"] {
      &:after,
      &:before {
        right: 100%;
        top: 50%;
        transform: translate(0, -50%);
      }

      &:after {
        margin-right: $tooltip-arrow-size + 5px;
      }

      &:before {
        @include arrow(right);
      }
    }

    &[data-tooltip="right"] {
      &:after,
      &:before {
        left: 100%;
        top: 50%;
        transform: translate(calc(0 * -1), -50%);
      }

      &:after {
        margin-left: $tooltip-arrow-size + 5px;
      }

      &:before {
        @include arrow(left);
      }
    }
  }
}