.tool-tip{z-index:20;color:#fff;pointer-events:none;-webkit-user-select:none;user-select:none;background-color:#045042;border-radius:.375rem;inline-size:max-content;padding:.25rem .5rem;font-size:.875rem;line-height:18px;transition:scale .2s,opacity .2s,transform 200s;position:absolute;scale:0}.tool-tip:before{content:attr(data-tooltip);clip:rect(1px,1px,1px,1px);clip-path:inset(50%);background-color:inherit;width:1px;height:1px;color:inherit;margin:-1px;padding:0;position:absolute;overflow:hidden}.tool-tip[bottom]{top:calc(100% + .5rem);left:50%;translate:-50%}.tool-tip[top]{bottom:calc(100% + .5rem);left:50%;translate:-50%}.tool-tip[right]{top:50%;left:calc(100% + .5rem);translate:0 -50%}.tool-tip[left]{top:50%;right:calc(100% + .5rem);translate:0 -50%}.tool-tip[top-left]{bottom:calc(100% + .5rem);right:0}.tool-tip[top-right]{bottom:calc(100% + .5rem);left:0}.tool-tip[bottom-left]{top:calc(100% + .5rem);right:0}.tool-tip[bottom-right]{top:calc(100% + .5rem);left:0}:has(>.tool-tip){position:relative}:has(>.tool-tip):is(:hover,:focus-visible,:active){z-index:20}:has(>.tool-tip):is(:hover,:focus-visible,:active)>.tool-tip{opacity:1;transition-delay:.1s;scale:1}