/* ==========================================
   GLOBAL DYNAMIC TOOLTIP
   ========================================== */

.global-tooltip{

    position:fixed;
    z-index:9999999;

    max-width:min(
        260px,
        calc(100vw - 24px)
    );

    padding:7px 10px;

    border-radius:8px;

    background:var(--card);
    color:var(--text);

    border:1px solid var(--border);

    box-shadow:
        0 10px 30px rgba(0,0,0,.18);

    font-size:12px;
    font-weight:500;

    line-height:1.3;

    white-space:normal;
    text-align:center;

    pointer-events:none;

    opacity:0;
    transform:translateY(4px);

    transition:
        opacity .15s ease,
        transform .15s ease;

    visibility:hidden;
}


/* Visible */

.global-tooltip.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}


/* ==========================================
   TOOLTIP ARROW
   ========================================== */

.global-tooltip::before{

    content:"";

    position:absolute;

    width:7px;

    height:7px;

    background:var(--card);
    border-color:var(--border);

    border:1px solid var(--border);

    transform:rotate(45deg);

}


/* Tooltip ABOVE target */

.global-tooltip.tooltip-top::before{

    left:50%;

    bottom:-4px;

    border-left:0;
    border-top:0;

    transform:
        translateX(-50%)
        rotate(45deg);

}


/* Tooltip BELOW target */

.global-tooltip.tooltip-bottom::before{

    left:50%;

    top:-4px;

    border-right:0;
    border-bottom:0;

    transform:
        translateX(-50%)
        rotate(45deg);

}


/* Tooltip LEFT of target */

.global-tooltip.tooltip-left::before{

    right:-4px;

    top:50%;

    border-left:0;
    border-bottom:0;

    transform:
        translateY(-50%)
        rotate(45deg);

}


/* Tooltip RIGHT of target */

.global-tooltip.tooltip-right::before{

    left:-4px;

    top:50%;

    border-right:0;
    border-top:0;

    transform:
        translateY(-50%)
        rotate(45deg);

}