/**
 * Social Share
 * Style adjustments for the social sharing nav rendered to the content pages.
 * <link rel="stylesheet" href="https://sc-site.s3.amazonaws.com/contentPages/_styles/socialshare.css">
 * https://cdn.shocho.co/sc-site/contentPages/_styles/socialshare.css (Akamai purge cache)
 * 
 */

:where(:root) {
	--share-fontsize-lg: clamp(1.375rem, 2.0568rem + -1.3636vw, 1.75rem);
	--share-fontsize-md: clamp(1rem, 2.125rem + -1.5vw, 1.375rem);
	--share-fontsize-sm: 1rem;
	--share-button-spacing: 0.5em;
	--share-icon-size:      1em;
	--share-button-size:    1.5em;
	--share-button-padding: clamp(0.1875rem, 0.5893rem + -0.4464vw, 0.375rem);
}

/* Scale social share icon button sizes across breakpoints */
#content #socialShare {
	--share-fontsize: var(--share-fontsize-md);
	font-size: var(--share-fontsize);
}
@media (min-width: 48em) {
	#content #socialShare { --share-fontsize: var(--share-fontsize-sm); }
}
@media (min-width: 75em) {
	#content #socialShare { --share-fontsize: var(--share-fontsize-sm); }
}

#content #socialShare.social.social-share[data-prepend]::before { 
	font-size: .875rem;
	letter-spacing: .01875em;
	padding-right: var(--share-button-spacing);
}

#content .social.social-sml.flex > .btn.btn-social { margin-left: 0; /*padding: var(--share-button-padding);*/ }
#content .social.social-sml.flex > .btn.btn-social + .btn.btn-social { margin-left: var(--share-button-spacing); }
#content #socialShare.social.social-sml > .btn.btn-social {
	height:  var(--share-button-size);
	width:   var(--share-button-size);
	display: -webkit-inline-flex;
	display: inline-flex;
	-webkit-justify-content: center;
			justify-content: center;
	-webkit-align-items: center;
			align-items: center;
}

/* Prevent the social icons from getting distorted */
#content #socialShare.social.social-sml .sc-icon.sc-icon--sml-med { 
	aspect-ratio: 1;
	height: var(--share-icon-size);
	width:  var(--share-icon-size);
}

@media (min-width: 48em) {
	#content #socialShare.social.social-share.flex { 
		-webkit-justify-content: flex-start;
				justify-content: flex-start;
	}
}

/* Fix X (formerly known as Twitter) icon positioning */
#content #socialShare .btn.btn-social.btn-social-twitter > .sc-icon.sc-icon--twitter { right: auto; }