navigation.scss

/* --- main navigation ----------------------------------------------------- */
body:not(.fixed) #navigation-level-1-items {
    align-self: flex-end;

    margin: 0 0 4px 5px;
    padding: 20px 0 0 0;
    z-index: 1000;
    font-size: 0;

    > li {
        display: inline-block;
        list-style-type: none;
        width: 64px;
        height: 55px;
        z-index: 2;
        font-size: $font-size-base;
    }
    a {
        color: var(--base-color);
        display: block;
        padding: 0 0;
        text-align: center;
        line-height: 1em;

        // Icon state: normal
        span {
            background: no-repeat 0 0;
            display: inline-block;
            @include square(32px);

            // Icon state: new
            &.new {
                background-position: -64px 0;
            }
        }

        img {
            margin: 8px 0;
            @include square(32px);
        }
        &[data-badge]:not([data-badge="0"]) {
            position: relative;

            &::before {
                position: absolute;
                left: 50%;
                top: 0;

                margin-left: 5px;
                @include square(16px);

                background-clip: content-box;
                background-color: var(--red);
                border: 3px solid var(--dark-gray-color-5);
                border-radius: 50%;
                color: var(--white);
                content: attr(data-badge);
                display: inline-block;
                font-size: 10px;
                z-index: 2;
            }
        }
    }

    > li > a,
    > li > label {
        .navtitle {
            position: absolute;
            white-space: nowrap;

            left: 50%;
            transform: translate(-50%, 0);

            opacity: 0;
            margin-top: -10px;
            font-size: 0.9em;
        }
    }

    img {
        filter: hue-rotate(350deg) saturate(8.7%) brightness(177.3%) !important;
    }

    // Hide all navigation item title on hover and display only the currently
    // hovered one
    .navtitle {
        transition: opacity var(--transition-duration); // Smooth change when entering
    }
    &:hover {
        > li.active .navtitle {
            opacity: 0;
        }
        > li:hover .navtitle {
            opacity: 1;
            transition: opacity 0ms; // Quick change when leaving
        }
    }

    // Recolor on hover and for active items
    li:hover,
    li a:focus,
    li.active {
        .navtitle {
            opacity: 1;
        }
        > a {
            img {
                filter: hue-rotate(0deg) saturate(100%) brightness(100%) !important;
            }
        }

        // Icon state: hover
        span     { background-position: -32px 0; }
        // Icon state: hover and new
        span.new { background-position: -96px 0; }
    }

    > .overflow {
        position: relative;

        // Hide overflow and touch toggle
        > input[type="checkbox"] {
            display: none;
        }

        // Rotate icon
        > label img {
            transition: transform var(--transition-duration);
            transform: rotate(90deg);
        }

        // Define transition duration for possible badge on overflow
        > label > a[data-badge]::before {
            transition: opacity var(--transition-duration);
        }

        // Display menu on activation
        &:hover label,
        input[type="checkbox"]:checked {
            ~ ul {
                display: block;
            }
            img,
            ~ label img {
                transform: rotate(180deg);
            }
            > a[data-badge]::before {
                opacity: 0;
            }
        }

        > ul {
            display: none;

            position: absolute;
            right: 0;
            top: 100%;
            z-index: 10;

            list-style: none;
            margin: 5px 0 0;
            padding: 4px 4px;

            background-color: var(--dark-gray-color-5);
            border: 1px solid var(--dark-gray-color-40);
            border-top: 0;

            min-width: 150px;
            max-width: 250px;
            overflow: hidden;

            li {
                display: block;
                line-height: 1;
                a {
                    display: flex;
                    flex-direction: row;
                    flex-wrap: nowrap;
                    align-items: center;

                    padding: 4px 0;

                    &[data-badge]:not([data-badge="0"])::before {
                        left: 21px;
                    }
                }
                img {
                    flex: 1 0 20px;
                    @include square(20px);
                    margin: 0 0.25em;

                }
                .navtitle {
                    flex: 1 0 70%;
                    text-align: left;
                    white-space: nowrap;
                    //margin-top: -10px;
                }
                br {
                    display: none;
                }
            }
        }
    }
    &:not(.overflown) > .overflow {
        display: none;
    }
}

body.fixed {
    #navigation-level-1 {
        height: $header-height;
    }

    #navigation-level-1-items {
        background-color: var(--base-color);

        list-style: none;
        margin: 0 0 0px -15px;
        padding: 0;
        position: absolute;

        width: fit-content;

        // Hide menu
        display: none;

        img {
            filter: contrast(0) brightness(2);

            @include square(16px);
            margin-right: 0.8em;
        }

        li {
            padding: 0.25em 15px;
            > a {
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                align-items: center;

                color: var(--white);
            }

            &:hover {
                background-color: var(--base-color-80);
            }

            &.overflow {
                padding: 0;

                &:hover {
                    background-color: inherit;
                }

                input[type="checkbox"],
                label {
                    display: none;
                }

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

                &:last-child {
                    padding-bottom: 10px;
                }
            }


        }
    }
    #responsive-menu:hover #navigation-level-1-items {
        display: block;
    }
}