/* ╭──────────────────────────────────────╮
/  │                    _                 │
/  │  _ __   __ ___   _| |__   __ _ _ __  │
/  │ | '_ \ / _` \ \ / / '_ \ / _` | '__| │
/  │ | | | | (_| |\ V /| |_) | (_| | |    │
/  │ |_| |_|\__,_| \_/ |_.__/ \__,_|_|    │
/  ╰──────────────────────────────────────╯
/  navbar - styling the navigation bar / panel that sits on the top of the page at all times */

.navbar {
    align-content: center;
    color: var(--foreground);
    display: flex;
    flex-direction: row;
    inset: 0 !important;
    width: 100% !important;
    height: 1.8rem;
    max-height: 1.8rem !important;
    padding: .4rem .6rem .4rem .6rem;
    position: fixed;
    transition: .2s background-color;
    vertical-align: middle;
    z-index: 100;

    navbar-left {
        display: inline-flex;
        flex-direction: row;
        gap: .5rem;
    }

    navbar-right {
        display: inline-flex;
        flex-direction: row;
        gap: .5rem;
        margin-left: auto;
        margin-right: .7rem;
    }

    .nav-base {
        align-content: center;
        border-radius: 1rem;
        display: inline-flex;
        flex-direction: row;
        height: 1.9rem;
        outline: .13rem solid var(--border);
        overflow: hidden;
        padding: 0px .2em !important;
        text-decoration: unset !important;
    }

    .nav-baselink {
        background-color: var(--accent);
        color: var(--background);
        outline-color: color-mix(in srgb, var(--accent) 60%, transparent);

        .synth-icon {
            height: 2rem;
            margin-right: 1rem;
            pointer-events: none;
            transform: scaleX(-1) scale(1.5) translateX(-.2rem) translateY(.1rem);
            transition: .2s ease-out;
            width: 2rem;
        }

        &:hover, &:focus-visible {
            .synth-icon {
                transition: .2s ease-out;
                transform: scaleX(-1) scale(1.5) translateX(-.2rem) translateY(.2rem) rotate(10deg);
            }
        }
    }

    .nav-links {
        align-items: center;
        background-color: var(--background);
        color: var(--foreground);
        overflow: clip;
        padding: 0 .4rem !important;
        text-shadow: none;
        transition: all .3s;

        span {
            opacity: 0;
            position: absolute;
            transition: all .3s;
            pointer-events: none;
            white-space: nowrap;
        }

        icon-tabler {
            transition: all .3s;
        }
    }

    .nav-links {
        &:hover, &:focus-visible {
            color: light-dark(var(--foreground), var(--background));
            padding-bottom: 7rem !important;
            padding-right: 9rem !important;
            transition: .3s;

            span {
                opacity: 1;
                transform: scale(1.5) translateX(.7rem) translateY(.1rem);
                transition: .3s;
            }

            icon-tabler {
                transform: scale(5) translateY(.85rem) translateX(.5rem) rotate(10deg);
                transition: .3s;
            }
        }
    }

    .nav-about {
        &:hover, &:focus-visible {
            background-color: light-dark(color-mix(in srgb, var(--accent) 25%, var(--background)), var(--accent));
            outline-color: color-mix(in srgb, var(--accent) 60%, transparent);
        }
    }

    .nav-services {
        &:hover, &:focus-visible {
            background-color: light-dark(color-mix(in srgb, var(--blue) 25%, var(--background)), var(--blue));
            outline-color: color-mix(in srgb, var(--blue) 60%, transparent);
        }
    }

    .nav-donate {
        &:hover, &:focus-visible {
            background-color: light-dark(color-mix(in srgb, var(--purple) 25%, var(--background)), var(--purple));
            outline-color: color-mix(in srgb, var(--purple) 60%, transparent);
        }
    }

    .nav-mobile-menu {
        display: none;
        position: relative;
    
        input[type="checkbox"] {
            left: -100vw;
            position: absolute;
        }
    
        label {
            cursor: pointer;
        }
    
        ul {
            background-color: var(--background);
            border-radius: 1rem;
            border: var(--accent) solid .15rem;
            height: max-content;
            left: 0;
            margin-top: 2.2rem !important;
            position: absolute;
            visibility: hidden;
            width: max-content;
    
            /* inital "hidden" state, used for providing animation when activated */
            opacity: 0;
            scale: .5;
            transform-origin: top left;
            transition: opacity .3s, scale .3s, visibility .3s;
    
            li {
                border-radius: 1rem;
                list-style-type: none;
                margin: .5rem .5rem .5rem -1.9rem;
                overflow: clip;
                padding: .7rem;
                transition: .2s all;

                a {
                    color: var(--foreground);
                    text-decoration: none;
                    text-shadow: unset;
                }

                icon-tabler {
                    transition: .2s;
                }
            }
    
            li:hover {
                transition: .2s;

                icon-tabler {
                    transform: scale(2.5) translateX(-.1rem) translateY(.1rem) rotate(15deg);
                }

                a {
                    color: light-dark(var(--foreground), var(--background));
                }
            }
    
            .nav-about {
                &:hover, &:focus-visible {
                    background-color: light-dark(color-mix(in srgb, var(--accent) 25%, var(--background)), var(--accent));
                }
            }
    
            .nav-services {
                &:hover, &:focus-visible {
                    background-color: light-dark(color-mix(in srgb, var(--blue) 25%, var(--background)), var(--blue));
                }
            }

            .nav-donate {
                &:hover, &:focus-visible {
                    background-color: light-dark(color-mix(in srgb, var(--purple) 25%, var(--background)), var(--purple));
                }
            }
        }

        input[type="checkbox"]:checked~ul {
            /* makes the menu visibile when activated and makes it appear from the top right */
            opacity: 1;
            scale: 1;
            transition: opacity .3s, scale .3s, visibility .3s;
            visibility: visible;
        }
    }

    .nav-settings {
        input[type="checkbox"]#nav-settings-menu {
            left: -100vw;
            position: absolute;
        }
        
        input[type="checkbox"]#nav-settings-menu:focus-visible {
            left: unset !important;
        }

        label[data-toggle="nav-settings"] {
            cursor: pointer;
            align-items: center;

            icon-tabler {
                padding: 0 .4rem !important;
                pointer-events: none;
                transform: scale(1.3);
                transition: 1.3s;
            }

            &:hover, &:focus-visible {
                icon-tabler {
                    transform: scale(1.3) rotate(360deg);
                }
            }
        }

        &:has(input[type="checkbox"]#nav-settings-menu:checked) {
            label[data-toggle="nav-settings"] {
                background-color: var(--red);
                outline-color: color-mix(in srgb, var(--red) 70%, transparent);
                icon-tabler[settings] {
                    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
                }
            }
        }
    }

    .nav-systray {
        align-items: center;
        background-color: var(--background);
        color: var(--foreground);
        display: inline-flex;
        flex-direction: row;
        gap: .2rem;
        margin-right: .4rem !important;
        padding: 0 .4rem !important;
    }

    small {
        opacity: .7;
    }

    svg {
        color: var(--foreground) !important;
    }
}

.navbar:hover {
    transition: .2s all;
    background-color: color-mix(in srgb, var(--accent) 40%, transparent);
    border-bottom: solid .2rem var(--accent);
}

/* modify widths and spacing depending on the size of the display */
@media screen and (max-width: 35rem) {
    .navbar {
        .nav-desktop {
            display: none !important;
        }

        .nav-mobile-menu {
            display: inline-flex !important;
        }

        .nav-links {
            display: none !important;
        }

        .nav-settings {
            span {
                padding: 0 .4rem !important;
            }
        }
    }
}