nav {
    background-color: var(--navbar);
    @include font-size(.9rem);
    text-transform: uppercase;
    position: sticky;
    padding: .25rem;
    top: 0;
    z-index: 10;

    .navbar-title {
        display: inline-block;
        background-color: var(--color-primary);
        color: var(--color-light) !important;
        border-radius: var(--border-size);
        padding: .75rem;
        transition: background .1s;

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

    .navbar-menu {
        display: inline-block;
        @include menuDesktop();

        > li {
            color: var(--text);
        }
    }

    .navbar-right-menu {
        float: right;
        background-color: var(--color-secondary);
        border-radius: var(--border-size);
        @include menuDesktop(true);
    }

    svg {
        margin-right: .25rem;
    }

    @media screen and (max-width: 700px) {
        position: initial;
        padding: 0;
        border-radius: 0 0 var(--border-size) var(--border-size);

        .navbar-title, .navbar-menu {
            display: block;
            border-radius: 0 0 var(--border-size) var(--border-size);
        }

        .navbar-title {
            position: sticky;
            padding: 1rem;
            top: 0;
            text-align: center;
        }

        .navbar-menu {
            @include menuMobile();
            border-radius: 0 0 var(--border-size) var(--border-size);
            box-shadow: 0 16px var(--color-secondary);
        }

        .navbar-right-menu {
            @include menuMobile();
            border-radius: 0 0 var(--border-size) var(--border-size);
            text-align: center;
            float: none;
        }
    }
}