/**
 * MAIN
 * --
 * Stylesheet used to format the main body of content or the right hand side of
 * the page (in desktop view).
 */


.mh-main {
    width: 100%;
    display: flex;
    flex: 1 0 auto;

    @include media-span($from: 0, $to: $tablet-landscape-width) {
        transition: margin-left 0.5s ease-in-out, padding 0.5s ease-in-out;
    }

    @include media-tablet-landscape() {
        justify-content: flex-end;
    }

    &__inner {
        background-color: $color-bkg-main;
        max-width: 100%;
        width: 100%;
        display: flex;
        flex: 1 0 auto;
        flex-direction: column;

        @include media-tablet-landscape() {
            max-width: calc(100% - #{$nav-width-min});
            width: 100%;
            justify-content: flex-end;
        }

        @include media-desktop() {
            max-width: calc(100% - #{$nav-width-max});
        }

        @include media-outer() {
            border-top-right-radius: $corner-radius;
        }

        > .mh-heading {
            background-color: #fff;
            box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.05);
            flex: 0 0 auto;

            @include media-outer() {
                border-top-right-radius: $corner-radius;
            }
        }
    }

    &__content {
        padding-top: 15px;
        flex: 1 0 auto;

        @include media-mobile() {
            padding: 20px;
        }

        > :first-child { margin-top: 0; }
        > :last-child { margin-bottom: 0; }
    }

    &__row {
        margin: 15px 0;

        @include media-mobile() {
            margin: 20px 0;
        }

        @include media-desktop() {
            display: flex;
        }

        > .mh-main__box {
            @include media-desktop() {
                margin: 0 0 0 20px;
                flex: 1 0 auto;

                &:first-child { margin-left: 0; }
            }

            &:first-child { margin-top: 0; }
            &:last-child { margin-bottom: 0; }
        }
    }

    &__box {
        background-color: #fff;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
        margin: 15px 0;
        display: flex;
        flex: 1 1 !important;
        flex-direction: column;

        @include media-mobile() {
            border-radius: $corner-radius;
            margin: 20px 0;
        }

        > * {
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            margin: 0;
            padding: 20px;
            flex: 1 0 auto;

            &:last-child {
                border-bottom: none;
            }
        }
    }
}