.menu {
    margin-bottom: 2em;

    background: color($gray, lightest);

    li {
        &.-active > a {
            color: color($gray, darker);

            font-weight: font-weight(extrabold);
        }
    }

    a {
        display: inline-block;

        color: color($gray, dark);
        border-bottom: none;

        &:hover {
            color: color($link);
        }
    }
}

.menu__home__dashboard__icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: .15em;
    vertical-align: middle;

    background-image: url('/favicon-32x32.png');
    background-repeat: no-repeat;
    background-size: contain;
}

.menu__log-out {
    @include circle(1.5rem);

    padding: 0;
    overflow: hidden;
    vertical-align: middle;

    color: color($gray, dark);
    background-color: $white;
    box-shadow: none !important;

    &:hover {
        color: color($orange) !important;
        background-color: $white;
        filter: none;
    }
}


.menu__home {
    float: left;
    padding: 1.5em 0;
    z-index: 2;

    font-size: .85rem;
}

.menu__home__dashboard {
    margin-right: 1.5em;
}

.menu__home__front {
    padding-left: 1.5em;
}

.menu__home__front__protocol {
    position: absolute;
    top: 0;
    left: 0;
    padding-left: .35em;

    color: color($gray, lighter);
}

.menu__home__front__host,
.menu__home__front__protocol {
    @include mq(m) {
        display: none !important;
    }
}

.menu__user {
    padding: 1.5em 0;

    font-size: font-size(s);
    text-align: right;

    @include mq(s) {
        text-align: right;
    }

    ul {
        @include ul-horizontal;
    }

    li {
        padding-left: 2em;

        @include mq(s) {
            padding: 0 .5em;

            font-size: .85em;
        }
    }
}

.menu__groups {
    display: flex;
    padding: 1em 0;
    overflow-x: auto;

    font-size: font-size(s);

    @include mq(m) {
        margin: 0 -2em;
    }
}

.menu__group {
    display: block;
    flex-shrink: 0;
    padding: 0 4em 0 1em;
    vertical-align: top;

    border-left: solid color($gray, lighter) 2px;

    font-weight: font-weight(medium);

    ul {
        @include ul-clean;
    }

    a {
        display: inline-block;

        color: $text-color;
        border-bottom: none;

        line-height: 1.7;

        &:hover {
            color: color($link);
        }
    }

    &:before {
        content: attr(data-menu-group);

        display: block;
        margin: 0 0 .25em 0;

        color: color($gray, light);

        font-size: .75em;
        font-weight: font-weight(extrabold);
        text-transform: uppercase;
    }
}

.menu__group__title {
    margin: 0 0 .25em 0;

    color: color($gray, light);

    font-size: .75em;
    font-weight: font-weight(extrabold);
    text-transform: uppercase;
}