.tooltip{ position:relative; display:inline-block; cursor:help; }
.tooltip-text{
  position:absolute; bottom:120%; left:50%; transform:translateX(-50%) translateY(4px);
  background:var(--card); color:var(--text); font-size:.8rem; font-weight:400;
  padding:4px 8px; border:1px solid var(--border); border-radius:6px; white-space:normal;
  width: max-content;
  max-width: calc(2 * max(calc(min(var(--mid), calc(100vw - var(--mid))) - 2.5vw), 2.5vw));
  box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:3000;
}
.tooltip:hover .tooltip-text, .tooltip:focus-within .tooltip-text{
  opacity:1; transform:translateX(-50%) translateY(0);
}
.tooltip-text::after{
  content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:var(--border);
}
.tooltip-text::before{
  content:""; position:absolute; top:calc(100% - 1px); left:50%; transform:translateX(-50%);
  border:5px solid transparent; border-top-color:var(--card);
}

@media (max-width: 768px){
  .tooltip[style*="--tooltip-pos:bottom"] .tooltip-text,
  .tooltip[style*="--tooltip-pos: bottom"] .tooltip-text {
    top: 120%;
    bottom: auto;
  }

  .tooltip[style*="--tooltip-pos:bottom"] .tooltip-text::after
  .tooltip[style*="--tooltip-pos: bottom"] .tooltip-text::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: var(--border);
  }

  .tooltip[style*="--tooltip-pos:bottom"] .tooltip-text::before
  .tooltip[style*="--tooltip-pos: bottom"] .tooltip-text::before {
    top: auto;
    bottom: calc(100% - 1px);
    border-top-color: transparent;
    border-bottom-color: var(--card);
  }
}