body,
#root {
    height: 100vh;
    margin: 0;
    overflow-y: hidden;
}

.shell {
    display: grid;
    grid-template-areas: "Header Header" "Nav Main";
    height: 100vh;
    width: 100vw;

    &__header {
        align-items: center;
        display: flex;
        flex-direction: row;
        grid-area: Header;

        &__button-group {
            display: flex;
            flex-direction: row;
            margin-left: auto;
        }
    }

    &__nav {
        grid-area: Nav;

        &__links {
            list-style-type: none;
            margin: 0;
            padding-left: 0;

            &__link {
                align-items: center;
                display: flex;
                text-decoration: none !important;
                line-height: 1;

                &__icon {
                    display: flex;
                    height: 100%;

                    img {
                        display: inline-block;
                        height: auto;
                        min-width: 10px;
                        max-width: 40px;
                    }
                }
            }
        }
    }

    &__main {
        grid-area: Main;
        display: flex;
        flex-direction: column;
        min-height: min-content;
    }

    &__page {
        &__title {
            display: flex;
            flex-direction: row;
            align-items: center;

            &__breadcrumbs {
                list-style-type: none;
                margin: 0;
                padding: 0;

                &__breadcrumb {
                    color: inherit;
                    display: inline-block;
                    text-decoration: none;
                }
            }

            &__icon {
                display: flex;

                img {
                    display: inline-block;
                    min-width: 10px; /* It should never need to be smaller than this in any theme */
                    max-width: 40px; /* It should never need to be larger than this in any theme */
                }
            }

            .button-group {
                margin-left: auto;
            }
        }

        &__content {
            flex: 1;
            overflow-x: hidden;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
    }
}