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

#app-mount {
	.guilds_c48ade {
		[class*='pill'] {
			width: 4px;
			margin-left: 0;
			left: calc((var(--server-container) / 2) - (var(--server-size) / 2));
			z-index: 1;
			height: var(--server-size);
			span {
				height: var(--pill-height) !important;
				width: 100% !important;
				transform: scale(0, 1) !important;
				transition: 0.15s var(--transition) !important;
				margin-left: 0;
				border-radius: var(--rounded-high);
			}
			@for $i from 0 through 8 {
				span[style*='height: #{$i}'] {
					transform: scale(1, 0.5) !important;
					background: var(--pill-unread);
				}
			}
			// Hovered
			@for $i from 9 through 20 {
				span[style*='height: #{$i}'] {
					transform: scale(1, 0.7) !important;
					background: var(--pill-hovered);
				}
			}
			// Selected
			@for $i from 21 through 40 {
				span[style*='height: #{$i}'] {
					transform: scale(1, 1) !important;
					background: var(--accent);
				}
			}
		}
	}
	.listItem__650eb {
		margin: 0 0 4px;
		width: var(--server-container);
		position: relative;
		foreignObject {
			mask: none;
			border-radius: var(--rounded);
			box-sizing: border-box;
		}
	}
	.wrapper__6e9f8 {
		border-radius: var(--rounded);
		cursor: var(--cursor);
		width: var(--server-size);
		height: var(--server-size);
	}
	.wrapper_cc5dd2 {
		cursor: var(--cursor);
	}
	.wrapper__6e9f8 {
		position: relative;
		transition: box-shadow 0.15s var(--transition);
		&:hover,
		&.selected__6e9f8 {
			box-shadow: var(--server-hover-selected);
		}
	}

	.svg-2zuE5p {
		border-radius: 50%;
		box-sizing: border-box;
		width: var(--server-size);
		height: var(--server-size);
		foreignObject {
			width: 100%;
			height: 100%;
		}
	}

	.icon__6e9f8,
	.childWrapperNoHoverBg__6e9f8 {
		width: var(--server-icon-size);
		height: var(--server-icon-size);
		border-radius: var(--server-icon-shape);
		position: relative;
		z-index: 2;
	}

	.wrapper__6e9f8 svg {
		width: 75%;
		height: 75%;
		mask: url(mono.$home) center/cover;
		background: var(--interactive-normal);
		path {
			display: none;
		}
	}

	.childWrapperNoHoverBg__6e9f8 {
		background: transparent;
		font-weight: var(--font-weight-semibold);
	}
	.wrapper__6e9f8.selected_ae80f7 .childWrapperNoHoverBg__6e9f8 {
		background: transparent;
		color: var(--text-primary);
	}

	.circleIconButton__5bc7e {
		background: transparent;
		&.selected__5bc7e {
			background: transparent;
		}
	}

	.blobContainer_e5445c:active {
		transform: none;
	}
}
