/*

Tooltips

Add simple tooltips to any element.

Script required: **rapido.js**.

Markup:
<a class="btn btn--default tooltip__button" href="#"
  data-tooltip-content="Text to be included in the tooltip"
  data-tooltip-position="bottom">
  Button
</a>
<script type="text/javascript">
  $(document).ready(function() {
    $('.tooltip__button').rapido_Tooltip();
  });
</script>

Include this js after including rapido.js.

    $('.tooltip__button').rapido_Overlay();

**Options** (with default values):

    margin:            15

Styleguide 19

*/

@if $tooltips {

  [data-tooltip-position="top"] + .tooltip {
    @include translate(0, -.50em);
    &:after {
      @include triangle(em($tooltip-triangle-size), $tooltip-background, down);
      left: 50%;
      margin-left: (neg(em($tooltip-triangle-size)) / 2);
      bottom: neg(em($tooltip-triangle-size));
    }
  }

  [data-tooltip-position="bottom"] + .tooltip {
    @include translate(0, .50em);
    &:after {
      @include triangle(em($tooltip-triangle-size), $tooltip-background, up);
      left: 50%;
      margin-left: (neg(em($tooltip-triangle-size)) / 2);
      top: neg(em($tooltip-triangle-size));
    }
  }

  [data-tooltip-position="left"] + .tooltip {
    @include translate(-.50em, 0);
    &:after {
      @include triangle(em($tooltip-triangle-size), $tooltip-background, right);
      right: neg(em($tooltip-triangle-size));
      top: 50%;
      margin-top: (neg(em($tooltip-triangle-size)) / 2);
    }
  }

  [data-tooltip-position="right"] + .tooltip {
    @include translate(.50em, 0);
    &:after {
      @include triangle(em($tooltip-triangle-size), $tooltip-background, left);
      left: neg(em($tooltip-triangle-size));
      top: 50%;
      margin-top: (neg(em($tooltip-triangle-size)) / 2);
    }
  }

  .tooltip {
    @extend %tooltip !optional;
    @include border-radius();
    @include opacity(0);
    @include transition($tooltip-transition-duration);
    background: $tooltip-background;
    color: $tooltip-color;
    padding: $tooltips-padding;
    position: absolute;
    visibility: hidden;
    max-width: 300px;

    &.open {
      @include opacity(1);
      @include translate(0,0);
      max-height: $dropdowns-height;
      visibility: visible;
    }

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

  }


}