@use "@/src/assets/scss/variables" as *;
@use "@/src/assets/scss/partial" as *;

.PopupWrapper{
    background-color: #0d0d0d80;
    backdrop-filter: blur(7px);
   .PopupContentWrap{
    --r: 25px; /* the radius */
    --s: 37px; /* size of inner curve */
    --x: 5px; /* horizontal offset (no percentage) */
    --y: 5px; /* vertical offset (no percentage) */
    background-color: $whiteColor;
    border-radius: var(--r);
    --_m:/calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%,#0000 72%);
    --_g:conic-gradient(at calc(100% - var(--r)) var(--r),#0000 25%,#000 0);
    --_d:(var(--s) + var(--r));
    mask:
        calc(100% - var(--_d) - var(--x)) 0 var(--_m),
        100% calc(var(--_d) + var(--y)) var(--_m),
        radial-gradient(var(--s) at 100% 0,#0000 99%,#000 calc(100% + 1px)) 
        calc(-1*var(--r) - var(--x)) calc(var(--r) + var(--y)),
        var(--_g) calc(-1*var(--_d) - var(--x)) 0,
        var(--_g) 0 calc(var(--_d) + var(--y));
    mask-repeat: no-repeat;
    @media (min-width: $xl) {
        --r: 30px;
        --s: 34px;
        --x: 4px;
        --y: 4px;
    }
   }
}