// CSS Tooltips

@mixin tooltip($tt-min-width, $tt-bgcolor, $tt-position, $tt-align) {
  position: relative;

  &:after {
    display: block;
    background: $tt-bgcolor;
    border: 1px solid $tt-bgcolor;
    border-bottom: 0;
    @include border-radius(3px);
    padding:  em(8) em(12);
    width: auto;
    min-width: $tt-min-width;
    max-width: 500px;
    position: absolute;
    @if $tt-position == "bottom" {
      @if $tt-align == "right" { right: 0 } @else { left: 0; }
      top: 101%;
      margin-top: 8px;
    } @else if $tt-position == "top" {
      @if $tt-align == "right" { right: 0 } @else { left: 0; }
      bottom: 101%;
      margin-bottom: 8px;
    } @else if $tt-position == "left" {
      right: 101%;
      top: -35%;
      margin-right: 8px;
    } @else if $tt-position == "right" {
      left: 101%;
      top: -35%;
      margin-left: 8px;
    }

    @if $tt-align == "right" {
      text-align: right;
    } @else if $tt-align == "left" {
      text-align: left;
    }

    color: #fff;
    content: attr(data-tooltip);
    line-height: 1.5;
    font-size: $norm;
    font-weight: normal;
    font-style: normal;

    @include transition(opacity 0.1s ease);
    @include opacity(0);
    pointer-events: none;

    @if $tt-pretty != "no" {
      @include background-image(linear-gradient($tt-position, lighten($tt-bgcolor, 12.5%), $tt-bgcolor));
      @include box-shadow(0 0 5px 0 rgba($tt-bgcolor,.25));
    }
  }

  &:before {
    content: " ";
    width: 0;
    height: 0;
    position: absolute;
    @if $tt-position == "bottom" {
      top: 101%;
      @if $tt-align == "right" { right: 8px } @else { left: 8px; }
      border-bottom: 9px solid $tt-bgcolor !important;
      border-left: 9px solid transparent;
      border-right: 9px solid transparent;
    } @else if $tt-position == "top" {
      bottom: 101%;
      @if $tt-align == "right" { right: 8px } @else { left: 8px; }
      border-top: 9px solid $tt-bgcolor !important;
      border-left: 9px solid transparent;
      border-right: 9px solid transparent;
    } @else if $tt-position == "left" {
      top: 3px;
      right: 101%;
      border-left: 9px solid $tt-bgcolor !important;
      border-top: 9px solid transparent;
      border-bottom: 9px solid transparent;
    } @else if $tt-position == "right" {
      top: 3px;
      left: 101%;
      border-right: 9px solid $tt-bgcolor !important;
      border-top: 9px solid transparent;
      border-bottom: 9px solid transparent;
    }
    @include transition(opacity 0.1s ease);
    @include opacity(0);
    pointer-events: none;
  }

  &:hover:after,
  &:hover:before {
    @include transition(opacity 0.1s ease);
    @include opacity(1);
  }
}