.tooltip{position:relative;top:-.125em}.tooltip-trigger{--padding:0.5em;cursor:default;padding:var(--padding);translate:calc(-1 * var(--padding)) calc(-1 * var(--padding));border-radius:100vmax;&:focus+[role=tooltip]{opacity:1;visibility:visible;scale:1}&:active{background-color:hsla(0,0%,50%,.2)}}[role=tooltip]{opacity:0;visibility:hidden;scale:.7;transition:all .3s;position:absolute;left:0;translate:-50%;z-index:9999;&[data-position=below]{top:100%;bottom:auto;transform-origin:top}&[data-position=above]{top:auto;bottom:100%;transform-origin:bottom}}@media (any-hover:hover){[role=tooltip]{transition-delay:.35s}.tooltip-trigger:hover{color:#5b5b5b}.tooltip:hover [role=tooltip]{opacity:1;visibility:visible;scale:1}}@media (any-hover:none){.tooltip-open{opacity:1;visibility:visible;scale:1}}