body {
    // Type
    @include font(base, normal);
    @include font-size(small);

    position: relative;

    color: $color-text;
    font-style: normal;

    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;

    background-color: $color-background;

    &.overlay,
    &.modal-open {
        overflow: hidden;
        position: fixed;

        @include min-width(md) {
            position: relative;
        }
    }
}

html,
body {
    overflow-x: hidden;
}

main {
    min-height: calc(100vh - 440px);
}


/*
Workaround for javascript widgets that float elements
on pages where the body is not as high as the actual
view height.

The widgets should add this class when shown, and remove it
afterwards.
 */
body.fill-view-height {
    min-height: 100vh;
}
