@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;

.star-icon {
	fill: #000;
}

.jetpack,
.checkmark-icon {
	fill: var(--jp-green-primary);
}

.socialIcon {
	fill: gb.$gray-700;

	&.bluesky {
		fill: var(--color-bluesky);
	}

	&.facebook {
		fill: var(--color-facebook);
		// Add some specificity to override the border-radius on Jetpack settings page
		&:global(.social-logo) {
			border-radius: 50%;
		}
	}

	&.twitter {
		fill: var(--color-twitter);
	}

	&.linkedin {
		fill: var(--color-linkedin);
	}

	&.tumblr {
		fill: var(--color-tumblr);
	}

	&.google {
		fill: var(--color-gplus);
	}

	&.mastodon {
		fill: var(--color-mastodon);
	}

	&.nextdoor {
		fill: var(--color-nextdoor);
		// Add some specificity to override the border-radius on Jetpack settings page
		&:global(.social-logo) {
			border-radius: 50%;
		}
	}

	&.instagram {
		fill: var(--color-instagram);
	}

	&.whatsapp {
		fill: var(--color-whatsapp);
	}

	&.threads {
		fill: var(--color-threads);

		&:global(.social-logo) {
			border-radius: 40%;
		}
	}
}

