.navigation
    width: 100%
    height: 7rem

.nav-logo
    height: 100%
    display: flex
    align-items: center
    & img
        height: 5rem

.nav-name
    font-size: 3.5rem
    font-weight: 100
    line-height: 7rem
    margin-left: 2rem

.nav-icon
    width: 3.5rem
    height: 3.5rem
    border-radius: 100rem
    margin-left: 1rem
    cursor: pointer
    display: flex
    align-items: center

    & img
        width: 3.2rem

.admin-nav
    margin-top: 2rem

.nav-link
    // background: $lightgrey
    // border-radius: 1rem
    width: 20rem
    height: 5rem
    padding: 1rem 2rem
    display: block
    color: $black
    display: flex
    align-items: center
    font-size: 1.7rem
    margin-right: 1rem
    // transition: all .2s
    border-radius: 100rem
    font-weight: 700

    &:hover
        // box-shadow: inset 0 .5rem .5rem rgba(0,0,0,.22)
        background: transparentize($blue, .9 )

    & img
        width: 3rem
        margin-right: 1.6rem

    &.active
        // box-shadow: inset 0 .5rem .5rem rgba(0,0,0,.22)
        @include gradient-blue
        @include shadow-blue
        color: $white

        & img
            filter: invert(1)

.nav-user
    display: flex
    font-size: 1.5rem
    height: 3.5rem
    align-items: center
    justify-content: space-between
    background: $lightgrey
    padding: .5rem 1rem .5rem 1.5rem
    min-width: 14rem
    border: 1px solid $grey
    text-decoration: none
    border-radius: 100rem

    & img
        width: 2.5rem
        margin-left: 1.5rem

.clock
    display: flex
    margin-right: 6rem
    font-size: 2rem