// Tooltip
// --------------------------------------------------

.tooltip {
  font-size: ceil(@component-font-size-base * 0.933); // ~14px
  line-height: 1.286; // 18px
  
  &.in {
    opacity: 1;
  }
  &.top {
    padding-bottom: 9px;
    
    .tooltip-arrow {
      border-top-color: @brand-primary;
      border-width: 9px 9px 0;
      bottom: 0;
      margin-left: -9px;
    }
  }
  &.right {
    .tooltip-arrow {
      border-right-color: @brand-primary;
      border-width: 9px 9px 9px 0;
      margin-top: -9px;
      left: -3px;
    }
  }
  &.bottom {
    padding-top: 8px;
    
    .tooltip-arrow {
      border-bottom-color: @brand-primary;
      border-width: 0 9px 9px;
      margin-left: -9px;
      top: -1px;
    }
  }
  &.left {
    .tooltip-arrow {
      border-left-color: @brand-primary;
      border-width: 9px 0 9px 9px;
      margin-top: -9px;
      right: -3px;
    }
  }
}

.tooltip-inner {
  background-color: @brand-primary;
  line-height: 1.286; // 18px
  padding: 12px 12px;
  text-align: center;
  width: 183px;
  border-radius: @border-radius-large;
}

// Alternate Color
// --------------------------------------------------

// Light color skin
.tooltip-light {
  &.bottom .tooltip-arrow {
    border-bottom-color: mix(@brand-primary, white, 9%);
  }
  &.left .tooltip-arrow {
    border-left-color: mix(@brand-primary, white, 9%);
  }
  &.right .tooltip-arrow {
    border-right-color: mix(@brand-primary, white, 9%);
  }
  &.top .tooltip-arrow {
    border-top-color: mix(@brand-primary, white, 9%);
  }
  .tooltip-inner {
    background-color: mix(@brand-primary, white, 9%);
    color: @brand-primary;
  }
}