/**
 * NAV
 * --
 * Stylesheet used to format the side navigation or the left hand side of the
 * page (in desktop view).
 */


.mh-nav {
    background-color: $color-bkg-nav;
    min-height: $mobile-header-height;
    position: fixed;
    width: 100%;
    z-index: 12;

    @include media-span($from: 0, $to: $tablet-landscape-width) {
        max-height: 100% !important;
        top: 0;
        left: 0;
    }

    @include media-tablet-landscape() {
        height: 100%;
        max-height: 100%;
        max-width: $nav-width-min;
        display: flex;
        flex-direction: column;
        @include position(fixed, null null 0px null);
    }

    @include media-desktop() {
        max-width: $nav-width-max;
    }

    @include media-outer() {
        border-top-left-radius: $corner-radius;
        max-height: calc(100% - 20px);
    }

    @include media-span($from: $outer-width + 200px, $to: 0) {
        max-height: calc(100% - 40px);
    }

    @include media-span($from: $outer-width + 400px, $to: 0) {
        max-height: calc(100% - 60px);
    }

    &__section {

        /**
         * Prime nav
         * --
         * A containing section for the primary list of navigation links for the
         * UI.
         */
        &--prime {
            @include media-tablet-landscape() {
                display: flex;
                flex: 1 0 0%;
                flex-direction: column;
            }

            .mh-handle {
                @include media-span($from: 0, $to: $tablet-landscape-width) {
                    box-shadow: 1px 0 0 0 rgba(0, 0, 0, 0.1);
                    cursor: pointer;
                    height: $mobile-header-height;
                    padding: 0;
                    width: $mobile-header-height;
                    z-index: 3;
                    @include position(fixed, 0px null null 0px);
                    @include transition(background-color 0.2s ease-in-out);

                    &:hover {
                        background-color: nth($color-themes, 1);
                    }
                }

                @include media-tablet-landscape() {
                    display: none;
                }
            }

            .mh-nav-section {
                box-shadow: inset -6px 0 3px -3px rgba(0, 0, 0, 0.15);
                @include position(
                    fixed,
                    $mobile-header-height null null (-$nav-width-min)
                );
                @include transition(left 0.5s ease-in-out);

                &__items {
                    @include media-span($from: 0, $to: $tablet-landscape-width) {
                        box-shadow: inset -6px 0 3px -3px rgba(0, 0, 0, 0.15);
                        @include position(
                            fixed,
                            $mobile-header-height null null (-$nav-width-min)
                        );
                        @include transition(left 0.5s ease-in-out);
                    }

                    @include media-tablet-landscape() {
                        border-bottom: 10px solid transparent;
                        flex: 1 0 auto;
                        height: 0px;
                        padding: 0;
                    }
                }
            }
        }


        /**
         * User nav
         * --
         * A containing section for the user list of navigation links for the
         * UI.
         */
        &--user {
            @include media-tablet-landscape() {
                display: flex;
                flex-direction: column;
            }

            .mh-handle {
                @include media-tablet-landscape() {
                    @include order(2);
                }
            }

            .mh-nav-section__items {
                @include media-span($from: 0, $to: $tablet-landscape-width) {
                    box-shadow: inset 6px 0 3px -3px rgba(0, 0, 0, 0.15);
                    @include position(
                        fixed,
                        $mobile-header-height (-$nav-width-min) null null null
                    );
                    @include transition(right 0.5s ease-in-out);
                }

                @include media-tablet-landscape() {
                    background-color: rgba(0, 0, 0, 0.1);
                    box-shadow:
                        0 1px 0 0 rgba(255, 255, 255, 0.05),
                        inset 0 2px 2px -1px rgba(0, 0, 0, 0.1);
                    max-height: 0;
                    overflow: hidden;
                    padding: 0;
                    @include order(1);
                    @include transition(max-height 0.2s ease-in-out);
                }

                > .mh-nav-item,
                > .mh-nav-group {
                    position: relative;
                    top: 10px;

                    &:last-child {
                        @include media-span($from: 0, $to: $tablet-landscape-width) {
                            padding-bottom:10px;
                        }

                        @include media-tablet-landscape() {
                            padding-bottom: 20px;
                        }
                    }
                }
            }

            .mh-nav-group {
                &:last-child {
                    @include media-tablet-landscape() {
                        margin-bottom: 0;
                    }
                }
            }

            .mh-nav-link {
                @include media-tablet-landscape() {
                    padding-bottom: 6px;
                    padding-top: 6px;
                    @include type(sub-nav);

                    &__tally {
                        line-height: 24px;
                        opacity: 0;
                        width: 26px;
                    }
                }

                &--active {
                    @include media-span($from: 0, $to: $tablet-landscape-width) {
                        &:after {
                            border: none;
                            left: 0px;
                            right: auto;
                            @include triangle(20px 8px, $color-bkg-main, right);
                        }
                    }
                }
            }
        }
    }
}


