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

// Transparencies
// # main containers
.sidebar_c48ade,
.theme-dark .container__2637a,
// # unread message blip
.unread__2ea32,
// # user profile

.panels_c48ade,
.theme-dark .content__37e49 {
	background: transparent;
}


// ummm... this changes a bunch of places to squares... which is pretty convenient...
.wrapper__44b0c {
	border-radius: 0;

	foreignObject {
		mask: none;
	}
}

// # weird scrollbar in bottom left corner under profile
.visual-refresh .sidebar_c48ade:after {
	display: none;
}

.header_f37cb1 {
	box-shadow: none;
}

// Unread messages notification
.bar__7aaec,
// ... the other Unread messages notification (shows up when scrolled down and there's an unread channel above)
.bar__3b95d {
	.barText__7aaec {
		color: $high !important;
	}

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

// sidebar slight lines
.visual-refresh .header_f37cb1,
.visual-refresh .sidebarList_c48ade {
	border: none;
}

// User info
button.button__67645 {
	@include buttonify(transparent, $low, $low, $high);

	.lottieIcon__5eb9b {
		--__lottieIconColor: currentColor !important;
	}
}

// used to scale up lock / warning icons etc
@mixin scaleChanIconAndColor($aria-label, $color-icon) {
	.iconContainer__2ea32[aria-label='#{$aria-label}'] .icon__2ea32 {
		color: transparent;

		path {
			fill: none;

			&:first-child {
				fill: $color-icon;
				transform: translate(-26px, 1px) scale(200%);
			}
		}
	}
}

// fix the stupid hover/nonhover squishing
:where(.visual-refresh) .iconContainer__2ea32 {
	width: inherit;
}

// Channel hover/select animations
.wrapper__2ea32 {
	padding: 0;
	margin-left: 15px;

	// -------------------- ICONS / TEXT ---------------------------------------
	// Channel name
	.name__2ea32 {
		transition: color 0.2s;
	}

	// Square icon
	.iconContainer__2ea32 {
		display: flex;
		align-items: center;
		justify-content: center;

		.icon__2ea32 {
			transition: color 0.2s, background-color 0.2s;
			height: 12px;
			width: 12px;
			z-index: 1;
			background-color: $low;
			color: $high;
		}

		// Text channels have no hashtag
		&[aria-label='#{$aria-label-text-active-threads}'] .icon__2ea32,
		&[aria-label='Text icon'] .icon__2ea32 {
			color: $low;
		}
	}

	// Private text channels only show lock
	@include scaleChanIconAndColor($aria-label-text-limited, $high);
	// nsfw channels show only warning
	@include scaleChanIconAndColor($aria-label-text-age-restricted, $high);

	// Voice icon and lock icons should show
	&.modeLocked__2ea32,
	&.typeVoice__2ea32 {
		.icon__2ea32 {
			color: $high;
		}
	}

	// Channel icons on side
	.actionIcon_c69b6d {
		color: $high;
	}

	// ------------------------ STRUCTURE --------------------------------------

	// VERY IMPORTANT. Padding must be zero or we get subpixel errors
	.link__2ea32 {
		margin: 9px 0px;
		padding: 0;
	}

	// Not sure?
	.content__65844 {
		height: 28px;
		margin-left: 0;
		border-radius: 0;
		justify-content: center;
		padding: 0px 8px;
	}

	// ------------------- TEXT+VOICE CHANNELS ---------------------------------

	// LinkTop is the main body
	.linkTop__2ea32 {
		height: 24px;
		padding: 0px 6px;
		background-color: $high-mid;
	}

	// the main grower
	.linkTop__2ea32::before {
		position: absolute;
		content: '';
		width: 100%;
		height: 100%; // 28px
		animation: pulsingBackground 2.5s infinite;

		box-shadow: 0 0 3px $low;

		transition: transform 0.4s;
		transform: scaleX(0);
		transform-origin: left;
	}

	// grower border
	.linkTop__2ea32::after {
		position: absolute;
		content: '';
		width: 100%;
		height: 32px;
		pointer-events: none;

		box-shadow: 0 1px $low, 0 -1px $low;

		transition: transform 0.4s;
		transform: scale(0, 85%);
		transform-origin: left;
	}

	&.modeConnected__2ea32,
	&.modeSelected__2ea32,
	// When hovering and selecting
	&:hover {

		// grow border and body
		.linkBottom__2ea32::before,
		.linkTop__2ea32::before,
		.linkTop__2ea32::after {
			transform: scale(100%, 100%);
		}

		// invert name and icons
		.name__2ea32 {
			color: $high;
		}

		.iconContainer__2ea32 {
			.icon__2ea32 {
				background-color: $high;
				color: $high;
			}

			&[aria-label='#{$aria-label-voice}'] .icon__2ea32,
			&[aria-label='#{$aria-label-voice-limited}'] .icon__2ea32 {
				color: $low;
			}
		}

		// Private text channels only show lock
		@include scaleChanIconAndColor($aria-label-text-limited, $low);
		// nsfw channels show only warning
		@include scaleChanIconAndColor($aria-label-text-age-restricted, $low);

		.actionIcon_c69b6d path {
			transition: opacity 0.5s;
			opacity: 1;
			fill: $high;
		}

		&.modeLocked__2ea32,
		&.typeVoice__2ea32 {
			.icon__2ea32 {
				color: $low;
			}
		}
	}

	// When selected
	&.modeConnected__2ea32,
	&.modeSelected__2ea32 {

		.linkBottom__2ea32::before,
		.linkTop__2ea32::before {
			transform: scale(100%, 100%);
			transition: transform 0.4s, opacity 0.4s;
			animation: none;
			background-color: $low;
			opacity: 0.65;
		}

		.linkTop__2ea32::after {
			transition: transform 0.75s;
			transform: scale(0%, 100%);
			transform-origin: right;
		}
	}

	// Unread channels will override
	.unread__2ea32.unreadImportant__2ea32~div {
		.icon__2ea32 {
			color: $alert;
			background-color: $alert;
		}

		.name__2ea32 {
			color: $alert;
		}
	}

	// Muted channels
	&.modeMuted__2ea32 {
		opacity: 50%;
	}

	// ------------------- SELECTOR ARROW ------------------------------------
	// Hovering selector
	&::before {
		content: '';
		position: absolute;
		left: -30px;
		top: 50%;
		transform: translateY(-50%);
		animation-fill-mode: forwards;
		width: 24px;
		/* Adjust width as needed */
		height: 22px;
		/* Adjust height as needed */
		background-image: $selector-img; // overridded in light/dark/night files
		background-size: cover;
		background-repeat: no-repeat;

		transition: opacity 0.175s ease-in-out;
		opacity: 0;
	}

	&:not(.modeSelected__2ea32):hover::before {
		opacity: 1;
	}

	// Selected Channel
	// tbh this is kind of magic i forgot how it works
	// # white arrow that fades in
	&.modeSelected__2ea32::before {
		content: '';
		position: absolute;
		left: -30px;
		top: 50%;
		transform-origin: top;
		transform: translateY(-50%);
		width: 24px;
		/* Adjust width as needed */
		height: 22px;
		/* Adjust height as needed */
		background-image: $selector-img-invert; // overridded in light/dark/night files

		opacity: 1;

		background-size: cover;
		background-repeat: no-repeat;
	}

	// # black arrow that fades out into white
	&.modeSelected__2ea32::after {
		content: '';
		position: absolute;
		left: -30px;
		top: 50%;
		transform: translateY(-50%);
		width: 24px;
		/* Adjust width as needed */
		height: 22px;
		/* Adjust height as needed */
		background-image: $selector-img; // overridded in light/dark/night files
		animation: fade-out 0.25s;
		animation-fill-mode: forwards;
		background-size: cover;
		background-repeat: no-repeat;
	}
}

.list_c3cd7d {
	//Container that holds users in the VC
	margin-top: 1.5px; //fix for some awkward bumping between the borders
}

// ------------------- SELECTOR BACKDROP ---------------------------------------
.container__2637a {

	// selector backdrop
	.content_d125d2::before {
		content: '';
		position: absolute;
		left: 0px;
		width: 2px;
		height: 100%;
		bottom: 0px;
		border-radius: 0;
		padding: 4px 2.5px 4px 2.5px;
		margin-left: -1px;
		box-shadow: -3px 0 0 $mid, -15px 0 0 transparent, -14px 0 0 $mid, -18px 2px 0 transparent;
	}

	// selector backdrop for threads
	.container__5b40b::before {
		content: '';
		position: absolute;
		left: 25px;
		top: 0px;
		height: 100%;
		border-radius: 0;
		padding: 0 2.5px;
		margin-left: -1px;
		box-shadow: -3px 0 0 $mid, -15px 0 0 transparent, -14px 0 0 $mid, -18px 2px 0 transparent;
	}
}

// ------------------- THREADS --------------------------------
.spineBorder__5b40b {
	background: transparent;
}

.spine__5b40b {
	z-index: 2;
	left: 6px;
	top: 6.5px;

	width: 12px !important;
	height: 12px !important;
	background-color: $low;

	&[style='transform: rotateX(180deg) translateY(-9px);'] {
		display: none;
	}

	&:has(~ .typeThread__2ea32:hover),
	&:has(~ .typeThread__2ea32.modeSelected__2ea32) {
		background-color: $high;
		color: $high;
	}
}

.typeThread__2ea32 .link__2ea32 {
	margin-left: 0;
}

.typeThread__2ea32 .name__2ea32.overflow__82b15 {
	left: 24px;
}

// ---------------------- MISC ----------------------------------------

// Banner at the top of server channel list
.hasBanner_f37cb1.bannerVisible_f37cb1 {
	z-index: 2;
}

.scroller__629e4 {

	//container that holds actual channels
	.content_d125d2 {
		margin-left: 20px;
		//padding-left: 15px;
		//background-color: $mid-trans;
	}
}

.visual-refresh .wrapper__260e1 {
	color: $high;
	border-radius: 0;
	border: 1px solid $mid;
	height: 18px;

	.users__260e1 {
		background-color: $low;
		padding-left: 4px;
		z-index: 1;
	}

	.total__260e1 {
		padding: 0 3px 0 0;
		background-color: $alert;
		color: $high;
		z-index: 2;
	}

	.total__260e1::after {
		border-right-color: $alert;
	}
}