.menu-social__items {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	justify-content: start;
	margin: 0 auto;
	padding: 0;
	gap: var(--spacing-20) var(--spacing-10);
}

.menu-social__item {
	display: block;
}

.menu-social__link {
	background-color: var(--fog);
	transition: all 0.3s;
	display: flex;
	width: 46px;
	height: 46px;
	padding: var(--spacing-10);
	justify-content: center;
	aspect-ratio: 1 / 1;
	border-radius: 999px;

	&:hover,
	&:focus-within {
		background-color: var(--gray-dark);
	}
}

.menu-social__icon {
	svg {
		height: 15px;
		width: auto;
	}

	path {
		fill: var(--carbon);

		.menu-social__link:hover &,
		.menu-social__link:focus-within & {
			fill: var(--teal-contrast);
		}
	}
}