/* Shareaid base styles */
:root{
	--shareaid-primary: #2271b1;
	--shareaid-hover: #135e96;
	--shareaid-text: #ffffff;
}

.shareaid-wrapper{
	position: relative;
	display: inline-block;
}

/* Ensure wrapper doesn't break layout for block images */
.shareaid-wrapper > img{
	display: block;
}

/* Button */
.shareaid-btn{
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: .45em;
	border: none;
	border-radius: 999px;
	padding: .45em .9em;
	font: 500 14px/1.1 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
	color: var(--shareaid-text);
	background: var(--shareaid-primary);
	cursor: pointer;
	box-shadow: 0 6px 16px rgba(0,0,0,.15);
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity .18s ease, transform .18s ease, background .18s ease;
	z-index: 3;
}

/* Sizes */
.shareaid-size-s{ font-size: 12px; padding: .35em .7em; }
.shareaid-size-m{ font-size: 14px; padding: .45em .9em; }
.shareaid-size-l{ font-size: 16px; padding: .55em 1.1em; }

/* Icon (Pinterest P) */
.shareaid-icon{
	width: 1.1em; height: 1.1em;
	display: inline-block;
	background: currentColor;
	-webkit-mask: url('../svg/pinterest.svg') no-repeat center / contain;
	mask: url('../svg/pinterest.svg') no-repeat center / contain;
}

/* Hover visibility on desktop by default */
.shareaid-wrapper:hover .shareaid-btn{ opacity: 1; transform: translateY(0); }
.shareaid-btn.always-visible{ opacity: 1; transform: translateY(0); }

/* Positions */
.shareaid-btn.pos-left-top{ top: 8px; left: 8px; }
.shareaid-btn.pos-right-top{ top: 8px; right: 8px; }
.shareaid-btn.pos-bottom-left{ bottom: 8px; left: 8px; }
.shareaid-btn.pos-bottom-right{ bottom: 8px; right: 8px; }
.shareaid-btn.pos-center{ top: 50%; left: 50%; transform: translate(-50%,-50%); }
.shareaid-btn.pos-top{ top: 8px; left: 50%; transform: translate(-50%,0); }
.shareaid-btn.pos-bottom{ bottom: 8px; left: 50%; transform: translate(-50%,0); }

/* Hover state */
.shareaid-btn:hover,
.shareaid-btn:focus{ background: var(--shareaid-hover); outline: none; }

/* Animations */
@keyframes shareaid-fade-in { from{ opacity: 0; } to{ opacity: 1; } }
@keyframes shareaid-zoom { from{ transform: scale(.9); } to{ transform: scale(1); } }
@keyframes shareaid-pulse { 0%,100%{ box-shadow: 0 0 0 0 rgba(34,113,177,.45);} 50%{ box-shadow: 0 0 0 10px rgba(34,113,177,0);} }
@keyframes shareaid-bounce { 0%,100%{ transform: translateY(-2px);} 50%{ transform: translateY(0);} }

.shareaid-anim-fade{ animation: shareaid-fade-in .25s ease both; }
.shareaid-anim-zoom{ animation: shareaid-zoom .18s ease both; }
.shareaid-anim-pulse{ animation: shareaid-pulse 1.6s ease infinite; }
.shareaid-anim-bounce{ animation: shareaid-bounce .8s ease infinite; }

/* Mobile tweaks */
@media (max-width: 768px){
	/* Always-visible on mobile often desired */
	.shareaid-wrapper:hover .shareaid-btn{ opacity: inherit; transform: none; }
}