.aw-layout-menu {
    @apply bg-surface;

    display: grid;
    grid-template-columns: 5rem auto;
    grid-template-rows: 78px minmax(0, 2fr) minmax(0, 1fr) 60px minmax(0, auto);

    padding-top: max(0px, calc(env(safe-area-inset-top) - 16px));

    z-index: 21;

    &__logo,
    &__aw-user-menu {
        display: flex;
        justify-content: center;
        width: 100%;
        padding: 0.25rem 0.75rem 0.75rem;
        margin: auto 0;
    }

    &__logo {
        padding: 0 0.75rem 0;
    }

    &__menu,
    &__secondary-menu {
        --icon-color: var(--c-on-surface);
        --icon-color-active: var(--c-accent);
        display: flex;
        flex-direction: column;
        min-height: 0;
        max-height: 100%;

        overflow-y: auto;
        overflow-y: overlay;
        /* scrollbar-gutter: stable both-edges; */
        overscroll-behavior: contain;

        scrollbar-width: thin;
        scrollbar-color: rgba(var(--c-on-surface-rgb), 0.15)
            rgba(var(--c-on-surface-rgb), 0.1);

        &::-webkit-scrollbar {
            width: 6px;
            height: 6px;
            background-color: rgba(var(--c-on-surface-rgb), 0.1);
        }

        &::-webkit-scrollbar-thumb {
            background-color: rgba(var(--c-on-surface-rgb), 0.1);
        }
    }

    &__menu {
        align-self: start;
    }

    &__secondary-menu {
        align-self: end;
    }

    &__submenu {
        @apply bg-surface;
        width: 220px;
        max-height: 100vh;
        border-left: 2px solid var(--c-mono-900);

        grid-column: 2;
        grid-row: 1 / 6;

        &--hidden {
            width: 0px;
        }
    }
}