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

// Transparencies
// # main container
.container_c8ffbb,
// # wrapper holding the list itself
.members_c8ffbb,
// # individual member
.member_c8ffbb,
.clickable__91a9d:hover .childContainer__91a9d {
	background: transparent;
}

// slight border lines
.visual-refresh .container_c8ffbb,
// # threads
.visual-refresh .container__7641b {
	border: none;
}

// member hover/select animations
.member_c8ffbb {
	margin: 4px 0;

	// -------------------- STRUCTURE ---------------------------------------
	// container that holds user pfp/name/etc
	.memberInner__5d473 {
		padding-left: 5px;
	}

	// -------------------- ICONS / TEXT ---------------------------------------
	// member name
	.name__5d473 {
		transition: color 0.2s;
	}

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

	// LinkTop is the main body
	.childContainer__91a9d {
		display: flex;
		align-items: center;

		height: 40px;
		padding: 0px;
		background-color: transparent;
	}

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

		box-shadow: 0 0 3px $low;

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

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

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

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

	&.selected__91a9d,
	// When hovering and selecting
	&:hover {

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

		// invert name and icons
		.overflow__82b15,
		.name__5d473 {
			color: $high;
		}
	}

	// When selected
	&.selected__91a9d {

		// the main grower changes to lighter color
		.childContainer__91a9d::before {
			transform: scale(100%, 100%);
			transition: transform 0.4s, opacity 0.4s;
			animation: none;
			background-color: $low;
			opacity: 0.65;
		}

		// grower border shrinks to right
		.childContainer__91a9d::after {
			transition: transform 0.75s;
			transform: scale(0%, 100%);
			transform-origin: left;
		}
	}
}

// member group labels
.visual-refresh .membersGroup_c8ffbb {
	padding-left: 0;
}

//<--->//
//User Profile Sidebar in DMs
.user-profile-sidebar :where(.avatar__75742) {
	left: 0px;
	top: 0px;
}

.user-profile-sidebar .container_ab8609 {
	top: calc(var(--custom-user-profile-banner-height) - -160px);
	left: 8px;
}

.container_ab8609 {
	.outer_ab8609 {
		max-width: 324px;
	}
}
