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

$class: ".gov-navigation";
$subnavigation: ".gov-subnavigation";
$megamenu: ".gov-mega-menu";
$deferred-navigation: ".gov-deferred-navigation";
$last-visible-item: ".gov-navigation__last-visible-item";


// 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);
    }
}
/**
 * The one definition every dropdown opened from the navigation row shares:
 * `.gov-subnavigation`, `.gov-mega-menu` and `.gov-deferred-navigation`. They
 * used to be styled independently and had drifted apart — different background
 * tokens (the deferred menu rendered grey, the other two white), a megamenu
 * hanging 8px below the row while the others sat flush against it, and
 * different paddings. Only what genuinely belongs to a panel's own layout —
 * the megamenu grid, the deferred accordion — stays local to it.
 */
@mixin dropdown-panel() {
    padding: var(--spacing-s) var(--spacing-m);
    background-color: var(--background-page);
    @include mq($from: lg) {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 280px;
        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: lg) {
        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;
            // Dropdowns are anchored with `left: 0`, so the last item in the row has
            // to flip to `right: 0` or it overflows the right edge of the page.
            // Three anchors are needed because the trailing items differ per markup:
            // `:last-child` covers plain markup (and the JS-generated "Další" item),
            // `:nth-last-child(3)` the header template with its two `.gov-mobile-only`
            // items, and `--last-visible-item` is set by main-navigation.ts once the
            // deferred item is appended and shifts the positional indexes.
            &:last-child #{$subnavigation},
            &:last-child #{$deferred-navigation},
            &:nth-last-child(3) #{$subnavigation},
            &#{$last-visible-item} #{$subnavigation},
            &#{$last-visible-item} #{$deferred-navigation} {
                left: initial;
                right: 0;
            }
        }
        > ul > li > a {
            justify-content: center;
            width: 100%;
        }
    }
    @include mq($until: lg) {
        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));
    @include list-li();
    @include dropdown-panel();

    @include mq($from: lg) {
        > li a {
            min-height: auto;
        }
    }
}

// MEGA MENU
#{$megamenu} {
    @include dropdown-panel();
    max-width: 100%;
    width: 100%;
    > li ul {
        @include flex($direction: column, $gap: var(--spacing-xs));
        @include list-li();
    }
    &__heading {
        margin: 0;
        span {
            @include flex($align: center, $gap: var(--spacing-s-nudge));
            padding: var(--spacing-xs) 0;
            @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: lg) {
        top: calc(100% - var(--templates-margin-s));
        left: var(--templates-margin-l);
        right: var(--templates-margin-l);
        width: auto;
        max-width: none;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: var(--templates-margin-m) var(--templates-margin-l);
        > li {
            ul {
                padding-left: var(--spacing-2xl);
                > li a {
                    min-height: auto;
                }
            }
        }
    }
}

// DEFERRED NAVIGATION
#{$deferred-navigation} {
    @include mq($from: lg) {
        @include flex($direction: column, $gap: var(--spacing-xs));
        @include list-li();
        @include dropdown-panel();
        > li a {
            min-height: auto;
        }
        > li > ul {
            @include flex($direction: column, $gap: var(--spacing-xs));
            @include list-li();
            position: static;
            min-width: 0;
            padding: 0 0 0 var(--spacing-m);
            background-color: transparent;
            border-radius: 0;
        }
        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;
            }
        }
    }
}