.toggletip{--background-color:var(--surface-tertiary);--width:20rem;--triangle-size:0.75rem;--triangle-spacing:0.5rem;--border-size:0.0625rem;--border-color:var(--surface-tertiary);display:inline-flex;position:relative}.toggletip:after{background-color:var(--background-color);border:var(--border-size) solid var(--border-color);content:"";height:var(--triangle-size);margin:auto;opacity:0;position:absolute;transform:rotate(45deg);transition:opacity .2s ease-in-out;width:var(--triangle-size);z-index:3}.toggletip:has(.is-visible):after{opacity:1}.toggletip[tip-position=top]:after{border-width:0 var(--border-size) var(--border-size) 0;left:0;right:0;top:calc(var(--triangle-size)/-2 - var(--triangle-spacing))}.toggletip[tip-position=bottom]:after{border-width:var(--border-size) 0 0 var(--border-size);bottom:calc(var(--triangle-size)/-2 - var(--triangle-spacing));left:0;right:0}.toggletip[tip-position=right]:after{border-width:0 0 var(--border-size) var(--border-size);right:calc(var(--triangle-size)/-2 - var(--triangle-spacing));top:calc(50% - var(--triangle-size)/2)}.toggletip[tip-position=left]:after{border-width:var(--border-size) var(--border-size) 0 0;left:calc(var(--triangle-size)/-2 - var(--triangle-spacing));top:calc(50% - var(--triangle-size)/2)}.toggletip__close{position:absolute;right:0;top:0}.toggletip__content{--x:-50%;--y:0.25rem;background-color:var(--background-color);border:var(--border-size) solid var(--border-color);border-radius:.25rem;box-shadow:0 .25rem .5rem rgba(0,0,0,.1);color:#010c06;display:none;font-size:.875rem!important;inline-size:var(--width);inset-block-end:calc(100% + var(--triangle-size));inset-inline-start:50%;margin-inline:var(--margin-inline,0);max-inline-size:min(var(--width),100vw - 3rem);opacity:0;padding:1rem;position:absolute;transform:translateX(var(--x,0)) translateY(var(--y,0));transition:opacity .2s ease-in-out;z-index:3}.toggletip__content .rte{font-size:.875rem}.toggletip__content.is-active{display:block}.toggletip__content.is-visible{opacity:1}[tip-position=bottom] .toggletip__content{--x:-50%;--y:-0.25rem;inset:calc(100% + var(--triangle-size)) 0 auto 50%}[tip-position=right] .toggletip__content{--x:-0.25rem;--y:50%;inset:auto auto 50% calc(100% + var(--triangle-size))}[tip-position=left] .toggletip__content{--x:0.25rem;--y:50%;inset:auto calc(100% + var(--triangle-size)) 50% auto}