// Seperated to use individually, but is still included.

:root {
	--server-unread-colour: rgb(255, 255, 255);
	--server-hover-colour: rgb(255, 255, 255);
	--server-selected-colour: var(--accent, rgb(0, 231, 169));
	--server-spacing: 16px;
	--server-glow-intensity: var(--glow-intensity, 1);
	--server-ring-offset: 6px;
}

#app-mount {
	.folderGroup__48112 {
		--server-folder-offset: 6px;

		ul.stack_dbd263[role='group'] {
			height: auto !important;
			overflow: visible !important;
			.listItem__650eb {
				--server-folder-offset: 0px;
			}
		}
	}

	.scroller_ef3116 > div[style]:not([class]) {
		margin-bottom: var(--server-spacing);
	}

	// Container
	.listItem__650eb {
		width: 100%;
		margin-bottom: var(--server-spacing);
		[class*='pill'] {
			--__ring-size: calc(
				((var(--server-icon-size, 45) * 1px) - 5px) + var(--server-folder-offset, 0px) + var(--server-ring-offset)
			);
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: var(--__ring-size);
			height: var(--__ring-size);
			overflow: visible;
			margin-left: -2px;
			.item__58105 {
				height: 100% !important;
				width: 100%;
				margin: 0;
				border-radius: 50%;
				background: transparent;
				border: 2px solid transparent;
				box-shadow: none;
				transform: none !important;
				transition: var(--transition);
				transition-property: box-shadow;
			}
			@for $i from 0 through 8 {
				span[style*='height: #{$i}'] {
					box-shadow: 0
						0
						calc(var(--server-glow-intensity) * 15px)
						calc(var(--server-glow-intensity) * 5px)
						hsl(from var(--server-unread-colour) h s l / 0.25);
					border-color: hsl(from var(--server-unread-colour) h s l);
				}
			}
			// Hovered
			@for $i from 9 through 20 {
				span[style*='height: #{$i}'] {
					border-color: hsl(from var(--server-hover-colour) h s l);
					box-shadow: 0
						0
						calc(var(--server-glow-intensity) * 15px)
						calc(var(--server-glow-intensity) * 5px)
						hsl(from var(--server-hover-colour) h s l / 0.25);
				}
			}
			// Selected
			@for $i from 21 through 40 {
				span[style*='height: #{$i}'] {
					transform: scale(1) !important;
					border-color: hsl(from var(--server-selected-colour) h s l);
					box-shadow: 0
						0
						calc(var(--server-glow-intensity) * 15px)
						calc(var(--server-glow-intensity) * 5px)
						hsl(from var(--server-selected-colour) h s l / 0.25);
				}
			}
		}
	}

	// Active state
	.blobContainer_e5445c,
	.listItemWrapper_dfb2f8 {
		transition: var(--transition, 0.15s ease);
		transition-property: transform;
		&:active {
			transform: scale(0.9);
		}
	}

	.svg_cc5dd2 foreignObject {
		border-radius: 50%;
		mask: none !important;
	}
}

// Hide Broken Discoverable Servers Ring
.pill__5bc7e {
	display: none;
}
