#red-ui-multiplayer-user-list {
    display: inline-flex;
    align-items: center;
    margin: 0 5px;
    li {
        display: inline-flex;
        align-items: center;
        margin: 0 2px;
    }

}

.red-ui-multiplayer-user-icon {
    background: none;
    border: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
    text-decoration: none;
    color: var(--red-ui-header-menu-color);
    padding: 0px;
    margin: 0px;
    vertical-align: middle;

    &:focus {
        outline: none;
    }

    .red-ui-multiplayer-user.inactive & {
        opacity: 0.5;
    }
    .red-ui-user-profile {
        width: 20px;
        border-radius: 20px;
        height: 20px;
        font-size: 12px
    }
}
.red-ui-multiplayer-users-tray {
    position: absolute;
    top: 5px;
    right: 20px;
    line-height: normal;
    cursor: pointer;
    // &:hover {
    //     .red-ui-multiplayer-user-location {
    //         margin-left: 1px;
    //     }
    // }
}
$multiplayer-user-icon-background: var(--red-ui-primary-background);
$multiplayer-user-icon-border: var(--red-ui-view-background);
$multiplayer-user-icon-text-color: var(--red-ui-header-menu-color);
$multiplayer-user-icon-count-text-color: var(--red-ui-primary-color);
$multiplayer-user-icon-shadow: 0px 0px 4px var(--red-ui-shadow);
.red-ui-multiplayer-user-location {
    display: inline-block;
    margin-left: -6px;
    transition: margin-left 0.2s;
    .red-ui-user-profile {
        border: 1px solid $multiplayer-user-icon-border;
        color: $multiplayer-user-icon-text-color;
        width: 18px;
        height: 18px;
        border-radius: 18px;
        font-size: 10px;
        font-weight: normal;
        box-shadow: $multiplayer-user-icon-shadow;
        &.red-ui-multiplayer-user-count {
            color: $multiplayer-user-icon-count-text-color;
            background-color: $multiplayer-user-icon-background;
        }
    }
}

.red-ui-multiplayer-annotation {
    .red-ui-multiplayer-annotation-background {
        filter: drop-shadow($multiplayer-user-icon-shadow);
        fill: $multiplayer-user-icon-background;
        &.red-ui-user-profile-color-1 {
            fill: var(--red-ui-user-profile-colors-1);
        }
        &.red-ui-user-profile-color-2 {
            fill: var(--red-ui-user-profile-colors-2);
        }
        &.red-ui-user-profile-color-3 {
            fill: var(--red-ui-user-profile-colors-3);
        }
        &.red-ui-user-profile-color-4 {
            fill: var(--red-ui-user-profile-colors-4);
        }
        &.red-ui-user-profile-color-5 {
            fill: var(--red-ui-user-profile-colors-5);
        }
    }
    .red-ui-multiplayer-annotation-border {
        stroke: $multiplayer-user-icon-border;
        stroke-width: 1px;
        fill: none;
    }
    .red-ui-multiplayer-annotation-anon-label {
        fill: $multiplayer-user-icon-text-color;
        stroke: none;
    }
    text {
        user-select: none;
        fill: $multiplayer-user-icon-text-color;
        stroke: none;
        font-size: 10px;   
        &.red-ui-multiplayer-user-count {
            fill: $multiplayer-user-icon-count-text-color;
        }     
    }
}