/* tooltip.css */
@layer cm.components {
  .cm-tooltip {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: var(--z-tooltip, 1200);
    max-inline-size: 260px;
    padding-block: 6px;
    padding-inline: 10px;
    border-radius: var(--radius-md, 10px);
    background: var(--text, #1e293b);
    color: var(--surface, #ffffff);
    font-size: 12.5px;
    line-height: 1.45;
    text-align: start;
    box-shadow: var(--shadow-md);
    pointer-events: none;
    overflow-wrap: anywhere;
    will-change: opacity;
  }

  .cm-tooltip[hidden] { display: none; }

  .cm-tooltip-body { position: relative; z-index: 1; }

  .cm-tooltip-arrow {
    position: absolute;
    inline-size: 8px;
    block-size: 8px;
    background: inherit;
    transform: rotate(45deg);
    border-radius: 2px;
  }

  .cm-tooltip[data-placement="top"] .cm-tooltip-arrow {
    inset-block-end: -3px;
    inset-inline-start: calc(50% - 4px);
  }
  .cm-tooltip[data-placement="bottom"] .cm-tooltip-arrow {
    inset-block-start: -3px;
    inset-inline-start: calc(50% - 4px);
  }
  .cm-tooltip[data-placement="start"] .cm-tooltip-arrow {
    inset-inline-end: -3px;
    inset-block-start: calc(50% - 4px);
  }
  .cm-tooltip[data-placement="end"] .cm-tooltip-arrow {
    inset-inline-start: -3px;
    inset-block-start: calc(50% - 4px);
  }
}