// 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="tooltip-arrow"></div>
//   <div class="tooltip-inner"></div>
// </div>
//
// ========================================================================

// Variables
// ========================================================================

$tooltip-arrow-width:                  8px !default;

$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-inner {
  padding: 6px 12px;
}

// 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);
}