.hoverwrapper{position:relative;max-width:-moz-max-content;max-width:max-content;--hoverwrapper-background-color:#fff;--hoverwrapper-arrow-size:10px;--hoverwrapper-gap:20px;--hoverwrapper-max-bubble-content-width:300px;--hoverwrapper-initial-arrow-position:50%}
.hoverwrapper__content>*{margin:0}
.hoverwrapper__hoverContent{background:var(--hoverwrapper-background-color);border-radius:12px;padding:20px;inline-size:-moz-max-content;inline-size:max-content;max-inline-size:var(--hoverwrapper-max-bubble-content-width);filter:drop-shadow(0 0 15px rgba(0,0,0,0.15));z-index:10;position:absolute;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,transform .3s ease;--arrow-left:var(--hoverwrapper-initial-arrow-position);--arrow-top:var(--hoverwrapper-initial-arrow-position)}
.hoverwrapper__hoverContent::after{content:"";position:absolute;inline-size:0;block-size:0;border:var(--hoverwrapper-arrow-size) solid rgba(0,0,0,0)}
.hoverwrapper:hover .hoverwrapper__hoverContent{opacity:1;visibility:visible;pointer-events:auto}
.hoverwrapper__hoverContent[data-position=top]{bottom:100%;left:50%;transform:translateX(-50%) translateY(calc(-1 * var(--hoverwrapper-gap)))}
.hoverwrapper__hoverContent[data-position=top]::after{top:100%;left:var(--arrow-left);transform:translateX(-50%);border-top-color:var(--hoverwrapper-background-color)}
.hoverwrapper__hoverContent[data-position=bottom]{top:100%;left:50%;transform:translateX(-50%) translateY(var(--hoverwrapper-gap))}
.hoverwrapper__hoverContent[data-position=bottom]::after{bottom:100%;left:var(--arrow-left);transform:translateX(-50%);border-bottom-color:var(--hoverwrapper-background-color)}
.hoverwrapper__hoverContent[data-position=left]{right:100%;top:50%;transform:translateY(-50%) translateX(calc(-1 * var(--hoverwrapper-gap)))}
.hoverwrapper__hoverContent[data-position=left]::after{left:100%;top:var(--arrow-top);transform:translateY(-50%);border-left-color:var(--hoverwrapper-background-color)}
.hoverwrapper__hoverContent[data-position=right]{left:100%;top:50%;transform:translateY(-50%) translateX(var(--hoverwrapper-gap))}
.hoverwrapper__hoverContent[data-position=right]::after{right:100%;top:var(--arrow-top);transform:translateY(-50%);border-right-color:var(--hoverwrapper-background-color)}