@use '../vars/vars' as *;

$guild-bar-width: 65px;

// Transparencies
// # discover backdrop
.footer__214dc,
// # main wrapper
.wrapper_ef3116 {
	background: transparent;
}

// ----------------- STRUCTURE -------------------------
// Shrink guild bar
.wrapper_ef3116.guilds_c48ade {
	width: $guild-bar-width;
}

// Square guild icons
.wrapper_cc5dd2>svg>mask {
	display: none;
}

// Selected / Unread Guild blip on left
// # wrapper
.wrapper__58105 {
	width: inherit;
}

// # Blip base
.item__58105 {
	width: 9px;
	transition: background-color 0.2s;
	border-radius: 0;
	margin-left: 0;
	height: 48px !important;

	// stop it from sliding in from the left
	transform: none !important;

	// Unread Guild blip
	&[style='opacity: 1; height: 8px; transform: none;'] {
		background-color: $alert;
	}
}

// Servers with no icons (just letters)
.wrapper__6e9f8:hover .childWrapper__6e9f8,
.wrapper__6e9f8.selected__6e9f8 .childWrapper__6e9f8 {
	background-color: transparent;
}

// home icon / server list separator
.listItem__650eb:has(.guildSeparator__252b6) {
	display: none;
}

// Folders (god this shit is so fucking confusing)
// # Folder Icon (custom colored)
.visual-refresh .hiddenVisually__27f77 {
	&:hover {
		background: $mid;
	}

	@include boxify($high, $mid, 3px);
}

.folderPreviewWrapper__48112 {
	border-radius: 0;

	.iconInactive_f34534 {
		border-radius: 0;
	}
}

.visual-refresh .svg_cc5dd2 {
	left: -3px;
}

// # Folder Backdrop
.visual-refresh .folderGroupBackground__48112 {
	@include boxify($high, $mid, 3px);

	border-radius: 0;
	left: 9px;
}

// # square out servers in closed folders
.visual-refresh .expandedFolderIconWrapper__48112 {
	margin: 0;
}

.visual-refresh .expandedFolderIconWrapper__48112,
.visual-refresh .folderPreview__48112 {

	&,
	* {
		border-radius: 0 !important;
	}
}

// -------------------------- MISC ---------------------------------------------
// little badge on top-right of server icons that show ongoing streaming/vc
.iconBadge__650eb {
	&.isCurrentUserConnected__650eb {
		background-color: $alert;
		color: $low;
	}

	&.participating-2Z81oO {
		background-color: $alert;
	}
}

// Unread mentions indicators
.unreadMentionsIndicatorBottom_ef3116,
.unreadMentionsIndicatorTop_ef3116 {
	width: $guild-bar-width;
}