html {
    font-size: 16px;
}

body {
    @apply m-0 p-0 w-dvw h-dvh min-w-dvw min-h-dvh bg-gray-100 font-sans antialiased;

    &#app {
        @apply grid;
        grid-template-columns: 5rem auto;
        grid-template-rows: 1fr 0;
    }

    &#auth {
        @apply flex items-center justify-center;

        header {
            @apply flex flex-row items-center justify-between px-6 fixed top-0 left-0 h-20;

            a {
                @apply inline-flex items-center gap-2;
            }
        }
    }
}

/* primary app navigation on the left */
nav {
    @apply w-20 flex flex-col items-center justify-between;

    /* top items */
    .top {
        @apply flex flex-col items-center pt-6 2xl:pt-8 mt-2px;
    }

    /* bottom items */

    .bottom {
        @apply pb-6 2xl:pb-8;
    }

    /* app buttons */
    menu {
        @apply flex flex-col gap-1 items-center mt-6;

        li.app-button {

            a {
                @apply flex items-center justify-center p-3 bg-transparent text-black;
                transition: background-color 100ms ease-in-out;
                border-radius: 70% 50% 70% 30% / 60% 60% 60% 40%; /* blob 1 */

                &:hover {
                    @apply bg-gray-200;
                }

                &.is-active {
                    @apply bg-cyan-400;

                    &:hover {
                        @apply bg-cyan-500;
                    }
                }
            }

            &:nth-child(2) a {
                border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%; /* blob 2 */
            }

            &:nth-child(3) a {
                border-radius:  80% 65% 90% 50% / 90% 80% 75% 75%; /* blob 3 */
            }
        }
    }
}

/* primary content window defaults */
main {
    @apply rounded-lg bg-white;

    body#app & {
        @apply grid m-2 ml-0;
        grid-template-rows: 5rem auto;
    }

    body#auth & {
        @apply w-1/2 mx-auto p-8;
        min-width: 16rem;
        max-width: 40rem;
    }

    /* main content title and actions */
    > header {
        @apply flex flex-row items-center justify-between px-6 2xl:px-8;

        h1 {
            @apply h-12 max-h-12;
        }

        menu {
            @apply flex flex-row items-center justify-end gap-2 h-12 max-h-12;
        }
    }

    /* main content wrapper */
    > article {
        @apply grid w-full;
        grid-template-columns: minmax(20rem, 20dvw) repeat(3, 1fr);

        /* left column */
        aside {
            @apply col-span-1 px-6 2xl:px-8 h-full;
        }

        /* calendar page defaults */
        &#calendar {

            aside {
                @apply grid pb-6 2xl:pb-8;
                grid-template-rows: 1fr min-content;
            }
        }
    }
}
@media (width >= 96rem) { /* 2xl */
    main {
        body#app & {
            grid-template-rows: 6rem auto;
        }
    }
}

/* app logo */
.logo {
    @apply w-10 h-10 flex;

    .overlay {
        fill: var(--color-cyan-500);
    }
}