:root { --tooltip-arrow: 10px; }
.tooltip, .tooltip-top { position: absolute; z-index: 2000000000; background: #000a; backdrop-filter: blur(5px); border-radius:4px; padding: 0.5rem 1rem ; font-size: 16px; font-weight: bold; color: var(--aruka-orange,#ffc64a); white-space: nowrap; }
/* down arrow - bottom center */
.tooltip-arrow-bottom { width: 0; height: 0; border-left: var(--tooltip-arrow, 10px) solid transparent; border-right: var(--tooltip-arrow, 10px) solid transparent; border-top: var(--tooltip-arrow, 10px) solid #000a; position:absolute; bottom:calc(-1 * var(--tooltip-arrow, 10px)); left:50%; transform: translateX(-50%); }
.tooltip-arrow-top { width: 0; height: 0; border-left: var(--tooltip-arrow, 10px) solid transparent; border-right: var(--tooltip-arrow, 10px) solid transparent; border-bottom: var(--tooltip-arrow, 10px) solid #000a; position:absolute; top:calc(-1 * var(--tooltip-arrow, 10px)); left:50%; transform: translateX(-50%); }