/* SOCIAL NETWORKS */
.nav--socialnetworks {
	.nav__item + .nav__item {
		margin-left: 7px
	}

	.nav__link {
		display: block;
		width: 16px;
		height: auto;
		overflow: hidden;
		transition: color 0.2s;

		@media (min-width: @responsiveDesktopXL) {
			width: calc(16px * 1.5);
		}

		&:before {
			content: '';
			display: block;
			padding-top: 100%;
		}

		svg {
			position: absolute;
			top: 50%;
			left: 0;
			display: block;
			width: 100%;
			height: auto;
			fill: currentColor;
			transform: translateY(-50%);
		}
	}
}

@media (max-width: @responsiveDesktop) {
	.nav--socialnetworks {
		position: absolute;
		left: 20px;
		bottom: 20px;
		max-width: 50%;

		.nav__item + .nav__item {
			margin-left: 10px
		}

		.nav__link {
			width: 24px;

			.no-touch &:hover {
				color: @colorWhite
			}
		}
	}
}

.no-touch {
	.nav--socialnetworks {
		.nav__item {
			.nav__link {
				&:hover {
					color: @colorBlack
				}

				&.twitter:hover {
					color: @colorTwitter
				}

				&.facebook:hover {
					color: @colorFacebook
				}

				&.linkedin:hover {
					color: @colorLinkedin
				}

				&.instagram:hover {
					color: @colorInstagram
				}
			}
		}
	}
}

.mobile,
.tablet {
	.nav--socialnetworks {
		.nav__item {
			.nav__link {
				color: @colorFontDark
			}

			@media (prefers-color-scheme: dark) {
				.nav__link {
					color: @colorFont
				}
			}
		}
	}
}