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

    position: fixed;
    top: 0;
    left: 0;
    block-size: 100%;
    z-index: 4;
    background: var(--_color-white);
    padding-block: 24px;
    inline-size: var(--_aside-menu-inline-size);
    block-size: 100%;
    padding-inline: 24px;
    padding-block: 24px;
    transform: translate(-100%);
    transition: all .3s ease;
    display: flex;
    flex-flow: column wrap;
    gap: 24px;

    &[direction="rtl"]{
        left: unset;
        right: 0;
        transform: translate(100%);
    }

    &[open]{
        transform: translate(0);
    }

    > header{
        inline-size: 100%;
        display: flex;
        flex-flow: column wrap;
        gap: 8px;

        > p{
            font-size: var(--_font-size-sm);
        }

        > header{
            display: flex;
            flex-flow: row wrap;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
        }
    }

    > header:has(> header){
        gap: 24px;
    }

    > .aside-menu__content{
        inline-size: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        flex: 1;
        display: flex;
        flex-flow: column nowrap;

        > :is(a, button, details){
            font-family: var(--_font-family-medium);
            padding-block: 12px;
            justify-content: space-between;

            &[open]{
                > summary{
                    > img{
                        rotate: 180deg;
                    }
                }
            }

            > summary{
                cursor: pointer;
                inline-size: 100%;
                display: flex;
                flex-flow: row wrap;
                justify-content: space-between;
            }

            > summary::-webkit-details-marker {
                display: none;
            }

            > form{
                padding-block: 16px 0;

                label{
                    font-family: var(--_font-family-medium);
                }

                [type="submit"]{
                    /* inline-size: 100%; */
                    flex: 1;
                }
            }
        }

        > hr{
            border: 1px solid var(--_color-gray-2);
            margin-block: 6px;

            &:last-of-type{
                opacity: 0;
            }
        }
    }
}

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