.header-content {
    padding:1em 1.5em;
    a{
        text-decoration: none;
    }
    .description{
        margin: 0;
    }
}


/* logo ----------------------------------------------------------------------*/
.logo {
    .font-size(24);
    line-height: 1em;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0;
    display: inline-block;
    span{
        transition: all 250ms ease-in-out;
    }
    &:hover{
        span{
            color: @color-app;
        }
    }
    a {
        @media (max-width: @screen-m){
            content: "";
            display: inline-block;
            width: 34px;
            height: 34px;
            background-image: url('/static/media/img/logo-openworkouts.png');
            background-size: 100%;
            background-repeat: no-repeat;
            span {
                display: none !important;
            }
        }
    }
}
.logo-open {
    display: block;
    color: @color-app;
}
.logo-work,
.logo-outs {
    color: @color-app-light;
}

/* menu navigation -----------------------------------------------------------*/
.nav-site{
    .font-size (13);

    ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    li{
        border-left: 1px solid @color-main-light;
        flex-grow: 1;
        text-align: center;
    }
    a{
        color: @color-main-medium;
        padding: 1.25em;
        display: block;
        &:hover {
            color: @color-main;
        }
    }
    .is-active {
        a {
            color: @color-main;
        }
    }
}

.icon-dashboard,
.icon-profile,
.icon-logout {
    &::before {
        content: "";
        display: inline-block;
    }
    span {
        display: none;
    }
    @media (min-width: @screen-m){
        &::before {
            display: none;
        }
        span{
            display: inline-block;
        }
    }
    &:hover {
        opacity: .5;
    }
}

.icon-dashboard {
    &::before {
        content: "☰";
        .font-size(30);
        line-height: 0em;
        position: relative;
        top: 3px;
        margin: 0;
    }
}

.icon-profile {
    padding: 1em 1.25em !important;
    &::before {
        position: relative;
        top: 3px;
        width: 20px;
        height: 20px;
        background-image: url('/static/media/img/icon-user.svg');
        background-size: 100%;
        margin: 0;
    }
}


.icon-logout {
    padding: 1em 1.25em !important;
    &::before {
        position: relative;
        top: 3px;
        width: 20px;
        height: 20px;
        background-image: url('/static/media/img/icon-logout.svg');
        background-size: 100%;
        margin: 0;
    }
}



/* Add workout button with submenu -------------------------------------------*/
.add-workout {
    position: relative;
    >a{
        color: @color-app;
        &:before{
            content: "+";
            font-weight: 800;
            .font-size(32);
            line-height: 0;
            position: relative;
            top: 8px;
        }
        span{
            display: none;
        }
        &:hover{
            background-color: @color-app;
            color:white;
        }
    }
    &:hover{
        &:after{
            content: "";
            position: absolute;
            background-color: white;
            bottom: -1px;
            width: 100%;
            height: 1px;
            display: block;
            z-index: 20;
        }
        ul{
            display: inline-block;
        }
    }

    /* submenu -------------------------------------------------------------- */
    ul{
        display: none;
        flex-direction: column;
        position: absolute;
        background-color: fade(white, 95%);
        right: -1px;
        border: 1px solid @color-main-light;
        width: 153px;
        li{
            border-left:transparent;
            text-align: left;
        }
        a{
            &:hover{
                background-color: @color-main-xtralight;
            }
        }
    }
}

/* description ---------------------------------------------------------------*/
.description {
    .font-size(14);
    font-weight: 300;
    letter-spacing: .025em;
    color: @color-main-medium;
}


/* ------------------------------ STATES ------------------------------------ */

/* when user is login --------------------------------------------------------*/
.is-login {
    .header-content {
        border-bottom: 1px solid @color-main-light;
        display: flex;
        padding: 0em 1.5em;
        justify-content: space-between;
        align-items: center;
    }
    .description {
        .hide;
    }
    .logo-open {
        display: inline-block;
    }
}