#app-mount .container_b2ca13 .avatarWrapper_b2ca13 {
    --avatar-size: 48px;

    position: relative;
    min-width: unset;
    padding: unset;
    margin: unset;

    &:hover {
        background-color: transparent;
    }

    .avatar_b2ca13 {
        width: var(--avatar-size) !important;
        height: var(--avatar-size) !important;
    
        // divider
        &::after {
            content: '';
            display: block;
            position: relative;
            pointer-events: none;
            top: calc(100% + 8px);
            width: calc(100% - 16px);
            height: 2px;
            margin: auto;
            border-radius: 1px;
            background-color: var(--background-modifier-accent);
        }
    
        .mask_c51b4e {
            width: var(--avatar-size) !important;
            height: var(--avatar-size) !important;
    
            > foreignObject {
                mask-image: url("#svg-mask-avatar-status-round-48");
                width: 100%;
                height: 100%;
            }

            .avatarStack_c51b4e {
                content: var(--avatar-source-override, '');
            }
        }
    
        .pointerEvents_c51b4e {
            x: 30px;
            y: 30px;
        }

        // i dont even know *why* an element gets changed, but a scuffed fix for it.
        // there is likely a better way to do this. :has isn't necessary but meh, lets you know when it's going to be changed.
        svg:has(~ .pointerEvents_c51b4e:empty) {
            overflow: unset;

            > rect {
                height: 25px !important;
            }

            > mask > rect {
                x: 15px;
                y: 13px;
            }
        }
    }

    // These look so low quality.
    // TODO: Make a list of higher quality URLs and apply them depending on the decoration.
    .avatarDecoration_c51b4e {
        display: none;
    }
}
