.menu {
    max-height: 0px;
    display: block;
    @include transition;
    overflow: hidden;
    
    &.enabled {
        max-height: 100vh;
    }
    &__item {
        color: $white;
        height: 3rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        cursor: pointer;
        @include transition;

        &:hover {
            background-color: $theme-blue;
        }

        a {
            display: flex;
            flex-direction: row;
            align-items: center;
            width: 100%;
            height: 100%;
        }
        i {
            display: inline-block;
            width: 4rem;
            height: 3rem;
            color: $white;
            text-align: center;
            @include px(0.50rem);
            @include py(0.75rem);
        }
        p {
            display: inline-block;
            flex-grow: 1;
            @include px(1rem);
        }
    }
    &__separator {
        margin-left: 5rem;
        margin-right: 4rem;
        border-top: 0.125rem solid $white;
    }
}