//== Dependencies
@import (optional) "../../node_modules/dotsunited-off-canvas-navigation/lib/mixins";
@import (optional) "../../../../node_modules/dotsunited-off-canvas-navigation/lib/mixins";

//== Variables

@hdeng-off-canvas-navigation-menu-width: 275px;

@hdeng-off-canvas-navigation-button-color: #fff;
@hdeng-off-canvas-navigation-button-open-color: @hdeng-off-canvas-navigation-button-color;
@hdeng-off-canvas-navigation-button-padding: 10px;
@hdeng-off-canvas-navigation-button-width: 36px;
@hdeng-off-canvas-navigation-button-height: 24px;

@hdeng-off-canvas-navigation-bg-color: @hdeng-body-bg-default-color;
@hdeng-off-canvas-navigation-highlight-bg-color: @hdeng-body-bg-contrast-color;
@hdeng-off-canvas-navigation-highlight-font-color: #fff;
@hdeng-off-canvas-navigation-font-color: @hdeng-body-font-default-color;

//== Generates
.hdeng-off-canvas-navigation-critical-generate() {
    .off-canvas-navigation-menu {
        // Hide until non-critical css is loaded
        display: none;
    }

    .off-canvas-navigation-button {
        .dotsunited-off-canvas-navigation-button(
            @color: @hdeng-off-canvas-navigation-button-color;
            @color-open: @hdeng-off-canvas-navigation-button-open-color;
            @ns: off-canvas-navigation
        );

        display: block;
        position: absolute;
        top: 3px;
        right: 0;
        margin-right: (@hdeng-content-padding - @hdeng-off-canvas-navigation-button-padding);

        @media (max-width: @hdeng-breakpoint-mobile) {
            margin-right: (@hdeng-content-padding-mobile - @hdeng-off-canvas-navigation-button-padding);
        }

        > span {
            width: @hdeng-off-canvas-navigation-button-width;
            height: @hdeng-off-canvas-navigation-button-height;
        }
    }
}

.hdeng-off-canvas-navigation-generate() {
    .off-canvas-navigation-menu {
        // Unhide from non-critical css
        display: block;

        .dotsunited-off-canvas-navigation-menu(
            @ns: off-canvas-navigation
        );

        width: @hdeng-off-canvas-navigation-menu-width;
        background-color: @hdeng-off-canvas-navigation-bg-color;
        color: @hdeng-body-font-default-color;

        .off-canvas-navigation--open & {
            box-shadow: 0 3px floor(@hdeng-spacing / 4) rgba(0, 0, 0, .99);
        }
    }

    .off-canvas-navigation-menu__list {
        margin: 0;
        padding: 0;

        ul {
            list-style: none;
            margin: 0 0 @hdeng-spacing 0;
            padding: 0;
        }

        li {
            display: block;
            border-bottom: 1px solid @hdeng-off-canvas-navigation-highlight-bg-color;

            &:first-child {
                border-top: 1px solid @hdeng-off-canvas-navigation-highlight-bg-color;
            }

        }

        a {
            display: block;
            padding: 14px floor(@hdeng-spacing / 2) 14px @hdeng-spacing;

            color: @hdeng-off-canvas-navigation-font-color;
            font-size: @hdeng-base-font-size-medium;
            line-height: @hdeng-spacing;
            text-decoration: none;

            &:visited {
                color: @hdeng-off-canvas-navigation-font-color;
                text-decoration: none;
            }

            &:hover,
            &:active,
            &:focus {
                background-color: @hdeng-off-canvas-navigation-highlight-bg-color;
                color: @hdeng-off-canvas-navigation-highlight-font-color;
                text-decoration: none;
            }
        }
    }

    .off-canvas-navigation-menu__list li.current-menu-item > a,
    .off-canvas-navigation-menu__list li.current-menu-ancestor > a,
    .off-canvas-navigation-menu__list li.current > a,
    .off-canvas-navigation-menu__list li:hover > a,
    .off-canvas-navigation-menu__list li[aria-expanded="true"] > a,
    .off-canvas-navigation-menu__list a[aria-expanded="true"],
    .off-canvas-navigation-menu__list li[aria-selected="true"] > a,
    .off-canvas-navigation-menu__list a[aria-selected="true"],
    .off-canvas-navigation__item--current > a,
    .off-canvas-navigation__item--current-ancestor > a {
            background-color: @hdeng-off-canvas-navigation-highlight-bg-color;
            color: @hdeng-off-canvas-navigation-highlight-font-color;
    }

    .off-canvas-navigation-menu__title {
        display: block;
        padding: 0 67px 0 15px;
        margin: 0;

        font-size: @hdeng-base-font-size-large;
        line-height: @hdeng-header-height-small - 2;
        color: @hdeng-off-canvas-navigation-highlight-font-color;
    }

    .off-canvas-navigation-backdrop {
        .dotsunited-off-canvas-navigation-backdrop(off-canvas-navigation);
    }
}
