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

#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); }

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

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

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

#controls {
    bottom: 0;
}

/*#IO {*/
/*    padding-bottom: var(--controls-height);*/
/*}*/

#recipe.maximised-pane,
#input.maximised-pane,
#output.maximised-pane {
    position: fixed;
    min-height: calc( 100vh - var(--banner-height ));
    height: auto;
    top: var(--banner-height);
    left: 0;
    right: 0;
    bottom: 0;
}

#recipe.maximised-pane #controls {
    display: none;
}

@media only screen and ( min-width: 768px ) {
    #IO {
        padding-bottom: 0;
    }

    #recipe {
        padding-bottom: var(--controls-height);
    }

    #recipe .list-area  {
        bottom: var(--controls-height);
    }

    #workspace-wrapper {
        height: calc( 100vh - var(--banner-height));
    }

    #operations-dropdown {
        max-height: max-content;
        overflow: revert;
    }

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

    #operations {
        overflow: auto;
    }

    #controls {
        position: absolute;
    }
}