$sidemenu-width-full:14rem;
$sidemenu-width-mini:3rem;
$sidemenu-break-width: 720px;
$animatespeed:0.3s;

#ribbon,
#page {
    width: 100%;
    -webkit-transition: margin-left $animatespeed ease, width $animatespeed ease;
    -moz-transition: margin-left $animatespeed ease, width $animatespeed ease;
    -o-transition: margin-left $animatespeed ease, width $animatespeed ease;
    transition: margin-left $animatespeed ease, width $animatespeed ease;
    scroll-snap-type: y mandatory;
}

#page{
    height: 100%;
    padding: 0.5rem;
    #page-content{
        height: 100%; // TODO - this should not be applied when ribbon-shadow element is present
    }

}

#ribbon {

    z-index: 50;
    position: fixed;

    & .toolbar {
        background-color: white;
        border: 1px solid #dfdfdf;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
        border-bottom: 1px solid rgba(80, 80, 80, 0.4);
        z-index: 50;
        padding: 0.5rem 1rem;

        .title{
            font-size: 1.5rem;
            //font-weight: 600;
        }

        .input-group {
            width: auto;
        }

        .btn {
            padding: 0.1rem 0.5rem;
        }

        div[class*="col"] {
            padding: 0.25rem 0.125rem;
        }

    }
}

#sidemenu {

    @media(min-width: $sidemenu-break-width) {

        width: $sidemenu-width-full;

        & .text {
            max-width: 100%;
            opacity: 1;
        }

        &~#ribbon,
        &~#page {
            width:calc(100% - #{$sidemenu-width-full});
            margin-left: $sidemenu-width-full;
        }

        &.toggled {

            width: $sidemenu-width-mini;

            & .text {
                max-width: 0;
                opacity: 0;
            }

            &~#page,
            &~#ribbon {
                width: calc(100% - #{$sidemenu-width-mini});
                margin-left: $sidemenu-width-mini;
            }

        }
    }

    @media(max-width: $sidemenu-break-width) {

        width: 0;

        & .text {
            max-width: 0;
            opacity: 0;
        }

        &~#ribbon,
        &~#page {
            margin-left: 0;
            width: 100%;
        }

        &.toggled {
            width: $sidemenu-width-full;

            & .text {
                max-width: 100%;
                opacity: 1;
            }
        }
    }
}