:root{--tooltip-distance:10px}.tooltip{position:relative;display:inline-block}.tooltip .tooltiptext{visibility:hidden;width:auto;background-color:var(--background-six);color:var(--text-color);text-align:center;border-radius:6px;padding:5px 10px;position:absolute;z-index:1;bottom:calc(100% + var(--tooltip-distance));left:50%;transform:translateX(-50%);opacity:0;transition:opacity .3s,visibility .3s;white-space:nowrap;font-size:12px}.tooltip:hover .tooltiptext{visibility:visible;opacity:1}.tooltip .tooltiptext::after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:var(--background-six) transparent transparent transparent}.tooltip-top .tooltiptext{bottom:calc(100% + var(--tooltip-distance))}.tooltip-bottom .tooltiptext{top:calc(100% + var(--tooltip-distance));bottom:auto}.tooltip-left .tooltiptext{right:calc(100% + var(--tooltip-distance));left:auto;top:50%;bottom:auto;transform:translateY(-50%)}.tooltip-right .tooltiptext{left:calc(100% + var(--tooltip-distance));right:auto;top:50%;bottom:auto;transform:translateY(-50%)}.tooltip-top .tooltiptext::after{top:100%;bottom:auto}.tooltip-bottom .tooltiptext::after{bottom:100%;top:auto;border-color:transparent transparent var(--background-six) transparent}.tooltip-left .tooltiptext::after{left:100%;right:auto;top:50%;margin-top:-5px;margin-left:0;border-color:transparent transparent transparent var(--background-six)}.tooltip-right .tooltiptext::after{right:100%;left:auto;top:50%;margin-top:-5px;margin-right:0;border-color:transparent var(--background-six) transparent transparent}