:root {
    --nav-height: $nav-height;
}

nav {
    width: 100%;
    position: relative;
    height: var(--nav-height);
    background: $nav-bg;
    margin-bottom: $nav-margin;
    border-bottom: $default-bottom;
    box-shadow: 0 2.5px 4px 0 #bbb;
    flex: 0 1 auto;
    z-index: 2;

    ul {
        position: relative;
        width: 75%;
        display: inline-flex;
        margin: 0;
        padding: 0;
        list-style-type: none;
        align-items: center;

        li {
            padding: 1rem 1.5rem;
            display: inline-block;
            margin: 0;
            text-transform: uppercase;
            letter-spacing: .1rem;
            border-radius: 2rem;

            &:hover {
                background: $hover-bg;
                letter-spacing: .4rem;
            }

            a {
                text-decoration: none;
                display: block;
                color: $nav-fg;

                &:hover {
                    color: $nav-fg;
                }
            }
        }

        &:hover {
            .decorator {
                display: none;
            }

            li.selected {
                border-radius: 2rem;
            }
        }
    }

    .date-time {
        position: absolute;
        width: 25%;
        display: inline-block;
        right: 0;
        margin-right: .7rem;
        font-size: 14pt;
        text-shadow: $nav-date-time-shadow;

        .time {
            display: inline-block;
        }
    }

    .settings {
        display: inline-block;
        padding: .75rem 1rem;

        &:hover {
            background: $hover-bg;
            border-radius: 3rem;
        }
    }
}