.__popup-trigger {
    display: inline-flex;
}

.__popup-view {
    z-index: 20000;
    position: fixed;
    left: -500px;
    top: -500px;
    transition: opacity 0.3s;
    float: right; 
}
/*.__popup-arrow {
    z-index: 20000;
    position: fixed;
    top: 0;
    left: 0;

    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #000000;

    transition: opacity 0.3s;
}*/
.__popup-arrow {
    z-index: 20000;
    position: fixed;
    top: 0;
    left: 0;
    transition: opacity 0.3s;
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    width: 10px;
    height: 8px;
    &.up

{
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    width: 10px;
    height: 8px;
}

&.down {
    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
    width: 10px;
    height: 8px;
}

&.left {
    clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
    width: 8px;
    height: 10px;
}

&.right {
    clip-path: polygon(0% 0%, 0% 100%, 100% 50%);
    width: 8px;
    height: 10px;
}

}

.__popup-hidden {
    display: none !important;
}