:root {
  --tooltip-bg: var(--card-bg);
  --tooltip-border: var(--card-border);
  --tooltip-shadow: var(--card-shadow);
  --tooltip-anim-open-duration: var(--anim-duration-quick);
  --tooltip-anim-close-duration: var(--anim-duration-normal);
}

.ui-tooltip {
  z-index: 50;

  .ui-tooltip-arrow {
    margin-bottom: -1px;
    svg {
      fill: var(--tooltip-bg);
      stroke: var(--tooltip-border);
      stroke-width: 1.8px;
    }
    * {
      vector-effect: non-scaling-stroke;
    }
  }

  &-inner {
    padding: 4px 8px;
    max-width: min(calc(100vw - 16px), 380px);
    font-size: 0.8em;

    background: var(--tooltip-bg);
    border-radius: 4px;
    border: 1px solid var(--tooltip-border);
    box-shadow: 1px 4px 11px var(--tooltip-shadow);
    transform-origin: var(--kb-tooltip-content-transform-origin);
  }

  &[data-expanded] {
    animation: tooltip_show var(--tooltip-anim-open-duration) ease-out;
  }

  &[data-closed] {
    animation: tooltip_hide var(--tooltip-anim-close-duration) ease-in forwards;
  }
}

@keyframes tooltip_show {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes tooltip_hide {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-6px) scale(0.94);
  }
}
