@use '../assets';

#app-mount {
	.scale-3UGUBw {
		transform: none !important;
		transition: none !important;
	}
	#guild-header-popout {
		position: fixed;
		top: calc(var(--titlebar-height) + var(--toolbar-height));
		left: 0;
		padding: 0;
		border-radius: 0;
		box-shadow: none;
		height: calc(100vh - var(--toolbar-height) - var(--titlebar-height));
		width: calc(var(--sidebar-width) + var(--noasw-base));
		background: var(--background);
		border-right: 1px solid var(--base-border);
		.scroller-nxCRu_ {
			padding: 0;
			&::-webkit-scrollbar {
				display: none;
			}
		}
		.labelContainer-2vJzYL {
			justify-content: flex-start;
		}
		.item-5ApiZt {
			margin: 0;
			padding: 0 var(--spacing);
			color: var(--text-normal);
			border-radius: 0;
			font-size: var(--font-size);
			font-weight: var(--font-weight-normal);
			height: var(--item-height);
			cursor: var(--cursor);
			box-sizing: border-box;
			.icon-3XHs8t,
			.iconContainer-Ksy8Oj {
				width: 14px;
				height: 14px;
				foreignObject {
					mask: none;
				}
			}
			.badge-3lkhh2 {
				border-radius: 50px;
				width: 4px;
				height: 4px;
				background: rgb(var(--status-red));
				right: -2px;
			}
			.iconContainer-Ksy8Oj {
				order: -1;
				margin: 0 var(--spacing) 0 0;
			}
			&:hover {
				color: var(--text-focus);
			}
			&#guild-header-popout-premium-subscribe {
				color: rgb(var(--discord-pink));
				.icon-3XHs8t {
					color: rgb(var(--discord-pink));
					path[d='M4 0L0 4V8L4 12L8 8V4L4 0ZM7 7.59L4 10.59L1 7.59V4.41L4 1.41L7 4.41V7.59Z'] {
						d: path(assets.$path_flame);
						transform: scale(0.7);
						& ~ path {
							display: none;
						}
					}
				}
				&:hover {
					color: rgb(var(--discord-pink));
				}
			}
			&#guild-header-popout-invite-people {
				color: var(--text-link);
				&:hover {
					color: var(--text-link);
				}
				path {
					d: path(assets.$path_person_add);
					transform: scale(1.4);
				}
			}
			&#guild-header-popout-leave {
				color: rgb(var(--status-red));
				&:hover {
					color: rgb(var(--status-red));
				}
			}
			&#guild-header-popout-notifications path {
				d: path(assets.$path_bell);
				transform: scale(1.4) translateX(1px) translateY(1px);
			}
			&#guild-header-popout-settings path {
				d: path(assets.$path_gear);
				transform: scale(1.4) translateX(2px);
			}
			&#guild-header-popout-create-channel path {
				d: path(assets.$path_add);
				transform: scale(1.4) translateX(2px);
			}
			&#guild-header-popout-create-category path {
				d: path(assets.$path_repo);
				transform: scale(1.2) translateX(4px) translateY(2px);
			}
			&#guild-header-popout-privacy path {
				d: path(assets.$path_shield);
				transform: scale(1.2) translateX(2px) translateY(2px);
				fill-rule: evenodd;
			}
			&#guild-header-popout-change-nickname path {
				d: path(assets.$path_pencil);
				transform: scale(1.3) translateX(2px) translateY(1px);
				fill-rule: evenodd;
			}
			&#guild-header-popout-leave path {
				d: path(assets.$path_link);
				transform: scale(1.4) translateX(2px) translateY(1px);
				fill-rule: evenodd;
			}
			&.focused-3qFvc8 {
				background: unset;
			}
			&:hover {
				background-color: var(--background-modifier-hover);
			}
			&:active {
				background-color: var(--background-modifier-active);
			}
		}
		&::before {
			content: '';
			position: fixed;
			top: var(--titlebar-height);
			left: calc(var(--sidebar-width) + var(--noasw-base));
			width: 100vw;
			height: 100vh;
			background: var(--backdrop);
			z-index: -1;
			pointer-events: none;
		}
	}
}
