@use '../mixins';
@use '../assets/mono';

#app-mount {
	.panels_c48ade {
		background: transparent;
		border: none;

		// User area
		& > .container__37e49 {
			box-sizing: border-box;
			background: var(--bg-main);
			padding: 8px 14px;
			margin-left: 11px;
			margin-bottom: 12px;
			width: calc(var(--channels-width) - 12px);
			border-radius: var(--rounded) 0 0 var(--rounded);
			border: 1px solid var(--border-high);
			border-right: none;
			height: var(--bottombar-height);
			z-index: 1;
			& > .flex__7c0ba {
				gap: 8px;
				height: 75%;
				width: 100%;
			}
			button {
				@include mixins.btn;
				@include mixins.btnSecondary;
				flex: 1;
				svg {
					width: 18px;
					height: 18px;
				}
			}
			[class*="withTagAsButton"] { //fix game activity toogle on Vencord
				min-width: min-content !important;
			}
			.avatarWrapper__37e49 {
				padding: 6px;
				min-width: unset;
				margin: 0 8px 0 0;
				&:hover {
					background: transparent;
					box-shadow: var(--server-hover-selected);
				}
			}
			.nameTag__37e49 {
				display: none;
			}
		}
		.container_e131a9 {
			translate: 0 0;
			&:hover {
				opacity: 1;
				visibility: visible;
			}
		}
	}

	// Voice connected
	.container_e131a9 {
		margin: 0 11px;
		left: 11px;
		right: 12px;
		bottom: 0;
		border-radius: var(--rounded) var(--rounded) 0 0;
		background: var(--bg-main);
		padding: 0;
		border: 1px solid var(--border-high);
		border-bottom: none;
		flex-direction: column-reverse;
		display: flex;
		z-index: 1;
		& > .flex__7c0ba {
			padding: 8px 8px 11px 8px;
			position: relative;
			z-index: 2;
			&::before {
				content: '';
				position: absolute;
				inset: 0;
				background: var(--bg-main);
				border-radius: var(--rounded) var(--rounded) 0 0;
				z-index: -1;
			}
			& > .flex__7c0ba {
				gap: 4px;
				button {
					@include mixins.btn;
					@include mixins.btnSecondary;
				}
			}
		}
		.voiceUsers__68617 {
			gap: 8px;
		}
		& > .voiceUsers_e131a9 {
			padding: 8px 8px 0px 8px;
			position: relative;
			z-index: 2;
			overflow: hidden !important;
			margin: 0;
			&::before {
				content: '';
				position: absolute;
				inset: 0;
				background: var(--bg-main);
				border-radius: var(--rounded) var(--rounded) 0 0;
				z-index: -1;
			}
		}
		&:hover .actionButtons_e131a9 {
			bottom: calc(100% - 8px);
			opacity: 1;
			visibility: visible;
			transition-delay: 0.45s;
		}
		// a[href^='/channel'] {
		// 	display: none;
		// }
	}
	.wrapper_e131a9 + .container__37e49 {
		border-radius: 0 0 0 var(--rounded);
	}
	.inner_e131a9 {
		position: relative;
	}
	.rtcConnectionStatus_c0cb95 {
		display: flex;
		align-items: center;
		.button__201d5 {
			padding: 0;
			margin-left: 4px;
		}
	}
	.ping_c0cb95 {
		width: 24px;
		height: 24px;
	}
	.actionButtons_e131a9 {
		position: absolute;
		bottom: 0;
		width: calc(100% - 16px);
		background: var(--bg-main);
		border-radius: var(--rounded) var(--rounded) 0 0;
		border: 1px solid var(--border-high);
		border-bottom: none;
		padding: 8px;
		left: -1px;
		visibility: hidden;
		transition: 0.15s var(--transition) 0s;
		z-index: 0;
		.button_e131a9.buttonColor_e131a9.colorBrand-I6CyqQ {
			@include mixins.btn;
			@include mixins.btnSecondary;
		}
		.button_e131a9 {
			height: 100%;
		}
		.lottieIcon__5eb9b svg {
			--fluent-icons-color: black;
		}
	}
	.activityPanel_c48ade {
		border: none;
		background: transparent;
		padding: 8px 16px;
		&:has(+ .wrapper_e131a9:not(:empty)) {
			z-index: 0;
			.wrapper_e131a9 > & {
				margin-bottom: calc(100% - 3px);
			}
		}
	}
}