/**
 * Logo
 * --
 * The nav logo can be customised for every CMS. In desktop view, the image is
 * positioned top left of the UI in the nav block. In mobile view, the image is
 * hidden and the project name is shown in it's place in the top center of the
 * nav bar. However, this behaviour can be modified from the settings file.
 */
.mh-logo {
    @include media-span($from: 0, $to: $tablet-landscape-width) {
        box-shadow:
            0 2px 2px 2px rgba(0, 0, 0, 0.1),
            0 1px 0 0 rgba(0, 0, 0, 0.1);
        height: $mobile-header-height;
        padding: 10px ($mobile-header-height + 10px);
        position: relative;
        z-index: 2;
    }

    @include media-tablet-landscape() {
        padding: 10px;
        position: relative;
        z-index: 2;
    }

    &__image {
        display: block;

        @include media-span($from: 0, $to: $tablet-landscape-width) {
            @if ($logo-mobile) {
                background: url($logo-mobile) center center no-repeat;
                background-size: contain;
                height: $logo-mobile-height;
                margin: 0 auto;
                max-width: $logo-mobile-width;
            }
        }

        @include media-tablet-landscape() {
            @if ($logo-desktop) {
                background: url($logo-desktop) center center no-repeat;
                background-size: contain;
                height: $logo-desktop-height;
                margin: 0 auto;
                max-width: $logo-desktop-width;
            }
        }
    }

    &__label {
        display: block;

        @include media-span($from: 0, $to: $tablet-landscape-width) {
            @if ($logo-mobile) {
                @include homer();
            } @else {
                text-align: center;
                @include ellipsis();
                @include type(
                    h3,
                    $color: #fff,
                    $line-height: ($mobile-header-height - 20px)
                );
            }
        }

        @include media-tablet-landscape() {
            @if ($logo-desktop) {
                @include homer();
            } @else {
                background-color: rgba(0, 0, 0, 0.1);
                border-radius: $corner-radius;
                box-shadow:
                    0 1px 0 0 rgba(255, 255, 255, 0.05),
                    0 -1px 0 0 rgba(0, 0, 0, 0.2);
                text-align: center;
                padding: 10px 20px;
                @include ellipsis();
                @include type(
                    large,
                    $color: #fff,
                    $font-weight: 400
                );
            }
        }
    }
}


/**
 * Section
 * --
 * A containing section used to wrap the entire list of navigation items. There
 * are currently 2 sections - Prime nav and User nav.
 */
