/**
 * FRAME
 * --
 * Stylesheet used to format the outer frame of the CMS.
 */


.mh-frame {
    background-color: $color-bkg-frame;
    min-height: 100%;
    min-width: 320px;
    display: flex;

    @include media-span($from: 0, $to: $tablet-landscape-width) {
        padding-top: $mobile-header-height;

        &--prime-nav-open {

            .mh-frame__main {
                margin-left: $nav-width-min;
            }

            .mh-nav__section--prime {
                .mh-grip {
                    &__bars {
                        transform:
                            translate3d(0, 9px, 0)
                            rotate(135deg);
                        transition-delay: 0.1s;

                        &:before {
                            opacity: 0;
                            transition-delay: 0s;
                        }

                        &:after {
                            transform:
                                translate3d(0, -18px, 0)
                                rotate(-270deg);
                            transition-delay: 0.1s;
                        }
                    }
                }

                .mh-nav-section__items {
                    left: 0;
                }

                .mh-handle {
                    background-color: nth($color-themes, 1);
                }
            }

            .mh-nav__section--user {
                .mh-handle,
                .mh-nav-section__items  {
                    right: (-($nav-width-min * 2));
                }
            }

            .mh-actions {
                left: $nav-width-min;
            }
        }

        &--user-nav-open {
            .mh-frame__main {
                margin-left: (-$nav-width-min);
            }

            .mh-nav__section--user {
                .mh-user-badge {
                    background-color: nth($color-themes, 1);

                    &__icon {
                        &:before, &:after {
                            background-color: nth($color-themes, 1) !important;
                        }
                    }
                }

                .mh-nav-section__items {
                    right: 0;
                }

            }

            .mh-nav__section--prime {
                .mh-nav-section__items  {
                    left: (-($nav-width-min * 2));
                }
            }

            .mh-actions {
                left: (-$nav-width-min);
            }
        }
    }

    @include media-span($from: $tablet-landscape-width, $to: 0) {
        &--user-nav-open {

            .mh-nav__section--user {
                .mh-user-badge {
                    box-shadow: none;

                    &:after {
                        border: none;
                        @include triangle(8px, $color-bkg-main, up);
                    }
                }

                .mh-nav-section__items {
                    @include media-tablet-landscape() {
                        max-height: $user-nav-max-height-desktop;
                    }
                }
            }
        }
    }

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

    @include media-span($from: $outer-width + 200px, $to: 0) {
        padding-top: 40px;
    }

    @include media-span($from: $outer-width + 400px, $to: 0) {
        padding-top: 60px;
    }

    &__inner {
        background-color: $color-bkg-nav;
        margin: 0 auto;
        max-width: 100%;
        width: 100%;
        display: flex;
        flex: 1 0 auto;

        @include media-span($from: 0, $to: $tablet-landscape-width) {
            flex-direction: column;
        }

        @include media-span($from: $frame-width, $to: 0) {
            max-width: $frame-width;
        }

        @include media-desktop() {
            transition: border-radius 0.5s ease-in-out;
        }

        @include media-outer() {
            border-radius: $corner-radius ($corner-radius * 2) 0 0;
        }
    }
}