// Name:            Tooltip
//
// Component:       `tooltip`
//
// Modifiers:       `tooltip-primary`
//                  `tooltip-success`
//                  `tooltip-info`
//                  `tooltip-warning`
//                  `tooltip-danger`
//                  `tooltip-rotate`
//                  `tooltip-scale`
//
// Markup:
//
// <!-- tooltip -->
// <div class="tooltip">
//   <div class="arrow"></div>
//   <div class="tooltip-inner"></div>
// </div>
//
// ========================================================================

// Variables
// ========================================================================
$tooltip-primary-color:                $inverse !default;
$tooltip-primary-bg:                   $brand-primary !default;

$tooltip-success-color:                $inverse !default;
$tooltip-success-bg:                   $brand-success !default;

$tooltip-info-color:                   $inverse !default;
$tooltip-info-bg:                      $brand-info !default;

$tooltip-warning-color:                $inverse !default;
$tooltip-warning-bg:                   $brand-warning !default;

$tooltip-danger-color:                 $inverse !default;
$tooltip-danger-bg:                    $brand-danger !default;


// Component: Tooltip
// ========================================================================

.tooltip {
  &.bs-tooltip-bottom, 
  &.bs-tooltip-top,
  &.tooltip-bottom,
  &.tooltip-top {
    .arrow {
      left: 50%;
      margin-left: -($tooltip-arrow-width - 2);
    }
  }

  &.bs-tooltip-bottom,
  &.tooltip-bottom {
    .arrow {
      top: 0;
    }
  }

  &.bs-tooltip-top,
  &.tooltip-top {
    .arrow {
      bottom: 0;
    }
  }

  &.bs-tooltip-left, &.bs-tooltip-right,
  &.tooltip-left, &.tooltip-right {
    .arrow {
      top: 50%;
      margin-top: -($tooltip-arrow-width - 2);
    }
  }

  &.bs-tooltip-left,
  &.tooltip-left {
    .arrow {
      right: 0;
    }
  }

  &.bs-tooltip-right,
  &.tooltip-right {
    .arrow {
      left: 0;
    }
  }
}



// Color Modifier
// ========================================================================

// Modifier: `tooltip-primary`
// -------------------------

.tooltip-primary {
  @include tooltip-variant($tooltip-primary-color, $tooltip-primary-bg);
}

// Modifier: `tooltip-success`
// -------------------------

.tooltip-success {
  @include tooltip-variant($tooltip-success-color, $tooltip-success-bg);
}

// Modifier: `tooltip-info`
// -------------------------

.tooltip-info {
  @include tooltip-variant($tooltip-info-color, $tooltip-info-bg);
}

// Modifier: `tooltip-warning`
// -------------------------

.tooltip-warning {
  @include tooltip-variant($tooltip-warning-color, $tooltip-warning-bg);
}

// Modifier: `tooltip-danger`
// -------------------------

.tooltip-danger {
  @include tooltip-variant($tooltip-danger-color, $tooltip-danger-bg);
}