@import 'common/vars';

@import 'common/mixins';
@import 'common/layout';
@import 'common/elements';
@import 'common/animations';
@import 'common/modal';
@import 'common/notifications';

@import 'nav';

body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow-x: hidden;
    font-family: $default-font-family;
    font-size: $default-font-size;
}

#app {
    display: flex;
    flex-flow: column;
    height: 100%;

    main {
        background: $default-bg;
        margin: 0;
        flex: 1 1 auto;
        overflow: hidden;

        // nav height hardcoded, calc won't support either CSS4 nor SASS vars
        @include calc(height, '100vh - 4.8rem');

        .plugins-container {
            height: inherit;

            .plugin-container {
                overflow: auto;
                height: inherit;

                .plugin {
                    overflow: auto;
                }
            }
        }
    }

    a {
        color: $default-link-fg;
    }
}