.aside-menu-overlay{
    --_aside-menu-inline-size: 280px;

    position: fixed;
    top: 0;
    left: var(--_aside-menu-inline-size);
    inline-size: calc(100% - var(--_aside-menu-inline-size));
    block-size: 100%;
    background: var(--_color-black-transparent);
    opacity: 0;
    visibility: hidden;
    transition: all .3s ease;
    z-index: 4;
}

body{
    &:has(.aside-menu[open]){
        > .aside-menu-overlay {
            opacity: 1;
            visibility: visible;
            transition: all .3s ease .3s;
        }
    }

    &:has(.aside-menu[open][direction="rtl"]){
        > .aside-menu-overlay {
            opacity: 1;
            visibility: visible;
            transition: all .3s ease .3s;
            left: unset;
            right: var(--_aside-menu-inline-size);
        }
    }
}

@media (min-width: 768px){
    .aside-menu-overlay{
        --_aside-menu-inline-size: 340px;
    }
}