.mh-nav-section {
    &__items {
        color: $color-font-reverse;
        max-height: 100%;
        overflow-y: auto;
        padding: 10px 0;
        z-index: 1;

        @include media-span($from: 0, $to: $tablet-landscape-width) {
            background-color: $color-bkg-nav;
            height: 100%;
            max-height: calc(100% - #{$mobile-header-height});
            width: $nav-width-min;
        }

        &::-webkit-scrollbar-track {
            background-color: rgba(255, 255, 255, 0.15);
        }

        &::-webkit-scrollbar {
            width: 8px;
        }

        &::-webkit-scrollbar-thumb {
            background-color: rgba(255, 255, 255, 0.3);
        }
    }
}


/**
 * Grip (MOBILE ONLY)
 * --
 * The navigation handle used to open/close the prime navigation section of the
 * nav component. When active, a navigation bar slides in from the left. On
 * desktop the prime navigation section is always visible.
 */
.mh-grip {
    height: 21px;
    margin: -11px 0 0 -11px;
    width: 22px;
    @include position(absolute, 50% null null 50%);

    &__bars {
        top: 0;
        @include transition(
            transform
            0.4s
            cubic-bezier(0.68, -0.55, 0.265, 1.55));

        &, &:before, &:after {
            background-color: $color-bkg-main;
            border-radius: 4px;
            height: 3px;
            position: absolute;
            width: 22px;
        }

        &:before, &:after {
            content: "";
            display: block;
        }

        &:before {
            top: 9px;
            @include transition(opacity 0.15s 0.4s ease);
        }

        &:after {
            top: 18px;
            @include transition(
                transform
                0.4s
                cubic-bezier(0.68, -0.55, 0.265, 1.55));
        }
    }
}


/**
 * User badge
 * --
 * The navigation handle used to open/close the user navigation section of the
 * nav component. When active, a navigation bar slides in from the right. On
 * desktop the prime navigation section slides from the bottom upwards.
 */
.mh-user-badge {
    &--mobile {
        @include media-tablet-landscape() {
            display: none;
        }

        .mh-user-badge__name {
            @include media-span($from: 0, $to: $tablet-landscape-width) {
                box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.05);
                margin-top: -10px;
                padding: 18px 20px;
                @include ellipsis();
                @include type(nav, $font-weight: 400);
            }
        }
    }

    &:not(.mh-user-badge--mobile) {
        cursor: pointer;

        @include media-span($from: 0, $to: $tablet-landscape-width) {
            box-shadow: -1px 0 0 0 rgba(0, 0, 0, 0.1);
            height: $mobile-header-height;
            width: $mobile-header-height;
            z-index: 3;
            @include position(absolute, 0px 0px null null);
            @include transition(background-color 0.2s ease-in-out);
        }

        @include media-tablet-landscape() {
            box-shadow:
                inset 0 1px 0 0 rgba(255, 255, 255, 0.05),
                0 -1px 0 0 rgba(0, 0, 0, 0.2);
            padding: 15px 42px 15px ($user-profile-size + 35px);
            position: relative;
            @include transition(
                background-color 0.2s ease-in-out,
                box-shadow 0.2s ease-in-out);
        }

        @include media-desktop() {
            padding-left: ($user-profile-size-desktop + 35px);
        }

        &:after {
            @include media-tablet-landscape() {
                content: '';
                display: block;
                pointer-events: none;
                margin-top:-2px;
                @include triangle(8px, $color-bkg-main, down);
                @include position(absolute, 50% 17px null null);
            }
        }

        &:hover {
            background-color: nth($color-themes, 1);

            @include media-tablet-landscape() {
                box-shadow: none !important;
            }

            .mh-user-badge__icon {
                &:before, &:after {
                    background-color: nth($color-themes, 1);
                }
            }

            .mh-user-badge__name {
                color: #fff;
            }
        }

        @if not $user-profile-icon {
            .mh-user-badge__icon {
                background-color: $color-bkg-main;
                border: 4px solid $color-bkg-main;
                border-radius: 50%;
                height: $user-profile-size;
                margin-top: (-$user-profile-size / 2);
                overflow: hidden;
                width: $user-profile-size;
                z-index: 1;
                @include position(absolute, 50% null null 50%);

                @include media-span($from: 0, $to: $tablet-landscape-width) {
                    margin-left: (-$user-profile-size / 2);
                }

                @include media-tablet-landscape() {
                    left:20px;
                }

                @include media-desktop() {
                    height: $user-profile-size-desktop;
                    margin-top: (-$user-profile-size-desktop / 2);
                    width: $user-profile-size-desktop;
                }

                &:before, &:after {
                    background-color: $color-bkg-nav;
                    border-radius: 50%;
                    content: '';
                    display: block;
                    @include position(absolute, 50% null null 50%);
                    @include transition(background-color 0.2s ease-in-out);
                }

                &:before {
                    margin: -45% 0 0 -22.5%;
                    height: 45%;
                    width: 45%;
                }

                &:after {
                    margin: 8% 0 0 -50%;
                    height: 100%;
                    width: 100%;
                }
            }
        }

        .mh-user-badge__image {
            background: center center no-repeat;
            background-size: cover;
            border-radius: 50%;
            height: ($user-profile-size + 2px);
            margin-top: (-($user-profile-size + 2px) / 2);
            width: ($user-profile-size + 2px);
            z-index: 2;
            @include position(absolute, 50% null null 50%);

            @include media-span($from: 0, $to: $tablet-landscape-width) {
                margin-left: (-($user-profile-size + 2px) / 2);
            }

            @include media-tablet-landscape() {
                left: 19px;
            }

            @include media-desktop() {
                height: ($user-profile-size-desktop + 2px);
                margin-top: (-($user-profile-size-desktop + 2px) / 2);
                width: ($user-profile-size-desktop + 2px);
            }

            @if $user-profile-icon {
                background-image: url($user-profile-icon);
            }
        }

        .mh-user-badge__name {
            @include ellipsis();
            @include type(
                sub-nav,
                $color: $color-font-reverse,
                $line-height: (($user-profile-size / 2) + 4)
            );

            @include media-span($from: 0, $to: $tablet-landscape-width) {
                display:none;
            }

            @include media-desktop() {
                line-height: (($user-profile-size-desktop / 2) + 4);
            }
        }
    }
}


