@import '../../style/variables.scss';

$color_1: var(--black25);
$color_2: var(--grey5E);
$color_3: var(--primary);
$font-family_1: 'Avenir Next';
$background-color_1: var(--primary);
$background-color_2: var(--white);
$background-color_3: var(--bgF4);

.f-social-list {
	display: inline-flex;
	align-items: center;
	margin: 0;
	row-gap: 10px;
	column-gap: 20px;
	li {
		a {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 60px;
			height: 60px;
			border-radius: 100%;
			border: 1px solid var(--primary);
			&:hover {
				background-color: $background-color_1;
				svg {
					path {
						transition: all 0.4s;
						fill: var(--white);
					}
				}
				i {
					background-color: $background-color_2;
					transition: all 0.4s;
				}
			}
			i {
				// background-color: var(--primary);
				// -webkit-mask-repeat: no-repeat;
				// -webkit-mask-position: center;
				// -webkit-mask-size: contain;
				display: block;
				width: 24px;
				height: 24px;
				transition: all 0.4s;
			}
			svg {
				// background-color: var(--primary);
				// -webkit-mask-repeat: no-repeat;
				// -webkit-mask-position: center;
				// -webkit-mask-size: contain;
				display: block;
				width: 24px;
				height: 24px;
				transition: all 0.4s;
				path {
					transition: all 0.4s;
				}
			}
		}
	}
}
@media (max-width: 1470px){
	.f-social-list {
		li {
			a {
				width: 34px;
				height: 34px;
				i {
					width: 18px;
					height: 18px;
				}
				svg {
					width: 18px;
					height: 18px;
				}
			}
		}
		row-gap: 6px;
		column-gap: 10px;
	}
}