/* WRAPPER */
.my-user-icon {

    --mui-icon-size: 36px;
    --mui-logged-out-color: #ffffff;
    --mui-logged-in-color: #00bfff;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    text-decoration: none !important;

    width: auto !important;
    height: auto !important;

    line-height: 1 !important;

    transition: opacity 0.3s ease !important;
}

/* DASHICON */
.my-user-icon .dashicons {

    font-size: var(--mui-icon-size) !important;

    width: var(--mui-icon-size) !important;
    height: var(--mui-icon-size) !important;

    min-width: var(--mui-icon-size) !important;
    min-height: var(--mui-icon-size) !important;

    line-height: var(--mui-icon-size) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;
}

/* FIX ICONA */
.my-user-icon .dashicons::before {

    font-size: var(--mui-icon-size) !important;

    width: 100% !important;
    height: 100% !important;

    line-height: var(--mui-icon-size) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* NON LOGGATO */
.my-user-icon.logged-out,
.my-user-icon.logged-out .dashicons,
.my-user-icon.logged-out .dashicons::before {

    color: var(--mui-logged-out-color) !important;
}

/* LOGGATO */
.my-user-icon.logged-in {

    color: var(--mui-logged-in-color) !important;

    border: 2px solid var(--mui-logged-in-color) !important;

    border-radius: 50% !important;

    padding: 6px !important;

    box-sizing: border-box !important;
}

/* ICONA LOGGATA */
.my-user-icon.logged-in .dashicons,
.my-user-icon.logged-in .dashicons::before {

    color: var(--mui-logged-in-color) !important;
}

/* AVATAR */
.my-user-icon.logged-in img {

    width: var(--mui-icon-size) !important;
    height: var(--mui-icon-size) !important;

    border-radius: 50% !important;
    object-fit: cover !important;

    border: 2px solid var(--mui-logged-in-color) !important;

    box-sizing: border-box !important;
}

/* HOVER */
.my-user-icon:hover {

    opacity: 0.7 !important;
}

/* MOBILE */
@media (max-width: 768px) {

    .my-user-icon {

        --mui-icon-size: 28px;
    }
}