/**
 * Navigation group
 * --
 * A container used for when multiple navigation links are related to one
 * another. A navigation can have a non-clickable heading/label that appears at
 * the top of the list.
 */
.mh-nav-group {
    box-shadow:
        0 -1px 0 0 rgba(0, 0, 0, 0.2),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
    margin: 10px 0;
    padding: 10px 0;

    &:first-child {
        box-shadow: none;
        margin-top: 0;
        padding: 0;

        @include media-tablet-landscape() {
            box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.2);
        }
    }

    &:last-child {
        box-shadow:
            0 -1px 0 0 rgba(0, 0, 0, 0.2),
            inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
        margin-bottom: 0;
        padding-bottom: 0;
    }

    &__label {
        color: #000;
        padding: 10px 15px 10px 20px;
        position: relative;
        text-transform: uppercase;
        align-items: center;
        display: flex;
        @include transition(
            font-size 0.5s ease-in-out,
            line-height 0.5s ease-in-out,
            padding 0.5s ease-in-out);
        @include type(sub-nav, $color: darken($color-font-reverse, 25%));
    }
}


/**
 * Nav item
 * --
 * A single navigation item inside of a nav section or group. A nav item usually
 * contains one link, but can also contain child nav items which are hidden by
 * but open/closed by clicking on the top level nav link.
 */
