.tooltip{--border-color:#d6180b;--background-color:#fff;--color:#262626;--arrow-size:.8rem;--border-size:.1rem;border-radius:1rem;position:absolute;top:0;left:50%;transform:translate(-50%,-100%) translateY(calc(var(--arrow-size)*-1));display:flex;padding:1.5rem;font-size:1.4rem;text-align:center;color:var(--color);border:var(--border-size) solid var(--border-color);min-width:24rem;width:100%;background:var(--background-color);z-index:1}.tooltip--dark{--border-color:#262626;--background-color:#262626;--color:#fff}.tooltip:after,.tooltip:before{content:"";position:absolute;bottom:var(--border-size);left:50%;width:0;height:0;border-left:var(--arrow-size) solid transparent;border-right:var(--arrow-size) solid transparent}.tooltip:before{transform:translate(-50%,100%) translateY(var(--border-size));border-top:var(--arrow-size) solid var(--border-color)}.tooltip:after{transform:translate(-50%,100%);border-top:var(--arrow-size) solid var(--background-color)}.tooltip--bottom{transform:translate(-50%,100%) translateY(var(--arrow-size));top:unset;bottom:0}.tooltip--bottom:before{top:0;bottom:unset;transform:translate(-50%,-100%) translateY(calc(var(--border-size)*-1)) rotate(180deg)}.tooltip--bottom:after{top:0;bottom:unset;transform:translate(-50%,-100%) rotate(180deg)}.tooltip--hidden{display:none}
