:root {
    --tooltip-delay-in: 2s;
    --tooltip-fade-in: .15s;
    --tooltip-curve-in: linear;
    --tooltip-delay-out: .3s;
    --tooltip-fade-out: .3s;
    --tooltip-curve-out: ease-out;
}

.has-campaign-tooltip:hover > .campaign-tooltip,
.has-campaign-tooltip:hover > * > .campaign-tooltip {
    opacity: 1;
    transition: opacity var(--tooltip-fade-in) var(--tooltip-curve-in) var(--tooltip-delay-in);
    animation: enable-pointer-events var(--tooltip-delay-in) linear forwards;
}

@keyframes enable-pointer-events {
    0% { pointer-events: none; }
    99% { pointer-events: none; }
    100% { pointer-events: auto; }
}

.campaign-tooltip {
    position: absolute;
    left: 2rem;
    top: calc(100% - .5rem);

    min-width: max-content;
    line-height: 1.8em;
    z-index: 1;

    pointer-events: none;
    opacity: 0;

    transition: opacity var(--tooltip-fade-out) var(--tooltip-curve-out) var(--tooltip-delay-out);
}

.campaign-tooltip > ol,
.campaign-tooltip > ul {
    margin: 0;
    padding: 0;
}

.campaign-tooltip > ol li,
.campaign-tooltip > ul li {
    margin-left: 1rem;
}

ol.campaign-tooltip-custom-list,
ul.campaign-tooltip-custom-list {
    list-style: none;
    padding-left: 0;
}

ol.campaign-tooltip-custom-list li,
ul.campaign-tooltip-custom-list li {
    margin-left: 0;
}

ol.campaign-tooltip-custom-list li:before,
ul.campaign-tooltip-custom-list li:before {
    content: '\f111';
    font-family: FontAwesome;
    font-size: .6rem;
    display: inline-block;
    padding-right: .8rem;
}