.social-links {
	margin: 0 0 15px;
}

.social-links__items {
	display: flex;
	flex-flow: row wrap;
	gap: 10px;
	list-style: none outside none;
	margin: 0;
	padding-left: 0;
}

.social-links__item {
	display: grid;
	place-content: center;

	> * {
		grid-area: 1 / 1;
	}
}

.visually-hidden {
	border: 0 !important;
	clip: rect(0, 0, 0, 0) !important;
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	white-space: nowrap !important;
	width: 1px !important;
}

.social-links__title {
	display: block;
}

.social-links__link {
	vertical-align: middle;
	font-size: 18px;
	color: #fff;
	width: 40px;
	height: 40px;
	border-radius: 50px;
	text-align: center;
	line-height: 40px;
	transition: background-color 150ms ease;

	&:hover,
	&:focus {
		text-decoration: none;
		color: #fff;
		transition: background-color 150ms ease;
	}

	&.fa-gab::before,
	&.fa-gettr::before,
	&.fa-mewe::before,
	&.fa-nextdoor::before,
	&.fa-parler::before,
	&.fa-rumble::before,
	&.fa-tiktok::before {
		content: "";
		display: inline-flex;
		background-repeat: no-repeat;
		height: 40%;
		width: 40%;
		justify-content: center;
		vertical-align: middle;
	}

	&.fa {
		color: #fff;
	}

	&.fa-facebook {
		background-color: #19568a;
		font-size: 20px;

		&:hover {
			background-color: #2171b5;
		}
	}

	&.fa-flickr {
		background-color: #ff0084;
		font-size: 20px;

		&:hover {
			background-color: #ff339d;
		}
	}

	&.fa-gab {
		background-color: #21cf7b;

		&::before {
			background-image: url(../resources/Logos/gab_icon.svg);
		}

		&:hover {
			background-color: #3BE995;
		}
	}

	&.fa-gettr {
		background-color: #ff0000;

		&::before {
			background-image: url(../resources/Logos/gettr_icon.svg);
			width: 70%;
		}

		&:hover {
			background-color: #FF3333;
		}
	}

	&.fa-instagram {
		background-color: #e1306c;
		font-size: 20px;

		&:hover {
			background-color: #e75d8c;
		}
	}

	&.fa-linkedin {
		background-color: #0077B5;
		font-size: 20px;

		&:hover {
			background-color: #0099e8;
		}
	}

	&.fa-mewe {
		background-color: #16367b;

		&::before {
			background-image: url(../resources/Logos/mewe_icon.svg);
			width: 60%;
		}

		&:hover {
			background-color: #305095;
		}
	}

	&.fa-nextdoor {
		background-color: #92c83e;
		
		&::before {
			background-image: url(../resources/Logos/nextdoor_icon.svg);
			width: 45%;
		}

		&:hover {
			background-color: #a4e533;
		}
	}

	&.fa-parler {
		background-color: #b91d2c;

		&::before {
			background-image: url(../resources/Logos/parler_icon.svg);
		}

		&:hover {
			background-color: #D33746;
		}
	}

	&.fa-pinterest-p {
		background-color: #bd081c;
		font-size: 20px;

		&:hover {
			background-color: #ee0a23;
		}
	}

	&.fa-rumble {
		background-color: #74a441;

		&::before {
			background-image: url(../resources/Logos/rumble_icon.svg);
		}

		&:hover {
			background-color: #8EBE5B;
		}
	}

	&.fa-tiktok {
		background-color: #25F4EE;

		&::before {
			background-image: url(../resources/Logos/tiktok_icon.svg);
		}

		&:hover {
			background-color: #FE2C55;
		}
	}

	&.fa-tumblr {
		background-color: #34465d;
		font-size: 20px;

		&:hover {
			background-color: #465f7e;
		}
	}

	&.fa-twitter {
		background-color: #469be4;
		font-size: 20px;

		&:hover {
			background-color: #73b3ea;
		}
	}

	&.fa-vimeo {
		background-color: #1ab7ea;
		font-size: 20px;

		&:hover {
			background-color: #49c6ee;
		}
	}

	&.fa-youtube-play {
		background-color: #b91b20;
		font-size: 20px;

		&:hover {
			background-color: #e0272d;
		}
	}

	&.fa-rss {
		background-color: #e16b26;
		font-size: 20px;

		&:hover {
			background-color: #e78a53;
		}
	}

	&.fa-pencil {
		background-color: rgb(0 0 0 / 75%);
		border: 2px solid #fff;
		color: #fff;
		font-size: 12px;
		line-height: 35px;;
		opacity: 0;
		transition: opacity .15s linear;

		&:hover {
			opacity: 1;
			transition: opacity .15s linear;
		}
	}

	&.fa-plus {
		border: 2px solid #fff;
		color: #fff;
		font-size: 15px;
		line-height: 37px;
		opacity: 0.1;
		transition: opacity linear .15s, background-color linear .15s;

		&:hover {
			background-color: rgb(255 255 255 / 10%);
		}
	}
}

.social-links:hover .social-links__link.fa-plus {
	opacity: 1;
	transition: opacity linear .15s, background-color linear .15s;
}