// ┌──────────┐
// │ Tooltips │
// └──────────┘
//  ↳ http://esri.github.io/calcite-web/documentation/components/#tooltips
//  ↳ components → _tooltips.md
@if $include-tooltip {
  $multiline-max-width: 250px;

  .tooltip {
    position: relative;
    cursor: pointer;
    &:after {
      content: attr(aria-label);
      position: absolute;
      z-index: 1000000;
      display: none;
      padding: $baseline/4 $baseline/2;
      @include font-size(-2);
      color: $white;
      text-align: center;
      word-wrap: break-word;
      white-space: pre;
      pointer-events: none;
      background: $transparent-black;
      border-radius: 3px;
    }
  }

  .tooltip:before {
    content: "";
    position: absolute;
    z-index: 1000001;
    display: none;
    width: 0;
    height: 0;
    color: $transparent-black;
    pointer-events: none;
    border: 5px solid transparent;
  }

  .tooltip {
    &:hover, &:active, &:focus {
      text-decoration: none;
      &:before,
      &:after {
        display: inline-block;
      }
    }
  }

  .tooltip-multiline {
    &:hover, &:active, &:focus {
      &:after {
        display: table-cell;
      }
    }
  }

  // Default is bottom
  .tooltip {
    &:after {
      top: 100%;
      right: 50%;
      margin-top: 5px;
      line-height: 1.5;
    }

    &:before {
      top: auto;
      right: 50%;
      bottom: -5px;
      margin-right: -5px;
      border-bottom-color: $transparent-black;
    }
  }

  .tooltip-top {
    &:after {
      top: auto;
      right: 50%;
      bottom: 100%;
      margin-bottom: 5px;
    }

    &:before {
      top: -5px;
      right: 50%;
      bottom: auto;
      margin-right: -5px;
      border-top-color: $transparent-black;
      border-bottom: 5px solid transparent;
    }
  }

  .tooltip:after,
  .tooltip-bottom:after {
    @include transform(translateX(50%));
  }

  .tooltip-left {
    &:after {
      top: auto;
      @include position-right(100%);
      margin-right: 5px;
      @if ($include-right-to-left) {
        html[dir="rtl"] & {
          margin-right: 0;
          margin-left: 5px;
        }
      }
      bottom: 50%;
      margin-bottom: inherit;
      @include transform(translateY(50%));
    }

    &:before {
      top: 50%;
      bottom: 50%;
      @include position-left(-5px);
      margin-top: -5px;
      @include border-left-color($transparent-black);
      @if ($include-right-to-left) {
        html[dir="rtl"] & {
          margin-right: 0;
        }
      }
      border-bottom: 5px solid transparent;
    }
  }

  .tooltip-right {
    &:after {
      top: auto;
      bottom: 50%;
      @include position-left(100%);
      margin-left: 5px;
      @if ($include-right-to-left) {
        html[dir="rtl"] & {
          margin-left: 0;
          margin-right: 5px;
        }
      }
      @include transform(translateY(50%));
    }

    &:before {
      top: 50%;
      @include position-right(-5px);
      bottom: 50%;
      margin-top: -5px;
      margin-right: 0;
      @include border-right-color($transparent-black);
      border-bottom: 5px solid transparent;
    }
  }

  .tooltip-multiline {
    &:after {
      width: 22em;
      width: -moz-max-content;
      width: -webkit-max-content;
      max-width: $multiline-max-width;
      word-break: break-word;
      word-wrap: normal;
      white-space: pre-line;
      border-collapse: separate;
    }

    &.tooltip-bottom:after,
    &.tooltip-top:after {
      right: auto;
      left: 50%;
      @include transform(translateX(-50%));
    }

    &.tooltip-left:after,
    &.tooltip-right:after {
      right: 100%;
    }
  }

  // cool ie fix
  // http://keithclark.co.uk/articles/moving-ie-specific-css-into-media-blocks/media-tests/
  @media screen and (min-width:0\0) {
    .tooltip-multiline:after {
      width: $multiline-max-width;
    }
  }
}
