[data-tooltip]{position:relative}[data-tooltip]:before,[data-tooltip]:after{--arrow-size:5px;--tooltip-color:var(--bg-surface,#1f2937);--tooltip-text-color:var(--text,white);--translate-y:0;--tooltip-offset:8px;visibility:hidden;opacity:0;transform:translateX(-50%)translateY(var(--translate-y))scale(.95);transition:all .3s}[data-tooltip]:hover:before,[data-tooltip]:hover:after{visibility:visible;opacity:1;transform:translateX(-50%)translateY(var(--translate-y))scale(1);transition-delay:.5s}[data-tooltip]:before{content:attr(data-tooltip);pointer-events:none;background-color:var(--tooltip-color);color:var(--tooltip-text-color);white-space:nowrap;z-index:10;text-align:center;border-radius:8px;width:max-content;max-width:200px;padding:8px 12px;font-size:.875rem;font-weight:500;position:absolute;box-shadow:0 2px 4px #0000001a}[data-tooltip]:after{content:"";border:var(--arrow-size)solid transparent;z-index:10;position:absolute}.tooltip-t:before{bottom:calc(100% + var(--tooltip-offset));--translate-y:calc(-1*var(--arrow-size) + 1px);transform-origin:bottom;left:50%}.tooltip-t:after{bottom:calc(100% + var(--tooltip-offset) - var(--arrow-size));border-top-color:var(--tooltip-color);transform-origin:top;left:50%}.tooltip-b:before{top:calc(100% + var(--tooltip-offset));--translate-y:calc(var(--arrow-size) - 1px);transform-origin:top;left:50%}.tooltip-b:after{top:calc(100% + var(--tooltip-offset) - var(--arrow-size));border-bottom-color:var(--tooltip-color);transform-origin:bottom;left:50%}