:root{--media-max-width:34em}[tooltip]:hover .tool-tip{opacity:1;transition-delay:var(--tooltip-delay,.5s)}.tool-tip{background-color:var(--color-foreground);border-radius:var(--border-radius);color:var(--color-background);font-size:var(--tooltip-font-size,.75em);opacity:0;padding:var(--space-s) calc(var(--space)/3*2);pointer-events:none;white-space:nowrap;z-index:20;transition:all .2s ease-in-out;position:absolute;transform:scale(0)translate(-50%)translateY(50%)}.tool-tip--bottom{transform:scale(1) translateX(var(--context-tooltip-x,-50%)) translateY(var(--context-tooltip-y,50%));top:100%;left:50%}.tool-tip--bottom:before{border-top-right-radius:.25em;top:0;left:50%;transform:translateY(-50%)translate(-50%)rotate(-45deg)}.tool-tip--top{transform:scale(1) translateX(var(--context-tooltip-x,-50%)) translateY(var(--context-tooltip-y,0));bottom:100%;left:50%}.tool-tip--top:before{background-color:#00f;border-top-right-radius:.25em;bottom:0;left:50%;transform:translateY(50%)translate(-50%)rotate(135deg)}.tool-tip--right{transform:scale(1) translateX(var(--context-tooltip-x,10%)) translateY(var(--context-tooltip-y,-50%));top:50%;left:100%}.tool-tip--right:before{border-top-left-radius:.25em;top:50%;left:0;transform:translateY(-50%)translate(-50%)rotate(-45deg)}.tool-tip:before{background-color:inherit;content:"";width:.75em;height:.75em;display:block;position:absolute}.tool-tip__text{z-index:2;width:fit-content;display:block;position:relative}