//
// 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: min(80%, 15em);

.tox {
  .tox-tooltip {
    display: inline-block;
    max-width: @tooltip-max-width;
    padding: @tooltip-arrow-size 0 0 0;
    position: relative;
    width: max-content;
    z-index: @z-index-menu;

    &.tox-tooltip--anchor {
      display: none;
      padding: var(--tox-private-pad-xs, @pad-xs) 0 0;
      position: fixed;
      position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
      height: fit-content;

      &.tox-tooltip--up {
        position-area: block-end;
      }

      &.tox-tooltip--down {
        position-area: block-start;
      }

      &.tox-tooltip--left {
        position-area: inline-start;
      }

      &.tox-tooltip--right {
        position-area: inline-end;
      }
    }
  }

  .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%);
  }
}