:root {
	--rs-version: '2.0.11';
}

#app-mount {
	.wrapper__44b0c {
		border-radius: var(--rs-avatar-shape);

		// Remove masks
		svg:not(:root) {
			overflow: visible;
			contain: none;
		}
		foreignObject {
			mask: none;
		}

		// Typing indicator
		.dots__5ad89 circle {
			cy: -8 !important;
			&:nth-child(1) {
				cx: -8.5 !important;
			}
			&:nth-child(2) {
				cx: -2.25 !important;
			}
			&:nth-child(3) {
				cx: 4 !important;
			}
		}
		.mask__44b0c {
			& > rect[x='22'] {
				x: 0;
				y: 0;
			}
			& > circle {
				opacity: 0 !important;
				width: 100%;
				height: 100%;
				cx: 43%;
				cy: 20;
			}
		}
		.pointerEvents__44b0c[x='14.5'] {
			fill: rgba(0, 0, 0, 0.5) !important;
			width: var(--rs-members-width, 30px);
			height: var(--rs-members-width, 30px);
			x: calc((var(--rs-members-width, 30px) / 2) / -1 + 2px);
			y: calc((var(--rs-members-width, 30px) / 2) / -1);
		}

		// Avatar shape
		img,
		&.avatar__91a9d {
			border-radius: var(--rs-avatar-shape);
		}

		// Updated status, user typing and bottom left avatar
		svg[width='25'][height='15'] > rect {
			rx: calc(var(--rs-avatar-shape) * 2) !important;
			ry: calc(var(--rs-avatar-shape) * 2) !important;
		}
		&[style*='80px'],
		&[style*='120px'] {
			svg.cursorDefault__44b0c rect {
				ry: calc(var(--rs-avatar-shape) * 3.3);
				rx: calc(var(--rs-avatar-shape) * 3.3);
			}
		}

		// Status ring
		rect {
			x: 0;
			y: 0;
			width: 100%;
			height: 100%;
			mask: none;
			display: block;
			rx: var(--rs-avatar-shape);
			ry: var(--rs-avatar-shape);
			fill: transparent !important;
			stroke-width: var(--rs-small-width);
			&[fill='#23a55a'],
			&[fill='#40a258'],
			&[fill='#43a25a'] {
				stroke: var(--rs-online-color);
			}
			&[fill='#f0b232'],
			&[fill='#cc954c'],
			&[fill='#ca9654'] {
				stroke: var(--rs-idle-color);
			}
			&[fill='#f23f43'],
			&[fill='#d83a41'],
			&[fill='#d83a42'] {
				stroke: var(--rs-dnd-color);
			}
			&[fill='#593695'],
			&[mask*='streaming'],
			&[fill*='var(--status-purple'] {
				stroke: var(--rs-streaming-color);
			}
			&[fill='#80848e'] {
				stroke: var(--rs-offline-color);
			}
			&[fill='#82858f'],
			&[fill='#82838b'] {
				stroke: var(--rs-invisible-color);
			}
			&[x='16'] {
				width: 24px;
				height: 24px;
			}
			&[x='28'] {
				width: 40px;
				height: 40px;
				overflow: visible;
			}
		}

		// Members list
		&[style*='32px'] rect {
			width: 32px;
			height: 32px;
			x: -14.5;
			y: -17;
			position: relative;
			z-index: 0;
		}

		// Chat avatars (StatusEverywhere)
		&[style*='40px'] {
			& > svg > svg rect {
				width: 40px;
				height: 40px;
				x: -19;
				y: -20;
				ry: calc(var(--rs-avatar-shape) * 3.3);
				rx: calc(var(--rs-avatar-shape) * 3.3);
			}
			foreignObject[mask*='mobile'] img {
				width: calc(100% - 18px);
			}
		}

		// Medium ring (user popout)
		&[style*='80px'] {
			// Updated status
			svg.cursorDefault__44b0c rect {
				x: -48;
				y: -52;
			}
			rect {
				width: 80px;
				height: 80px;
				stroke-width: var(--rs-medium-width);
			}
			img {
				clip-path: inset(
					calc(var(--rs-medium-spacing) + 1px) calc(var(--rs-medium-spacing) + 1px) round
						var(--rs-avatar-shape)
				);
			}
		}

		// Large ring (user profile)
		&[style*='120px'] {
			// Updated status
			svg.cursorDefault__44b0c rect {
				x: -70;
				y: -76;
			}
			rect {
				width: 120px;
				height: 120px;
				stroke-width: var(--rs-large-width);
				pointer-events: none;
			}
			img {
				clip-path: inset(
					calc(var(--rs-large-spacing) + 1px) calc(var(--rs-large-spacing) + 1px) round
						var(--rs-avatar-shape)
				);
			}
		}

		// Fixes DBFBD chat avatars
		&:not([style*='80px;'], [style*='120px;'], [style*='16px'])
			> svg
			> foreignObject:not(:only-child)
			img {
			clip-path: inset(
				calc(var(--rs-small-spacing) + 1px) calc(var(--rs-small-spacing) + 1px) round
					var(--rs-avatar-shape)
			);
		}

		// UserTypingAvatars
		&[style='width: 16px; height: 16px;'] {
			rect {
				display: none;
			}
			img {
				clip-path: none;
			}
		}

		// Mobile indicator
		foreignObject[mask*='mobile'] {
			property: inherit;
			// Chat message top
			&[width='24'] {
				&:after {
					width: 10px;
					height: 12px;
					top: 30%;
				}
			}
			// Private chats and users sidebar
			&[width='32'] {
				&:after {
					width: 10px;
					height: 14px;
					top: 30%;
				}
			}
			// Banner wrapper private chat
			&[width='80'] {
				&:after {
					width: 14px;
					height: 18px;
				}
			}
			// User profile banner
			&[width='120'] {
				&:after {
					width: 24px;
					height: 20px;
				}
			}

			&:after {
				content: '';
				display: var(--rs-phone-visible, block);
				mask: url('data:image/svg+xml; utf-8,<svg aria-hidden="true" focusable="false" data-prefix="fas" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M272 0H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h224c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zM160 480c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm112-108c0 6.6-5.4 12-12 12H60c-6.6 0-12-5.4-12-12V60c0-6.6 5.4-12 12-12h200c6.6 0 12 5.4 12 12v312z"></path></svg>')
					center no-repeat;
				position: absolute;
				right: 0%;
				bottom: 0%;
				background: var(--rs-phone-color, var(--rs-online-color));
				z-index: 1;
			}

			& + rect {
				stroke: var(--rs-phone-color, var(--rs-online-color));
			}
		}
	}

	// User area
	// .avatarWrapper__37e49 .mask__44b0c > g {
	// 	transform: none !important;
	// 	rect {
	// 		width: var(--rs-user-area-size, 40px);
	// 		height: var(--rs-user-area-size, 40px);
	// 		rx: calc(var(--rs-avatar-shape) * 2) !important;
	// 		ry: calc(var(--rs-avatar-shape) * 2) !important;
	// 	}
	// }

	//Bottom left avatar, speaking in VC
	.avatarSpeaking__44b0c {
		position: absolute;
		top: 2px;
		left: 2px;
		width: calc(100% - 4px);
		height: calc(100% - 4px);
		border-radius: var(--rs-avatar-shape);
		box-shadow:
			inset 0 0 0 2px var(--rs-self-speaking-colour, #57d39b),
			inset 0 0 0 3px var(--background-secondary);
	}

	// Mobile and typing fix for status everywhere plugins
	.message__5126c .wrapper__44b0c {
		foreignObject[mask*='mobile'] {
			width: calc(100% + 3px);
		}
		rect[mask*='typing'] {
			width: calc(100% - 9px);
		}
	}

	// Avatar hint
	.avatarHint_f89da9 foreignObject {
		mask: none;
	}
	.avatarHintInner_f89da9 {
		border-radius: var(--rs-avatar-shape) !important;
		padding-top: 0;
		width: calc(100% - var(--rs-medium-width) - var(--rs-medium-spacing) + 1px * 2);
		height: calc(100% - var(--rs-medium-width) - var(--rs-medium-spacing) + 1px * 2);
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		position: relative;
	}

	// Offline
	.memberOffline-2lN7gt img {
		clip-path: none !important;
	}
	.offline__5d473 img {
		clip-path: none !important;
	}

	// Webhook popout
	.avatarWrapperNonUserBot_f89da9 .wrapper__44b0c img {
		clip-path: none !important;
	}

	// Fix clipping on user friends tab
	.userInfo__0a06e .wrapper__44b0c {
		margin-top: 1px;
		margin-left: 1px;
	}

	// Version info
	.info__2debe .line__2debe:last-child:after {
		content: 'RadialStatus ' var(--rs-version);
		display: block;
	}
}