.mh-nav-item {
    &--has-children {
        @include transition(
            background-color 0.2s ease-in-out,
            margin 0.2s ease-in-out);

        > .mh-nav-link {
            padding-right:42px;

            &:after {
                content: '';
                display: block;
                pointer-events: none;
                margin-top:-2px;
                @include triangle(8px, $color-bkg-main, down);
                @include position(absolute, 50% 17px null null);
            }
        }
    }

    &--open {
        &:not(:first-child) {
            margin-top: 8px;
        }

        &:not(:last-child) {
            margin-bottom: 8px;
        }

        .mh-nav-item__children {
            box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.05);
            padding-bottom: 8px;

            @for $i from 1 through $sub-nav-items-max {
                &--#{$i} {
                    max-height: (($i * $sub-nav-item-height) + 96px);
                }
            }

            .mh-nav-link__tally {
                opacity: 1 !important;
            }
        }

        &.mh-nav-item--has-children {
            box-shadow: inset 100vw 0 0 0 rgba(0, 0, 0, 0.115);

            > .mh-nav-link {
                box-shadow: inset 0 2px 2px -1px rgba(0, 0, 0, 0.1);
                font-weight: 400;

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

                > .mh-nav-link__tally {
                    opacity: 0 !important;
                }
            }
        }
    }

    &__children {
        max-height: 0;
        overflow: hidden;
        @include transition(
            max-height 0.2s ease-in-out,
            padding-bottom 0.2s ease-in-out);

        .mh-nav-link {
            padding-bottom: 6px;
            padding-top: 6px;
            @include type(sub-nav);

            &__tally {
                line-height: 24px;
                opacity: 0;
                width: 26px;
            }
        }
    }
}


/**
 * Nav link
 * --
 * A single navigation link used to navigate to another page within the
 * site/admin. Against a nav link you can display a dropdown arrow if the
 * containing nav item has children, a coloured badge if there is new activity
 * against that link/page, or a tally if there is a number of items of interest
 * relevant to that link/page (useful for enquiries, etc.).
 */
.mh-nav-link {
    cursor: pointer;
    padding: 10px 15px 10px 20px;
    position: relative;
    align-items: center;
    display: flex;
    @include transition(
        font-size 0.5s ease-in-out,
        line-height 0.5s ease-in-out,
        padding 0.5s ease-in-out);
    @include type(nav);

    &:hover,
    &:focus {
        background-color: rgba(0, 0, 0, 0.1);
        color: #fff !important;
    }

    &--active {
        background-color: nth($color-themes, 1) !important;
        color: #fff !important;
        font-weight: 400;

        @include media-mobile() {
            &:after {
                content: '';
                display: block;
                margin-top: -10px;
                @include position(absolute, 50% 0px null null);
                @include triangle(20px 8px, $color-bkg-main, left);
            }
        }
    }

    &__label {
        position: relative;
        @include ellipsis();
        flex: 1 0 auto;

        &:after {
            background: center center no-repeat;
            background-size: contain;
            content: '';
            display: none;
            height: 18px;
            margin-top: -9px;
            width: 18px;
            @include position(absolute, 50% null null null);
        }

        @each $name, $nav-icon in $nav-icons {
            &--icon-#{$name} {
                @if nth($nav-icon, 2) == 'left' {
                    padding-left: 30px;
                } @else {
                    padding-right: 30px;
                }

                &:after {
                    background-image: url(nth($nav-icon, 1));
                    display: block;

                    @if nth($nav-icon, 2) == 'left' {
                        left: 0;
                    } @else {
                        right: 0;
                    }
                }
            }
        }
    }

    &__badge {
        background-color: nth($color-themes, 1);
        border-radius: 6px;
        height: 12px;
        margin-left:10px;
        width: 12px;
        flex: 0 0 auto;
    }

    &__tally {
        background: nth($color-themes, 1);
        border-radius: $corner-radius;
        box-shadow: none;
        color: #fff;
        font-weight: 400;
        line-height: 27px;
        margin-left: 10px;
        text-align: center;
        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
        width: 30px;
        flex: 0 0 auto;
        @include transition(opacity 0.2s ease-in-out);

        .mh-nav-link--active & {
            background-color: rgba(0, 0, 0, 0.1);
            box-shadow:
                0 1px 0 0 rgba(255, 255, 255, 0.05),
                inset 0 2px 2px -1px rgba(0, 0, 0, 0.1);
            text-shadow: none;
        }
    }
}