/* ============================================================
   Tooltip channel (SmartWrite.notifier.tooltip)
   ============================================================ */

.ui-tooltip {
  --tooltip-caret-size: 7px;

  position: fixed;
  z-index: 450;
  left: 0;
  top: 0;
  max-width: min(280px, calc(100vw - 16px));
  padding: 8px 12px;
  background: var(--raised-bg);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--font-size-md);
  line-height: 1.35;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition:
    opacity 0.16s ease,
    transform 0.16s ease,
    visibility 0.16s ease;
}

.ui-tooltip.is-measuring {
  opacity: 0;
  visibility: hidden;
  transition: none;
}

.ui-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.ui-tooltip--above.is-visible {
  transform: translateY(0);
}

.ui-tooltip--below.is-visible {
  transform: translateY(0);
}

.ui-tooltip-content p {
  margin: 0;
}

.ui-tooltip-caret {
  position: absolute;
  width: calc(var(--tooltip-caret-size) * 2);
  height: calc(var(--tooltip-caret-size) * 2);
  background: var(--raised-bg);
  border: 1px solid var(--hairline-strong);
  transform: translateX(-50%) rotate(45deg);
  pointer-events: none;
}

.ui-tooltip--above .ui-tooltip-caret {
  bottom: calc(var(--tooltip-caret-size) * -1);
  border-top: none;
  border-left: none;
}

.ui-tooltip--below .ui-tooltip-caret {
  top: calc(var(--tooltip-caret-size) * -1);
  border-bottom: none;
  border-right: none;
}

.ui-tooltip--end .ui-tooltip-caret {
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  border-top: none;
  border-right: none;
}