.terminalTipTarget{
    position:relative;
}

.terminalTipTarget::after{
    content:attr(data-title);
    position:absolute;
    left:50%;
    top:calc(100% + 9px);
    transform:translateX(-50%) translateY(-4px);
    min-width:max-content;
    max-width:240px;
    padding:7px 10px;
    background:var(--ppi-panel);    
    border:1px solid #ddd;
    border-radius:6px;
    font-size:12px;
    font-weight:400;
    line-height:1.25;
    text-align:left;
    color: var(--ppi-text);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    box-shadow:0 6px 18px rgba(0,0,0,.18);
    z-index:9999;
    transition:
      opacity .18s ease .6s,
      visibility 0s linear .6s,
      transform .18s ease .6s;
}

.terminalTipTarget::before{
    content:'';

    position:absolute;
    left:50%;
    top:calc(100% + 4px);

    transform:translateX(-50%) translateY(-4px);

    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-bottom:5px solid --ppi-bg;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    z-index:9999;

    transition:
      opacity .18s ease .6s,
      visibility 0s linear .6s,
      transform .18s ease .6s;
}

.terminalTipTarget:hover::after,
.terminalTipTarget:hover::before{
    opacity:1;
    visibility:visible;
    transform:translateX(-50%) translateY(0);
}

.terminalTipTarget:not(:hover)::after,
.terminalTipTarget:not(:hover)::before{
    transition-delay:0s;
}

body.dark-theme .terminalTipTarget::after{
    background:var(--ppi-bg);
    color: var(--ppi-white);
    border-color:var(--ppi-border);
}

.terminalTipEdge::after{
    left:auto !important;
    right:0 !important;
    transform:translateY(-4px) !important;
}