@import "_mixins";

.community-links {
	> a {
		display: flex;
		margin-top: 1.2rem;
		margin-bottom: 1.2rem;
		align-items: center;
		gap: 0.6rem;
		text-decoration: none;
		width: fit-content;
		border-radius: 6.2rem;
		padding: 0.5rem 1.3rem;
		background-color: rgb(37 175 244 / 10%);
		cursor: pointer;

		&.github,
		&.mastodon,
		&.x,
		&.blueSky,
		&.discord {
			width: 9.3rem;
		}

		@media only screen and (max-width: 1200px) {
			&.discord {
				background-color: var(--sl-discord);
				color: var(--sl-community-link);
			}
		}

		&.discord:hover {
			background-color: var(--sl-discord);
			color: var(--sl-community-link);
		}

		@media only screen and (max-width: 1200px) {
			&.x,
			&.github {
				background-color: black;
				color: var(--sl-community-link);
			}
		}
		&.x:hover,
		&.github:hover {
			background-color: black;
			color: var(--sl-community-link);
		}

		@media only screen and (max-width: 1200px) {
			&.mastodon {
				background-color: var(--sl-mastodon);
				color: var(--sl-community-link);
			}
		}
		&.mastodon:hover {
			background-color: var(--sl-mastodon);
			color: var(--sl-community-link);
		}

		@media only screen and (max-width: 1200px) {
			&.blueSky {
				background-color: var(--sl-blueSky);
				color: var(--sl-community-link);
			}
		}
		&.blueSky:hover {
			background-color: var(--sl-blueSky);
			color: var(--sl-community-link);
		}

		> p {
			margin: 0;
		}
	}
}

.community {
	height: 44rem;
	margin-top: 9.4rem !important;
	position: relative;

	.community-grid {
		z-index: -1;
		position: absolute;
		content: "";
		inset: 0;
		background-image:
			linear-gradient(to right, var(--sl-color-gray-6) 1px, transparent 1px),
			linear-gradient(to bottom, var(--sl-color-gray-6) 1px, transparent 1px);
		background-position: top center;
		background-size: 20px 20px;
		-webkit-mask-image: radial-gradient(circle at 100%, white, transparent 80%);
		mask-image: radial-gradient(circle at 100%, white, transparent 80%);
	}
}

.connect {
	gap: 1.2rem;
	width: 31rem;
	position: absolute;
	right: -10rem;
	top: 2rem;
}

.contributor-row {
	display: flex;
	justify-content: end;
	gap: 1.2rem;

	.contributor-avatar {
		margin: 0rem;
		width: 4.4rem;
		height: 4.4rem;
		border-radius: 50rem;
		object-fit: cover;
	}
}

.community-connect {
	display: flex;
	flex-direction: column;
	align-items: center;

	.community-description {
		font-size: 1.5rem;
		text-align: center;
	}
}

@media only screen and (max-width: 1200px) {
	.community {
		height: 60rem;
	}

	.connect {
		z-index: -1;
		opacity: 0.2;
		right: 0;
	}
}

@media only screen and (max-width: 700px) {
	div > img.contributor-avatar {
		width: 3.4rem;
		height: 3.4rem;
	}

	div.community {
		height: 56rem;
	}

	div.connect {
		right: 1rem;
	}
}

@media only screen and (max-width: 600px) {
	div > img.contributor-avatar {
		width: 3rem;
		height: 3rem;
	}

	div.connect {
		right: 0rem;
	}
}

@media only screen and (max-width: 550px) {
	div.community {
		height: 40rem;
	}

	.connect {
		display: none;
	}
}
