/**
 * Overall page structure styles
 *
 * @author n1474335 [n1474335@gmail.com]
 * @copyright Crown Copyright 2017
 * @license Apache-2.0
 */

/* Together, they make up 100vh */
:root {
    --banner-height: 40px;
    --controls-height: 70px;
    --workspace-height: calc( 100vh - calc( var(--banner-height) + var(--controls-height)));;
    --recipe-height: 20vh;
    --operations-height: 88px;
    --io-height: calc(100vh - var(--banner-height) - var(--controls-height) - var(--recipe-height) - var(--operations-height));
}

body {
    overflow: hidden;
}

#banner,
#content-wrapper {
    position: absolute;
    width: 100%;
}

#content-wrapper {
    top: 0;
    bottom: 0;
}

#workspace-wrapper {
    height: var(--workspace-height);
    margin-top: var(--banner-height);
}

#banner { height: var(--banner-height); }
#operations { height: var(--operations-height); }
#recipe { height: var(--recipe-height); }
#IO { height: var(--io-height); }
#controls { height: var(--controls-height); }

#controls {
    bottom: 0;
}

@media only screen and ( min-width: 768px ) {
    #workspace-wrapper {
        height: calc( 100vh - var(--banner-height));
    }

    #categories,
    #search-results {
        max-height: max-content;
        overflow: revert;
    }

    #operations, #recipe, #IO {
        height: 100%;
    }

    #operations {
        overflow: auto;
    }

    #controls {
        position: absolute;
    }
}