// Tooltips
.tooltip {
  position: relative;
  line-height: 1;
  &-content {
    border: 1px solid;
    border-radius: $border-radius;
    @include useTheme('border-color', 'border-color', 'tooltips');
    @include useTheme('background', 'background-color', 'tooltips');
    @include useTheme('color', 'text-color');
    display: block;
    font-size: $font-size-sm;
    left: 50%;
    max-width: $control-width-sm;
    padding: $unit-1 $unit-2;
    pointer-events: none;
    position: absolute;
    transform: translate(-50%, calc(-100% - 5px));
    transition: opacity .2s, transform .2s;
    z-index: $zindex-3;
  }
  .tooltip-content {
    opacity: 1;
  }
  &[disabled],
  &.disabled {
    pointer-events: auto;
  }
}