/* ---------------------------------------------- */

.popup-container {
    position: relative;
}

.popup {
    position         : absolute;
    top              : -20px;
    right            : 10px;

    z-index          : 10;

    color            : black;
    background-color : var(--popup-color);

    font-size        : 0.8rem;
    text-align       : left;

    display          : none;

    border-radius    : 20px;

    box-shadow       : 0px 0px 10px 3px #0000003F;

    isolation:isolate;
}

.popup:before {

    content          : "";

    position         : absolute;
    top              : 20px;
    left             : -10px;

    font-size        : 5rem;
    background-color : var(--popup-color);

    height           : 30px;
    width            : 30px;

    transform        : rotate(-45deg);

    z-index : -1;
}

.popup p {
    max-width        : 28ch;
    padding          : 0.1rem 1rem;
}

.pop:hover + .popup {
    display          : block;
}