.aw-layout {
    display: flex;
    flex-direction: column;

    &__aw-layout-menu {
        max-width: 300px;
        height: 100vh;

        flex-shrink: 0;

        box-shadow: theme('boxShadow.default');

        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;

        &.aw-layout-menu--no-submenu {
            max-width: 5rem;
        }

        &.aw-layout-menu--hide-submenu {
            max-width: 6rem;
            z-index: 21;
        }

        & ~ * {
            max-width: calc(100% - 300px);
            margin-left: 300px;
            /* transition: max-width ease-in-out 0.3s, margin-left ease-in-out 0.3s; */
        }

        &.aw-layout-menu--no-submenu ~ * {
            max-width: calc(100% - 5rem);
            margin-left: 5rem;
        }

        &.aw-layout-menu--hide-submenu ~ * {
            max-width: calc(100% - 6rem);
            margin-left: 6rem;
        }
    }
}

.layout {
    &&--default,
    &&--simple {
        position: relative;
    }

    &__notification {
        @apply text-sm relative;
    }

    &__notification-container {
        @apply flex justify-center items-center flex-wrap;
        min-height: theme('spacing.16');
    }

    &__notification--close .container {
        @apply pr-12;
    }

    &__close {
        @apply absolute p-2;
        top: theme('spacing.8');
        right: theme('spacing.4');
        transform: translateY(-50%);

        &:before {
            content: '';
            background-color: currentColor;
            opacity: 0;
            transition: 120ms opacity;
            @apply absolute inset-0 rounded;
        }

        &:focus {
            outline: none;
        }

        & > svg {
            position: relative;
            fill: currentColor;
        }

        & > svg:focus {
            outline: none;
        }

        &:hover:before,
        &:focus:before {
            opacity: 0.3;
        }

        &:active:before {
            opacity: 0.2;
        }
    }

    &__container {
        @apply min-h-screen flex flex-col px-4 py-8 items-center justify-center;
        max-width: 30rem;
    }

    &__header {
        @apply flex items-center top-0 z-20 bg-surface py-3 order-first;
        min-height: theme('spacing.16');
        transition: 200ms box-shadow;
    }

    &__content {
        @apply flex flex-col min-h-screen;
    }

    &__navbar-list {
        & li + li {
            @apply ml-3;
        }
    }

    &__navbar-logo {
        height: 36px;
    }

    &__center-logo {
        width: 70px;
        height: 70px;
        margin-bottom: 1.5rem;
    }
}

@screen lg {
    .aw-layout {
        .aw-page-header__breadcrumbs {
            left: calc(300px + 1.5rem);
        }

        .aw-layout__aw-layout-menu.aw-layout-menu--hide-submenu ~ .aw-page,
        .aw-layout__aw-layout-menu.aw-layout-menu--no-submenu ~ .aw-page {
            .aw-page-header__breadcrumbs {
                left: calc(6rem + 1.5rem);
            }
        }
    }

    .layout {
        &&--default,
        &&--simple {
            @apply flex min-h-screen;
        }

        &__content {
            @apply flex-grow max-w-full;
            padding-left: theme('spacing.64');
            transition: 250ms padding-left ease-out;
            will-change: padding-left;

            &.is-wide {
                padding-left: theme('spacing.10');
            }
        }

        &__notification-container {
            @apply flex-no-wrap;
        }

        &&--simple &__content {
            @apply pl-0;
        }

        &__logo {
            @apply mb-16;
        }

        &__header {
            @apply bg-surface order-none;
        }

        &&--simple &__header {
            @apply bg-surface;
        }
    }
}