//
// Tooltips
// --------------------------------------------------

// Variables
$tooltip-max-width:           200px                      !default;
$tooltip-font-size:           10px                       !default;
$tooltip-text-align:          center                     !default;
$tooltip-box-shadow:          0 0 5px 0 rgba(0, 0, 0, 1) !default;
$tooltip-color:               #fff                       !default;
$tooltip-bg:                  #000                       !default;
$tooltip-opacity:             .9                         !default;
$tooltip-padding-y:           3px                        !default;
$tooltip-padding-x:           8px                        !default;
$tooltip-margin:              3px                        !default;

$tooltip-arrow-width:         5px                        !default;
$tooltip-arrow-color:         $tooltip-bg                !default;

// Base styles
.tooltip {
  position: absolute;
  font-size: $tooltip-font-size;
  padding: $tooltip-padding-y $tooltip-padding-x;
  opacity: $tooltip-opacity;
  z-index: 9999;
  .tooltip-inner {
    background-color: $tooltip-bg;
    color: $tooltip-color;
    max-width: $tooltip-max-width;
    padding: $tooltip-padding-y $tooltip-padding-x;
    text-align: $tooltip-text-align;
    box-shadow: $tooltip-box-shadow;
  }

  // Tooltip Arrow
  .tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    line-height: 0;
    border: $tooltip-arrow-width dashed $tooltip-arrow-color;
  }

  // North
  .tooltip-arrow-n {
    border-bottom-color: $tooltip-arrow-color;
  }

  // South
  .tooltip-arrow-s {
    border-top-color: $tooltip-arrow-color;
  }

  // East
  .tooltip-arrow-e {
    border-left-color: $tooltip-arrow-color;
  }

  // West
  .tooltip-arrow-w {
    border-right-color: $tooltip-arrow-color;
  }

  // Tooltip Arrow Styles

  // North
  &.tooltip-n .tooltip-arrow {
    top: 0px;
    left: 50%;
    margin-left: -5px;
    border-bottom-style: solid;
    border-top: none;
    border-left-color: transparent;
    border-right-color: transparent;
  }

  // North West
  &.tooltip-nw .tooltip-arrow {
    top: 0;
    left: 10px;
    border-bottom-style: solid;
    border-top: none;
    border-left-color: transparent;
    border-right-color: transparent;
  }

  // North East
  &.tooltip-ne .tooltip-arrow {
    top: 0;
    right: 10px;
    border-bottom-style: solid;
    border-top: none;
    border-left-color: transparent;
    border-right-color: transparent;
  }

  // South
  &.tooltip-s .tooltip-arrow {
    bottom: 0;
    left: 50%;
    margin-left: -5px;
    border-top-style: solid;
    border-bottom: none;
    border-left-color: transparent;
    border-right-color: transparent;
  }

  // South West
  &.tooltip-sw .tooltip-arrow {
    bottom: 0;
    left: 10px;
    border-top-style: solid;
    border-bottom: none;
    border-left-color: transparent;
    border-right-color: transparent;
  }

  // South East
  &.tooltip-se .tooltip-arrow {
    bottom: 0;
    right: 10px;
    border-top-style: solid;
    border-bottom: none;
    border-left-color: transparent;
    border-right-color: transparent;
  }

  // East
  &.tooltip-e .tooltip-arrow {
    right: 0;
    top: 50%;
    margin-top: -5px;
    border-left-style: solid;
    border-right: none;
    border-top-color: transparent;
    border-bottom-color: transparent;
  }

  // West
  &.tooltip-w .tooltip-arrow {
    left: 0;
    top: 50%;
    margin-top: -5px;
    border-right-style: solid;
    border-left: none;
    border-top-color: transparent;
    border-bottom-color: transparent;
  }
}