nav {
    z-index: 2;
    position: fixed;
    display: flex;
    height: fit-content;
    width: 0;
    /*border-bottom: 1px solid blue;*/
    /*border-right: 1px solid blue;*/
    border-bottom-right-radius: 25px;
    overflow: visible;
    animation: var(--animation-fade-in);

    & #nav-logo {
        position: relative;
        display: inline-block;
        height: 60px;
        width: 60px;
        min-width: 60px;
        left: 0;
        top: 0;
        cursor: pointer;
        transition: var(--transition-ui-interaction);

        &:before {
            content: '';
            position: absolute;
            height: 100%;
            width: 200%;
            background: var(--gradient-color-1);
            background: linear-gradient(to left, var(--gradient-color-1) 0, var(--gradient-color-2) 50%);
            transform: translateX(-40%) skewX(-30deg);
            border-bottom-right-radius: 20px;
            box-shadow: var(--box-shadow-nav);
            transition: var(--transition-ui-interaction);
        }

        &:after {
            content: "";
            display: block;
            position: absolute;
            height: 100%;
            width: 100%;
            left: 0;
            top: 0;
            background-image: url(../images/adler_logo_frayed_greyscale.svg);
            background-repeat: no-repeat;
            background-size: 80%;
            background-position: center center;
            transform: rotate(0deg);
            border-radius: 50%;
            transition: var(--transition-ui-interaction);
        }
    }

    & #nav-items-container {
        position: relative;
        pointer-events: none;
        display: flex;
        justify-content: center;
        flex-direction: column;
        flex-wrap: nowrap;
        margin-left: 40px;
        height: 29px;
        min-height: 29px;
        white-space: nowrap;
        transition: var(--transition-ui-interaction);

        & .nav-bg {
            background: var(--gradient);
            box-shadow: var(--box-shadow-nav);
            position: absolute;
            top: 0;
            bottom: 0;
            width: 20px; /* initial 20 - hover width: calc(100% + 20px);*/
            left: -10px;
            transform: translateX(0) skewX(-30deg);
            border-bottom-right-radius: 5px;
            border-bottom-left-radius: 5px;
            transition: var(--transition-ui-interaction);
        }

        & .nav-items {
            z-index: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            column-gap: 0.2rem;
            padding: 0 0.2rem;
            margin-top: -3px;
            height: 100%;
            color: var(--color-headline-on-gradient);

            & .nav-item {
                position: relative;
                color: transparent;
                /*transform: translateY(-35px);*/
                opacity: 0;
                filter: blur(10px);
                text-decoration: none;
                height: 100%;
                display: flex;
                align-content: center;
                align-items: stretch;
                justify-content: center;
                padding: 0 0.8rem;
                background: transparent;
                transition: all .2s ease-out 0.0s;

                & span{
                    align-content: center;
                }

                & .nav-item-img{
                    aspect-ratio: 1;
                    height: 20px;
                    margin-top: 5px;
                    background-repeat: no-repeat;
                    background-size: contain;
                    background-position: center;
                    margin-right: 4px;
                }

                &::after {
                    content: "";
                    background: var(--color-headline-on-gradient);
                    position: absolute;
                    height: 2px;
                    width: 100%;
                    bottom: 2px;
                    opacity: 0;
                    transition: all .2s ease-out 0.1s;
                }

                &:hover::after {
                    opacity: 1;
                    transition: all .5s ease-out 0.0s;
                }
            }
        }

    }
}

nav:hover, nav.show {
    width: fit-content;
    /* }
    nav:hover, body:not(.scroll-down) { */

    & #nav-items-container {

        pointer-events: initial;

        & .nav-bg {
            width: calc(100% + 20px);
        }

        & .nav-item {
            /*transform: translateY(0);*/
            opacity: 1;
            color: white;
            filter: blur(0);
            transition: all .2s ease-out 0.2s;
        }
    }
}

nav:hover {
    & #nav-logo {
        &:before {
            box-shadow: var(--box-shadow-nav-hover);
        }

        &:after {
            transform: rotate(15deg);
        }
    }

    & #nav-items-container {
        & .nav-bg {
            box-shadow: var(--box-shadow-nav-hover);
        }
    }
}

nav.show {
    & #nav-logo {
        &:before {
            box-shadow: var(--box-shadow-nav-show);
        }

        &:after {
            transform: rotate(30deg);
        }
    }

    & #nav-items-container {
        & .nav-bg {
            box-shadow: var(--box-shadow-nav-show);
        }
    }
}

@media (orientation: portrait) {
    nav {

        & #nav-items-container {

            height: 29px;

            & .nav-bg {
                transform: none;
                opacity: 0;

                &:after {
                    display: none;
                }
            }

            & .nav-items {
                height: fit-content;
                flex-direction: column;
                align-items: flex-start;

                & .nav-item {
                    padding: 0;
                    margin: 4px 4px;
                }
            }
        }
    }

    nav:hover, nav.show {
        & #nav-items-container {
            height: fit-content;

            & .nav-bg {
                opacity: 1;
            }
        }
    }
}