// || This most likely will need to be redone in the future cause to be quite frank.. it's done like shit.

.avatar-2e8lTP {
    border-radius: var(--avatar-default-rounding);
}

.callAvatarMask-fiNMWy { // || too lazy and probably not really too important to add a mask for this
    foreignObject {
        mask: none;
        .voiceAvatar-lRbblo {
            border-radius: var(--avatar-default-rounding);
        }
        .border-2BJQjd.speaking-3RWJBr {
            box-shadow: inset 0 0 0 2px var(--status-positive), inset 0 0 0 3px var(--background-secondary);
            border-radius: var(--avatar-default-rounding);
        }
        .status-1ZXjSF {
            box-shadow: 0 0 0 4px var(--background-primary);
        }
    }
}

.wrapper-1VLyxH {
    .avatarSpeaking-33RRJU {
        box-shadow: inset 0 0 0 2px var(--status-positive), inset 0 0 0 3px var(--background-secondary);
        border-radius: var(--avatar-default-rounding);
    }
    svg {
        overflow: visible;
        > foreignObject {
            mask: none;
            border-radius: var(--avatar-default-rounding);
            border-bottom-right-radius: 0;
            &[mask="url(#svg-mask-avatar-default)"] {
                border-radius: var(--avatar-default-rounding);
            }        
        }
        > rect {
            mask: none;
            x: 0;
            y: 0;
            rx: 50%;
            ry: 50%;
            stroke: none !important;

            /* || Referenced from RadialStatus (MIT license)
             * LICENSE: https://github.com/DiscordStyles/RadialStatus/blob/master/LICENSE.md
             */
            &[fill="#43b581"],
			&[fill="#3ba55c"],
			&[fill="rgba(67, 181, 129, 1)"],
			&[mask*="online"],
			&[fill*="hsl(139"] {
				fill: var(--status-online) !important;
			}
			&[fill="#faa61a"],
			&[fill="rgba(250, 166, 26, 1)"],
			&[mask*="idle"],
			&[fill*="hsl(38"] {
				fill: var(--status-idle) !important;
			}
			&[fill="#f04747"],
			&[fill="rgba(240, 71, 71, 1)"],
			&[fill="#ed4245"],
			&[mask*="dnd"],
			&[fill*="hsl(359"] {
				fill: var(--status-dnd) !important;
			}
			&[fill="#593695"],
			&[mask*="streaming"] {
				fill: var(--status-streaming) !important;
			}
			&[fill="#747f8d"],
			&[mask*="offline"],
			&[fill="NaN"] {
                fill: var(--status-offline) !important;
			}
			&[fill="#747f8d"],
			&[mask*="invisible"],
			&[fill="rgba(116, 127, 141, 1)"],
			&[fill*="hsl(214"] {
				fill: var(--status-offline) !important;
			}
        }
        $avatar-mask-24: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H24V15.5278C22.9385 14.5777 21.5367 14 20 14C16.6863 14 14 16.6863 14 20C14 21.5367 14.5777 22.9385 15.5278 24H0V0Z" fill="white"/></svg>';
        $avatar-mask-32: '<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H32V21.4995C30.7465 20.5579 29.1884 20 27.5 20C23.3579 20 20 23.3579 20 27.5C20 29.1884 20.5579 30.7465 21.4995 32H0V0Z" fill="white"/></svg>';
        $avatar-mask-40: '<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H40V29.4995C38.7465 28.5579 37.1884 28 35.5 28C31.3579 28 28 31.3579 28 35.5C28 37.1884 28.5579 38.7465 29.4995 40H0V0Z" fill="white"/></svg>';
        $avatar-mask-80: '<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H80V58.9989C77.493 57.1158 74.3768 56 71 56C62.7157 56 56 62.7157 56 71C56 74.3768 57.1158 77.493 58.9989 80H0V0Z" fill="white"/></svg>';
        $avatar-mask-120: '<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H120V89.5579C116.549 87.3077 112.427 86 108 86C95.8497 86 86 95.8497 86 108C86 112.427 87.3077 116.549 89.5579 120H0V0Z" fill="white"/></svg>';

        &[width="30"][height="24"] {
            > [mask$="24)"] {
                        mask: url('data:image/svg+xml;charset=utf-8,#{$avatar-mask-24}');
                -webkit-mask: url('data:image/svg+xml;charset=utf-8,#{$avatar-mask-24}');   
            }
            > rect {
                x: 17px;
                y: 17px;
                width: 7px;
                height: 7px;
            }
        }
        &[width="40"][height="32"] {
            > [mask$="32)"] {
                        mask: url('data:image/svg+xml;charset=utf-8,#{$avatar-mask-32}');
                -webkit-mask: url('data:image/svg+xml;charset=utf-8,#{$avatar-mask-32}');
                + rect {
                    x: 23px;
                    y: 23px;
                    width: 9px;
                    height: 9px;
                }
            }
            // what an AMAZING way to do this since im so smart
            // some references from radial statuses again kekw
            > [mask$="typing-32)"] {
                .avatarStack-3vfSFa::after {
                    content: '';
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    background-color: rgba(0, 0, 0, 0.35);
                }
                ~ .dots-1BwzZQ circle {
                    cy: -8 !important;
                    &:nth-child(1) {
                        cx: -8.5 !important;
                    }
                    &:nth-child(2) {
                        cx: -2.25 !important;
                    }
                    &:nth-child(3) {
                        cx: 4 !important;
                    }
                }
            }
            > svg {
                        mask: url('data:image/svg+xml;charset=utf-8,#{$avatar-mask-32}');
                -webkit-mask: url('data:image/svg+xml;charset=utf-8,#{$avatar-mask-32}');   
                > rect {
                    x: 8px;
                    y: 6px;
                    width: 9px;
                    height: 9px;
                }
            }
        }
        &[width="49"][height="40"] {
            > [mask$="40)"] {
                        mask: url('data:image/svg+xml;charset=utf-8,#{$avatar-mask-40}');
                -webkit-mask: url('data:image/svg+xml;charset=utf-8,#{$avatar-mask-40}');
                ~ .dots-1BwzZQ {
                    display: none;
                }
            }
            > rect {
                x: 31px;
                y: 31px;
                width: 9px;
                height: 9px;
            }
        }
        &[width="92"][height="80"] {
            > [mask$="80)"] {
                        mask: url('data:image/svg+xml;charset=utf-8,#{$avatar-mask-80}');
                -webkit-mask: url('data:image/svg+xml;charset=utf-8,#{$avatar-mask-80}');   
            }
            > rect {
                x: 62px;
                y: 62px;
                width: 18px;
                height: 18px;
            }
        }
        &[width="138"][height="120"] {
            > [mask$="120)"] {
                        mask: url('data:image/svg+xml;charset=utf-8,#{$avatar-mask-120}');
                -webkit-mask: url('data:image/svg+xml;charset=utf-8,#{$avatar-mask-120}');   
            }
            > rect {
                x: 95px;
                y: 95px;
                width: 25px;
                height: 25px;
            }
        }
    }
}