@use '@discordstyles/classes' as *;

#{cls('mount')} {
	//#region Channel list
	#{cls('sidebar.channel.container')} {
		//Unread
		#{cls('sidebar.channel.unread sidebar.channel.link')} {
			background: var(--foreground);
		}

		//Hover
		#{cls('sidebar.channel.wrapper')}:hover #{cls('sidebar.channel.link')} {
			background: var(--background-modifier-hover);
			#{cls('sidebar.channel.icon')} {
				color: var(--interactive-hover);
			}
		}

		//Selected
		&#{cls('sidebar.channel.containerSelected sidebar.channel.link')} {
			background: var(--gradient) !important;
			#{cls('sidebar.channel.icon')} {
				color: var(--text-normal);
			}
		}

		//#region VC with user limit
		//FIXME: This is still very much broken visually and i have no idea what containerUserOver_c69b6d is
		#{cls('sidebar.channel.users')} {
			background: var(--foreground);
			padding: 0 5px;
			width: auto;
		}

		#{cls('sidebar.channel.total')} {
			background: var(--foreground-double);
			padding: 0 5px;
			width: auto;
		}

		.containerUserOver_c69b6d::after {
			background: var(--gradient-20);
			border: 2px solid rgb(var(--gradient-primary));
		}
		//#endregion VC with user limit
	}
	//#endregion Channel list
}
