Code/Examples/TwitchChatExample/TwitchChatExample.razor.scss
TwitchChatExample
{
	position: absolute;
	justify-content: flex-end;
	align-items: flex-start;
	flex-direction: column-reverse;
	color: white;

	TwitchChatEntry
	{
		position: relative;
		flex-shrink: 0;
		width: 100%;
		align-items: flex-start;
		left: 0px;
		transition: all 0.2s ease-out;

		&:intro
		{
			left: -16px;
			opacity: 0;
		}

		gap: 4px;
		.username
		{
			align-items: center;
			flex-shrink: 0;
			.badges
			{
				.badge
				{
					width: 18px;
					height: 18px;
					background-color: white;
					margin-right: 3px;
					border-radius: 2px;
					background-position: center;
					background-size: contain;
					background-repeat: no-repeat;

					&.moderator
					{
						background-color: #00AD03;
						background-image: url("badges/moderator.png");
					}

					&.subscriber
					{
						background-color: #6441A4;
						background-image: url("badges/subscriber.png");
					}

					&.vip
					{
						background-color: #E005B9;
						background-image: url("badges/vip.png");
					}

					&.broadcaster
					{
						background-color: #e91916;
						background-image: url("badges/broadcaster.png");
					}

					&.premium
					{
						background-color: #00a0d6;
						background-image: url("badges/premium.png");
					}

					&.staff
					{
						background-color: black;
						background-image: url("badges/staff.png");
					}

					&.turbo
					{
						background-color: #59399A;
						background-image: url("badges/turbo.png");
					}

					&.verified
					{
						background-image: url("badges/verified.png");
					}
				}
			}

			.avatar
			{
				width: 24px;
				height: 24px;
				background-position: center;
				background-size: contain;
				background-repeat: no-repeat;
				border-radius: 50%;
				margin-right: 4px;
			}

			.name
			{
				font-weight: 700;
			}
		}

		.message
		{
			flex-wrap: wrap;

			> *
			{
				margin-right: 4px;
				flex-shrink: 0;
			}

			.emote
			{
				width: 24px;
				height: 24px;
				background-position: center;
				background-size: contain;
				background-repeat: no-repeat;
			}
		}
	}
}