*[data-bs-toggle="tooltip"] {
    display: inline-block;
}

.Tooltip {
    --Tooltip-max-width: 460px;
    --Tooltip-padding-x: 0.5rem;
    --Tooltip-padding-y: 0.5rem;
    --Tooltip-font-size: 1rem;
    --Tooltip-color: var(--abc-font-color);
    --Tooltip-bg: var(--abc-off-white);
    --Tooltip-border-radius: var(--bs-border-radius-lg);
    --Tooltip-arrow-width: 1rem;
    --Tooltip-arrow-height: 0.6rem;

    position: relative;
    cursor: help;

    &::before,
    &::after {
        position: absolute;
        display: block;
        z-index: 1200;
        left: 50%;
        opacity: 0;
        visibility: hidden;
        transform: translateX(-50%);
        transition: opacity 300ms, visibility 300ms 0ms;
    }

    &::before {
        content: '';
        bottom: calc(100% + 1px);
        width: 0;
        height: 0;
        border-left: calc(var(--Tooltip-arrow-width) / 2) solid transparent;
        border-right: calc(var(--Tooltip-arrow-width) / 2) solid transparent;
        border-top: var(--Tooltip-arrow-height) solid var(--Tooltip-bg);
    }

    &::after {
        content: attr(data-tooltip-text);
        bottom: calc(100% + var(--Tooltip-arrow-height));
        width: 90vw;
        max-width: var(--Tooltip-max-width);
        padding: var(--Tooltip-padding-y) var(--Tooltip-padding-x);
        border-radius: var(--Tooltip-border-radius);
        background-color: var(--Tooltip-bg);
        color: var(--Tooltip-color);
    }
}

.Tooltip:hover::before,
.Tooltip:hover::after {
    opacity: 1;
    visibility: visible;
    transition: opacity 300ms, visibility 0ms 0ms;
}