// Base class
.tooltip {
  @include reset-text();
  font-size: $font-size-sm;
}

// Wrapper for the tooltip content
.tooltip-inner {
  max-width: $tooltip-max-width;
  padding: 3px 8px;
  color: $tooltip-color;
  text-align: center;
  background-color: $blue-100;
  @include border-radius($border-radius);
  &.tooltip-top,
  &.bs-tether-element-attached-bottom {
    .tooltip-arrow {
      border-top-color: $tooltip-arrow-color;
    }
  }
  &.tooltip-right,
  &.bs-tether-element-attached-left {
    .tooltip-arrow {
      border-right-color: $tooltip-arrow-color;
    }
  }
  &.tooltip-bottom,
  &.bs-tether-element-attached-top {
    .tooltip-arrow {
      border-bottom-color: $tooltip-arrow-color;
    }
  }
  &.tooltip-left,
  &.bs-tether-element-attached-right {
    .tooltip-arrow {
      border-left-color: $tooltip-arrow-color;
    }
  }
}
.tooltip-inner {
  max-width: $tooltip-max-width;
  padding: 3px 8px;
  color: $tooltip-color;
  background-color: $tooltip-bg;
  @include border-radius($border-radius);
}