/** == Social (_social.scss) == */
// Social icons and sharing buttons


/** Common settings  **/
$social_color: (
	vk:        #517397,
	facebook:  #3B5998,
	twitter:   #1DA1F2,
	instagram: #B7308C,
	pinterest: #DE2127,
	youtube:   #E21D17,
	telegram:  #2CA5E0,
	whatsapp:  #69BD35,
	viber:     #774C98,
	ok:        #F58220
);

@function social_color($key) {
	@if map-has-key($social_color, $key) {
		@return map-get($social_color, $key);
	}

	@warn "Unknown '#{$key}' in $social_color.";
	@return null;
}

@mixin social-button-link($button-size, $icon-size) {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	vertical-align: middle;
	transition: color 0.3s, background 0.3s, border-color 0.3s, opacity 0.3s;
	text-decoration: none;
	width: $button-size;
	height: $button-size;
	padding: ($button-size - $icon-size)/2 0;
}


/** Social links **/
.knd-social-links {
	list-style-type: none;
	margin: 0;
	padding: 0;

	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: flex-end;
	
	.links-right & {
		@include for(medium-screens) {
			justify-content: flex-end;
		}
	}

	li {
		text-align: center;

		a {
			border-radius: 50%;
			@include social-button-link(46px, 22px);
			span { display: none; }
		}

		.svg-icon {
			display: block;
			vertical-align: middle;
			width: 20px;
			height: 20px;
		}

		.image-icon-mask {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 20px;
			height: 20px;

			.image-icon {
				display: block;
				width: 20px;
				height: 20px;
				transition: opacity .3s;
				background-color: var(--knd-color-base);
				mask-image: var(--hms-social-icon);
				mask-size: contain;
				mask-repeat: no-repeat;
				mask-position: center;
			}
			

			transition: opacity .3s;
		}

		a:hover {
			.image-icon {
				opacity: .7;
			}
		}
	}
}


/**  Sharing **/
.social-likes {
	@include cf;
}

.social-likes__widget {
	cursor: pointer;

	a {
		@include social-button-link(44px, 22px);
	}

	a {
		border-radius: 50rem;
		border: 1px solid #e6e6e6;
		background-color: #fff;
		display: flex;
		width: 40px;
		height: 40px;
		padding: 0;
		justify-content: center;
		align-items: center;

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

		.svg-icon {
			fill: #4d606a;
			width: 20px;
			height: 20px;
		}
	}

	+ .social-likes__widget {
		margin-top: 15px;
	}
	
	.sh-text { display: none; }
	
	.svg-icon {
		display: block;
		vertical-align: moddle;
		fill: #ffffff;
		vertical-align: middle;
		width: 22px;
		height: 22px;
	}
}

.entry-content {
	.wp-block-social-links {
		padding-left: 0;
		padding-right: 0;
		text-indent: 0;

		> * {
			margin: 0;
		}
	}
}
