@import "../../../styles/mixins";

$class: ".gov-navigation";
$subnavigation: ".gov-subnavigation";
$megamenu: ".gov-mega-menu";
$deferred-navigation: ".gov-deferred-navigation";


// MIXINS
@mixin list-li() {
    li {
        margin-bottom: 0;
        a {
            @include flex($align: center);
            @include typography("body-s");
            min-height: var(--height-2xl);
            padding: var(--spacing-xs) 0 var(--spacing-xs) var(--spacing-xs);
            color: var(--text-secondary);
            text-decoration: none;
            &:hover {
                color: var(--text-primary);
                text-decoration: underline;
            }
        }
    }
}
@mixin a-like-button() {
    @include flex($align: center);
    height: var(--height-component-l);
    padding: 0 var(--spacing-m-nudge);
    text-decoration: none;
    @include typography("body-l");
    font-weight: 500;
    color: var(--text-primary-color);
    white-space: nowrap;
    border-radius: var(--corner-radius-s);
    &:hover {
        background-color: var(--button-outlined-primary-hover);
        color: var(--text-primary-color);
        text-decoration: none;
    }
    &:active {
        background-color: var(--button-outlined-primary-active);
    }
}
@mixin rounded-corners() {
    background-color: var(--background-block-primary);
    border-bottom-left-radius: var(--corner-radius-m);
    border-bottom-right-radius: var(--corner-radius-m);
}

// MAIN NAVIGATION
#{$class} {
    background-color: var(--component-nav-background);
    ul {
        margin: 0;
        li {
            margin: 0;
            &:before {
                content: none;
            }
        }
    }
    > ul {
        @include flex($direction: column, $justify: center, $gap: var(--templates-margin-s));
        margin: 0;
        padding: 0;
    }
    > ul > li {
        width: 100%;
    }
    > ul > li > a {
        @include a-like-button();
    }
    > ul > li > gov-button,
    > ul > li > .gov-button {
        width: 100%;
        .element {
            @include flex($align: center, $justify: space-between, $gap: var(--spacing-m));
            width: calc(100% + (var(--spacing-m-nudge) + var(--border-width, 0.0625rem)) * 2);
            font-weight: 500 !important;
        }

    }
    &__item {
        width: calc(100% - (var(--spacing-m-nudge) * 2));
        height: var(--height-component-l);
        padding: 0 var(--spacing-m-nudge);
    }
    &--has-megamenu {
        position: static !important;
    }

    @include mq($from: md) {
        background-color: transparent;
        > ul {
            @include flex($direction: row, $justify: space-between, $align: center, $gap: var(--spacing-m));
        }
        > ul > li {
            position: relative;
            display: flex;
            width: auto;
            &:last-child #{$deferred-navigation},
            &:nth-last-child(3) #{$subnavigation} {
                left: initial;
                right: 0;
            }
        }
        > ul > li > a {
            justify-content: center;
            width: 100%;
        }
    }
    @include mq($until: md) {
        gov-button, .gov-button {
            width: 100%;
            max-width: 100%;

            .element {
                width: calc(100% + (var(--spacing-m-nudge) + var(--border-width, 0.0625rem)) * 2);
                justify-content: space-between;
            }
        }
    }
}

// SUB NAVIGATION
#{$subnavigation} {
    @include flex($direction: column, $gap: var(--spacing-xs));
    padding: var(--spacing-s) var(--spacing-m);
    min-width: 280px;
    background-color: var(--background-page);
    @include list-li();

    @include mq($from: md) {
        position: absolute;
        top: var(--height-component-l);
        left: 0;
        @include rounded-corners();
        > li a {
            min-height: auto;
        }
    }
}

// MEGA MENU
#{$megamenu} {
    max-width: 100%;
    width: 100%;
    padding: var(--spacing-s) 0;
    background-color: var(--background-page);
    > li ul {
        @include flex($direction: column, $gap: var(--spacing-xs));
        padding: 0 var(--spacing-m);
        @include list-li();
    }
    &__heading {
        margin: 0;
        span {
            @include flex($align: center, $gap: var(--spacing-s-nudge));
            padding: var(--spacing-s) var(--spacing-m);
            @include typography("body-m");
            font-weight: 700;
            line-height: var(--height-line-m);
            color: var(--text-primary-color);
        }
        a {
            display: block;
            text-decoration: none;
            &:hover {
                color: var(--interactive-timer-primary-solid);
                text-decoration: underline;
            }
        }
    }
    li a {
        min-height: auto;
    }
    &__more a {
        color: var(--text-tertiary) !important;
    }

    @include mq($from: md) {
        position: absolute;
        top: var(--spacing-5xl);
        left: 0;
        max-width: 1240px;
        width: 100vw;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: var(--templates-margin-m) var(--templates-margin-l);
        @include rounded-corners();
        > li {
            ul {
                padding-left: var(--spacing-2xl);
                padding-right: var(--spacing-m);
                > li a {
                    min-height: auto;
                }
            }
        }
    }
}

// DEFERRED NAVIGATION
#{$deferred-navigation} {
    @include mq($from: md) {
        @include flex($direction: column, $gap: var(--spacing-xs));
        padding: var(--spacing-s) var(--spacing-m);
        min-width: 280px;
        background-color: var(--background-page);
        position: absolute;
        top: var(--height-component-l);
        left: 0;
        @include rounded-corners();
        @include list-li();
        > li a {
            min-height: auto;
            @include a-like-button();
        }
        > li ul {
            display: none;
        }
        gov-button, .gov-button {
            width: 100%;
            max-width: 100%;
            .element {
                width: calc(100% + (var(--spacing-m-nudge) + var(--border-width, 0.0625rem)) * 2);
                justify-content: space-between;
                font-weight: 500;
            }
            gov-icon, .gov-icon {
                display: none;
            }
        }
    }
}