// @page Pattern Library/JavaScript
// @name Tooltip
//
// @description
//  `.us-tooltip` can be applied to any parent, and by hovering it, it will toggle the visibility of `.us-tooltip__note`. Please note that on mobile viewports, the tooltip will appeat underneath the element that is aligned with the tooltip icon.
//
// @state .us-tooltip--top
// @state .us-tooltip--bottom
// @state .us-tooltip--left
// @state .us-tooltip--right
// @state .us-tooltip--small
//
// @javascript
//  var tooltips = new ClassToggler({
//    containerClass: '.us-tooltip',
//    $target: $('.us-tooltip__icon'),
//    activeClass: "us-tooltip--active"
//  });
//
// @markup
//   <div class="tooltip-demo us-tooltip {$modifiers}">
//     <div class="us-field">
//       <label for='name'>Name</label>
//       <input class='us-form-input' id='name' name='name' placeholder='Please enter your name'>
//     </div>
//
//     <div class="us-tooltip__wrapper">
//       <div class="us-tooltip__icon"></div>
//       <div class="us-tooltip__note">
//         <div class="us-tooltip__arrow"></div>
//         <strong>Tooltip</strong> message content
//       </div>
//     </div>
//   </div>

$tooltip-note-width: 300px !default;
$tooltip-icon-size: 22px !default;
$tooltip-icon-size--small: 16px !default;
$tooltip-icon-bg-color: $c-bordergrey !default;
$tooltip-icon-top-position: 0 !default;
$tooltip-icon-right-position: 0 !default;

$tooltip-note-padding-vertical: 1em !default;
$tooltip-note-padding-horizontal: .75em !default;
$tooltip-note-bg-color: #fff !default;
$tooltip-note-border-color: $c-typecyan !default;

$tooltip-arrow-width: 10px !default;
$tooltip-arrow-height: $tooltip-arrow-width * 2 !default;

$tooltip-hover: true !default;
$tooltip-active-class-breakpoint: to-tablet !default;
$tooltip-default-breakpoint: tablet !default;

$tooltip-h-positions: "top", "bottom";
$tooltip-v-positions: "left", "right";

@mixin tooltip-arrow($arrow-type, $arrow-width, $arrow-height, $arrow-position, $bottom-position) {
  .us-tooltip__arrow {
    @include respond-to($tooltip-default-breakpoint) {
      @include arrow($arrow-width, $arrow-height, $arrow-type, $tooltip-note-border-color);
      #{$arrow-position}: $bottom-position;

      &:after {
        @include arrow($arrow-width, $arrow-height, $arrow-type, $tooltip-note-bg-color);
        #{$arrow-position}: 1px;
      }
    }
  }
}

%tooltip-vertical-defaults {
  @include respond-to($tooltip-default-breakpoint, true) {
    top: -$tooltip-note-padding-vertical;

    .us-tooltip__arrow {
      top: $tooltip-note-padding-vertical;
    }

    .us-tooltip__arrow:after {
      top: -$tooltip-arrow-width;
    }
  }
}

%tooltip-horizontal-defaults {
  @include respond-to($tooltip-default-breakpoint, true) {
    left: 50%;
    margin-left: - ($tooltip-note-width / 2);

    .us-tooltip__arrow,
    .us-tooltip__arrow:after {
      left: 50%;
      margin-left: -$tooltip-arrow-height/2;
    }
  }
}

@mixin tooltip-position--horizontal($position, $icon-size: $tooltip-icon-size, $arrow-height: $tooltip-arrow-width, $arrow-width: $tooltip-arrow-height) {
  $px-position: $icon-size + $arrow-height;
  $bottom-position: -($arrow-width / 2);
  $arrow-type: opposite-direction($position);
  $arrow-position: opposite-direction($position);

  @extend %tooltip-horizontal-defaults;
  @include tooltip-arrow($arrow-type, $arrow-width, $arrow-height, $arrow-position, $bottom-position);
  #{opposite-direction($position)}: $px-position;
}

@mixin tooltip-position--vertical($position, $icon-size: $tooltip-icon-size, $arrow-height: $tooltip-arrow-height, $arrow-width: $tooltip-arrow-width) {
  $arrow-type: opposite-direction($position);
  $arrow-position: $arrow-type;
  $bottom-position: -($arrow-height / 2);
  $px-position: -($tooltip-note-width + ($icon-size / 2)) - 4;

  @extend %tooltip-vertical-defaults;
  @include tooltip-arrow($arrow-type, $arrow-width, $arrow-height, $arrow-position, $bottom-position);
  #{$position}: $px-position;
}

@mixin tooltip--active {
  .us-tooltip__note {
    display: block;
    pointer-events: all;
    opacity: 1;
    visibility: visible;
    transition-delay: 0ms;
  }

  .us-tooltip__icon {
    background: $c-typecyan;
  }
}

.us-tooltip {
  &.us-tooltip--active {
    @if $tooltip-active-class-breakpoint {
      @include respond-to($tooltip-active-class-breakpoint) {
        @include tooltip--active;
      }
    } @else {
      @include tooltip--active;
    }
  }

  @if $tooltip-hover {
    &:hover {
      @include respond-to($tooltip-default-breakpoint, true) {
        @include tooltip--active;
      }
    }
  }
}

.us-tooltip__wrapper {
  position: static;
  top: 0;
  right: 0;

  @include respond-to($tooltip-default-breakpoint, true) {
    position: absolute;
  }
}

.us-tooltip__icon {
  position: absolute;
  top: $tooltip-icon-top-position;
  right: $tooltip-icon-right-position;
  width: $tooltip-icon-size;
  height: $tooltip-icon-size;
  font-weight: 700;
  line-height: $tooltip-icon-size;
  color: #fff;
  text-align: center;
  cursor: pointer;
  background: $tooltip-icon-bg-color;
  border-radius: 50%;

  @include respond-to($tooltip-default-breakpoint, true) {
    position: static;
  }

  &:before {
    content: "?";
  }
}

.us-tooltip__note {
  position: static;
  display: none;
  padding: $tooltip-note-padding-horizontal $tooltip-note-padding-vertical;
  margin-top: 1em;
  margin-bottom: 1em;
  color: $c-typegrey;
  background: $tooltip-note-bg-color;
  border: 1px solid $tooltip-note-border-color;
  border-radius: 4px;

  @include respond-to($tooltip-default-breakpoint, true) {
    position: absolute;
    display: block;
    width: $tooltip-note-width;
    margin-top: 0;
    margin-bottom: 0;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: visibility 0ms ease 300ms, opacity 300ms ease;
  }
}

.us-tooltip__arrow {
  position: absolute;

  &:after {
    position: absolute;
    content: "";
  }
}

.us-tooltip--small {
  .us-tooltip__icon {
    width: $tooltip-icon-size--small;
    height: $tooltip-icon-size--small;
    font-size: .875em;
    line-height: $tooltip-icon-size--small;
  }
}

@each $position in $tooltip-h-positions {
  .us-tooltip--#{$position} {
    .us-tooltip__note {
      @include tooltip-position--horizontal($position);
    }
  }
}

@each $position in $tooltip-v-positions {
  .us-tooltip--#{$position} {
    .us-tooltip__note {
      @include tooltip-position--vertical($position);
    }
  }
}