:root{
    --menu-account-w: 150px;
}

/* SMALL */

.block-account.small .bmyaccount:hover {
    background-color: var(--c3);
}

.block-account.small .bmyaccount {
    display: flex;
    justify-content: center;
    align-items: center;
    /* width: 30px; */
    /* height: 30px; */
    padding: 1px;
    border-radius: 50%;
    border: 1px solid var(--c0);
    text-decoration: none;
    margin-left: auto;
}

.block-account.small .bmyaccount.selected {
    border-radius: 50% 50% 0 0;
    transition: border-radius 0.335s ease-in-out;
    border-bottom: 1px solid var(--cbutton);
    background-color: var(--cbutton);
}

.block-account.small {
    display: block;
    
    width: auto !important;
}

.block-account.small .submenu {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    
    /* right: 0; */
    /* width: 0px; */
    
    max-width: 0px;
    width: var(--menu-account-w);
    
    opacity: 0;
    
    padding: 4px;
    box-sizing: border-box;
    
    background-color: var(--cbutton);
    
    border-top:1px solid var(--cbutton);
    
    /* transition: opacity 0.335s ease-in-out, width 0.335s ease-in-out; */
    
    overflow: hidden;
    z-index: 1000;
}

@keyframes slide-from-right {
    0% {
        opacity: 0;
        max-width: 0px;
        width: 0;
        right: calc(var(--menu-account-w) * -1);
    }
    75% {
        max-width: var(--menu-account-w);
        width: 100%;
        right: 0px;
    }
    100% {
        opacity: 1;
        max-width: var(--menu-account-w);
        width: 100%;
        right: 0px;
    }
}

.block-account.small .bmyaccount.selected + .submenu{
    /* width: var(--menu-account-w); */
    /* opacity: 1; */
    /* transition: opacity 0.335s ease-in-out, width 0.335s ease-in-out; */
    
    animation-name: slide-from-right;
    animation-duration: 0.665s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-direction: alternate;
    animation-fill-mode: forwards;
    
    /* animation-fill-mode: both; */
}

.block-account.small .submenu .account-menu-item:hover{
    background-color: var(--cimportant);
    color: var(--text-important);
}

.block-account.small .submenu .account-menu-item.bdisconnect:hover{
    background-color: var(--cimportant);
    color: var(--text-important);
}

.block-account.small .submenu > a {
    width: 100%;
    
    display: flex;
    flex-direction: row;

    align-items: center;
    justify-content: flex-start;

    text-decoration: none;

    line-height: 30px;
    
    /* Les deux règles suivantes sont nécessaires pour text-overflow */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.block-account.small .submenu > a .material-icons{
    padding-right: 10px;
}