.tooltip{cursor:pointer;position:relative;display:inline-block;padding:0 0 0 .3rem}.tooltip:before,.tooltip:after{--scale:0;--arrow-size:.5rem;--tooltip-color:hsla(191,0%,95%,.9);--tooltip-text-color:#222;position:absolute;top:-.25rem;left:50%;transform:translateX(-50%) translateY(var(--translate-y,0)) scale(var(--scale));transition:150ms transform;transform-origin:bottom center;white-space:normal;max-width:38%;min-width:10rem;overflow:visible}.tooltip:before{--translate-y:calc(-100% - var(--arrow-size));content:attr(data-tooltip);color:var(--tooltip-text-color);font-size:.8rem;line-height:1.4;padding:.4rem .6rem;background:var(--tooltip-color);border-radius:.3rem;text-align:center}.tooltip:hover:before,.tooltip:hover:after,.tooltip:focus-within:before,.tooltip:focus-within:after,.tooltip:active:before,.tooltip:active:after{--scale:1}.tooltip:after{--translate-y:calc(-1 * var(--arrow-size));content:'';border:var(--arrow-size) solid #fff0;border-top-color:var(--tooltip-color);transform-origin:top center}.tooltip-content{display:none}.tooltip:focus-within .tooltip-content{display:block}