.modal_container {
    position: relative;
    --modal-top: calc(100% + var(--arrow-width) + 10px);
    --modal-right: -10px;
    --arrow-width: 10px;
}

.modal_container:hover::before {
    content: "";
    position: absolute;
    width: calc(100% + 40px);
    height: calc(var(--modal-top) - 100%);
    top: 100%;
    left: -20px;
}

.modal {
    position: absolute;
    background-color: var(--color-mono-1);
    z-index: 1;
    top: calc(var(--modal-top) + 20px);
    right: var(--modal-right);
    border: solid 1px var(--color-mono-2);
    box-shadow: var(--shadow);
    opacity: 0;
    transition: 300ms;
    pointer-events: none;
}

.modal_container:hover .modal{
    opacity: 1;
    top: var(--modal-top);
    pointer-events: auto;
}

.modal::before, .modal::after{
    content: "";
    position: absolute;
    right: calc(0px - var(--modal-right));
    border-right: solid transparent var(--arrow-width);
    border-left: solid transparent var(--arrow-width);
    pointer-events: none;
}

.modal::before {
    bottom: 100%;
    border-bottom: solid 10px var(--color-mono-2);
}

.modal::after {
    bottom: calc(100% - 1px);
    border-bottom: solid 10px var(--color-mono-1);
}