@import "./styles/theme";

html {
    min-height: 100%;
    scroll-behavior: smooth;
}

body, #app {
    min-height: 100vh;
}

#app {
    background-color: $grey-light;
    font-family: $text-font;

    display: grid;
    grid-template-columns: 254px 1fr;
    grid-template-rows: 64px 1fr;
    grid-template-areas:
        "topbar  topbar"
        "sidebar content"
        "sidebar bottombar";

    .topbar {
        grid-area: topbar;

        height: 64px;
        position: fixed;
        width: 100%;
        z-index: 2400;      /* Ridiculous z-index to avoid cosmetic bugs with ElementUI tooltips */
    }

    .sidebar {
        grid-area: sidebar;

        position: fixed;
        top: 64px;
        width: 254px;
        height: 100%;
    }

    .bottombar {
        grid-area: bottombar;

        height: 64px;
        width: 100%;
    }

    main {
        grid-area: content;

        display: grid;
        grid-template-columns: 1fr 1fr 2fr;
        grid-gap: $spacer;

        .search {
            grid-column: 1 / 5;
        }
        .no-results {
            grid-column: 1 / 5;
            text-align: center;
            color: $black-light;
        }
        .bootstrap {
            grid-column: 1 / 5;
            margin: 0 $spacer 0 $spacer;
        }
        .dnds-by-taxon {
            grid-column: 1 / 5;
            margin: 0 $spacer 0 $spacer;
        }
        .modern-humans {
            grid-column: 1 / 3;
            margin-left: $spacer;
        }
        .primate-evolution {
            grid-column: 3 / 5;
            margin-right: $spacer;
        }
        .introgression {
            grid-column: 1 / 5;
            margin: 0 $spacer 0 $spacer;
        }
        .human-hemisphere {
            grid-column: 1 / 5;
            margin: 0 $spacer 0 $spacer;
        }
        .fetal-human-brain {
            grid-column: 1 / 2;
            margin: 0 0 $spacer $spacer;
        }
        .adult-human-brain {
            grid-column: 2 / 5;
            margin: 0 $spacer $spacer 0;
        }
    }
}
