&SidebarLayout{
    @apply h-full w-full;
}

&SidebarLayout &Sidebar{
    @apply w-full py-4 px-4 left-[-100%] z-[1000] border-0 fixed h-full box-border bg-white dark:bg-[#212121] block;
    @apply md:w-64 md:px-6 md:left-[auto] md:border-r md:border-[#c1c1c1] md:dark:border-[#515151];
    transition: left 0.5s;
}

&SidebarLayout &Sidebar&.show{
    @apply block left-[0];
}

&SidebarLayout .main-content, &SidebarLayout &Aside{
    @apply md:ml-64 min-h-full w-[100%] md:w-[calc(100%-16rem)] px-4 py-2;
}

&SidebarLayout &SidebarCompact{
    @apply py-2 px-0 flex justify-end md:hidden;
}
&SidebarLayout &Aside &SidebarCompact{
    @apply py-0 px-0;
}

&SidebarLayout &Sidebar &SidebarCompact{
    @apply pt-0 pb-0 px-0 flex md:hidden justify-end;
}

&SidebarLayout &Sidebar header{
    @apply px-0 pb-4 md:py-4 text-2xl font-bold;
}

&SidebarLayout &Sidebar hr{
    @apply border-[#a1a1a1] dark:border-[#515151] py-2;
}