.tooltip {
  white-space: nowrap;
  font-size: @ui-size*1.15;

  &.in {
    opacity: 1;
    transition: opacity .12s ease-out;
  }

  .tooltip-inner {
    line-height: 1;
    padding: @ui-padding*.5 @ui-padding*.65;
    border-radius: @component-border-radius;
    background-color: @tooltip-background-color;
    color: @tooltip-text-color;
    white-space: nowrap;
    max-width: none;
  }

  .keystroke {
    font-size: max(1em, @ui-size*.85);
    padding: .1em .4em;
    margin: 0 @ui-padding*-.35 0 @ui-padding*.25;
    border-radius: max(2px, @component-border-radius / 2);
    color: @tooltip-text-key-color;
    background: @tooltip-background-key-color;
  }

  &.top .tooltip-arrow {
    border-top-color: @tooltip-background-color;
  }
  &.top-left .tooltip-arrow {
    border-top-color: @tooltip-background-color;
  }
  &.top-right .tooltip-arrow {
    border-top-color: @tooltip-background-color;
  }
  &.right .tooltip-arrow {
    border-right-color: @tooltip-background-color;
  }
  &.left .tooltip-arrow {
    border-left-color: @tooltip-background-color;
  }
  &.bottom .tooltip-arrow {
    border-bottom-color: @tooltip-background-color;
  }
  &.bottom-left .tooltip-arrow {
    border-bottom-color: @tooltip-background-color;
  }
  &.bottom-right .tooltip-arrow {
    border-bottom-color: @tooltip-background-color;
  }
}