/*
    This file is used to hold all layout references ([layout~=”foo”]) for CSS grid layouts within our Aurelia templates.
*/

[layout="public"] {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: 
        "router"
    ;
}
[layout="login"] {
    display: grid;
    grid-template-columns: 30em auto;
    grid-template-rows: 6.5em auto 6.5em;
    grid-template-areas: 
        "header main"
        "aside main"
        "footer main"
    ;
}
[layout="donor"],
[layout="staff"],
[layout="advisor"],
[layout="account"],
[layout="client"] {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: 
        "router"
    ;
}
[layout="operations"] {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 6.5em auto;
    grid-template-areas: 
        "header"
        "router"
    ;
}
[layout="one-column"] {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: 
        "main"
    ;
}
[layout="two-column"] {
    display: grid;
    grid-template-columns: 20em auto;
    grid-template-rows: auto;
    grid-template-areas: 
        "aside main"
    ;
}
[layout="dashboard-layout-1"] {
    --section-margin: 0;

    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 1.5em;
    grid-template-rows: 1fr 2fr;
    grid-template-areas: 
    "slot1 slot2 slot3"
    "slot4 slot5 slot5";
}

/* ###################### TEMPORARY HACK FOR EDGE CASES #################### */
nav ui-menu ui-menu-item:first-child {
    width: 20em;
    --menu-item-flex: 1;
    --menu-item-padding: 0 2em;
}