//
// Tooltip
//

@tooltip-arrow-size: @base-value / 2;
@tooltip-background-color: @color-black;
@tooltip-border-radius: @panel-border-radius;
@tooltip-box-shadow: none;
@tooltip-font-size: @font-size-xs;
@tooltip-font-weight: 600;
@tooltip-font-style: normal;
@tooltip-padding-x: 6px;
@tooltip-padding-y: @pad-xs;
@tooltip-text-color: @color-white;
@tooltip-text-transform: none;
@tooltip-max-width: 15em;

.tox {
  .tox-tooltip {
    display: inline-block;
    max-width: @tooltip-max-width;
    padding: @tooltip-arrow-size;

    /*
     * The pointer-events: none is designed to make mouse events bleed through the tooltip
     * to the underlying items. For example, a mouse hovering over a tooltip that hovers over
     * another item should trigger the hover of the item obscured by the tooltip, even though
     * the tooltip is on top
     */
    pointer-events: none;
    position: relative;
    width: max-content;
    z-index: @z-index-menu;
  }

  .tox-tooltip__body {
    background-color: @tooltip-background-color;
    border-radius: @tooltip-border-radius;
    box-shadow: @tooltip-box-shadow;
    color: @tooltip-text-color;
    font-size: @tooltip-font-size;
    font-style: @tooltip-font-style;
    font-weight: @tooltip-font-weight;
    overflow-wrap: break-word;
    padding: @tooltip-padding-y @tooltip-padding-x;
    text-transform: @tooltip-text-transform;

    @media (forced-colors: active) {
      outline: outset 1px;
    }
  }

  .tox-tooltip__arrow {
    position: absolute;
  }

  .tox-tooltip--down .tox-tooltip__arrow {
    border-left: @tooltip-arrow-size solid transparent;
    border-right: @tooltip-arrow-size solid transparent;
    border-top: @tooltip-arrow-size solid @tooltip-background-color;
    bottom: 0;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
  }

  .tox-tooltip--up .tox-tooltip__arrow {
    border-bottom: @tooltip-arrow-size solid @tooltip-background-color;
    border-left: @tooltip-arrow-size solid transparent;
    border-right: @tooltip-arrow-size solid transparent;
    left: 50%;
    position: absolute;
    top: 0;
    transform: translateX(-50%);
  }

  .tox-tooltip--right .tox-tooltip__arrow {
    border-bottom: @tooltip-arrow-size solid transparent;
    border-left: @tooltip-arrow-size solid @tooltip-background-color;
    border-top: @tooltip-arrow-size solid transparent;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .tox-tooltip--left .tox-tooltip__arrow {
    border-bottom: @tooltip-arrow-size solid transparent;
    border-right: @tooltip-arrow-size solid @tooltip-background-color;
    border-top: @tooltip-arrow-size solid transparent;
    left: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
}
