/*
 * Logo
 */

/* Logo spécifique */
#jqueryui #logo span.logo_customer {
    background-image: url("../img/logo_customer.jpg"), url("../img/logo_customer.png");
    background-repeat: no-repeat;
    display: block;
    text-indent: -9999px;
    margin: 0 0 0 1em;
    background-size: auto 50px;
}


#header {
    background-image: none;
    background-color: $brand800;
    border-left: 13px solid $brandColor;
    margin-bottom: 1em ;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-content: space-between;
    align-items: flex-end;
    color: $blanc;
    /* Logo */
    #logo span.logo {
        width: 245px;
        height: 50px;
        background-image: url("../img/openResultat-banner.svg");
        background-repeat: no-repeat;
        display: block;
        text-indent: -9999px;
        margin-left: 1em;
    }

    /* Actions personnelles */
    #actions a, #shortlinks a{
        color: $blanc;
        padding: 0 .5em;

        &::before {
            padding-right: .5em;
        }
    }


}

// Legacy - app.css

#logo {
    text-align: left;
}

#actions {
    height: 25px;
}

#actions img {
    vertical-align: middle;
}

#actions ul,
#shortlinks ul {
    list-style: none;
    display: flex;
    justify-items: flex-end;

}

#actions ul li {
    + li a,  &.action-collectivite:not(:empty) {
        border-left: 2px solid;
        padding: 0 .5em;
    }
    &.action-login {
        padding: 0 .5em;
    }
    

}

#actions ul li.last {
    border-right: 0 none;
}

#shortlinks {
    height: 25px;
}

#shortlinks img {
    vertical-align: middle;
}

#shortlinks ul {
    list-style: none;
}

#shortlinks ul li {
    border-right: 2px solid;
    padding: 0 5px;
}

#shortlinks ul li.last {
    border-right: 0 none;
}

#user-menu-container {
    position: relative;
}

#user-menu-toggle {
    display: none;
}

label#user-menu-button {
    display: none;
    background: none;
    padding: 0;
    border: none;
    box-shadow: none;
    cursor: pointer;
    
    .ri-user-3-fill {
        border: 2px solid $brand500;
        background-color: $brand600;
        padding: 10px;
        border-radius: 50%;
    }
    
    &:hover .ri-user-3-fill, 
    &:active .ri-user-3-fill {
        background-color: $brand800;
    }
}

#user-menu {
    display: none;
    position: absolute;
    margin: 1em 0 0;
    width: max-content;
    top: 100%;
    left: auto;
    right:0;
    background: $blanc;
    border: 1px solid $gris200;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    padding: 0 1.5em;
    z-index: 1000;
    
    li {
        list-style: none;
        text-align: right;
    }
    
    .user-menu-info {
        padding: 1em 0 0.5em;
        font-size: 1.1em;
        color: $gris900;
    }
    
    .user-menu-actions {
        li {
            padding: 1em 0;
        }
        li + li {
            border-top: 1px solid $gris200;
        }
        a:hover {
            color: $brand700;
        }
        a.actions-logout {
            color: $danger;
        }
        a.actions-logout:hover {
            color: $rouge;
        }
    }
}

#user-menu-toggle:checked ~ #user-menu {
    display: block;
}

// Show #shortlinks and #actions only on desktop
@media (max-width: 768px) {
    #shortlinks,
    #actions {
        display: none;
    }
    label#user-menu-button
    {
        display: block;
    }
    #user-menu {
        &:popover-open {
            display: block;
        }
    }
}