/**
 * CC Share - theme "default"
 * Small coloured buttons; the hovered one widens and slides its label in.
 */
.ccshare {
	--ccshare-height: 32px;
	--ccshare-width: 48px;
	--ccshare-gap: 4px;
	--ccshare-icon: 15px;
	--ccshare-font-size: 13px;
	--ccshare-facebook: #1678f2;
	--ccshare-x: #000;
	--ccshare-linkedin: #1b86bd;
	--ccshare-whatsapp: #4dc247;
	--ccshare-viber: #7d539d;
	--ccshare-email: #999;
	--ccshare-copy: #444;
	--ccshare-native: #444;
	margin: 10px 0;
}

.ccshare,
.ccshare *,
.ccshare *::before,
.ccshare *::after {
	box-sizing: border-box;
}

.ccshare__heading {
	margin-bottom: 8px;
	font-weight: 700;
}

.ccshare__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ccshare-gap);
	margin: 0 !important;
	padding: 0;
	list-style: none !important;
}

.ccshare__item {
	flex: none;
	margin: 0;
	padding: 0;
}

.ccshare__item::before {
	content: none !important;
}

/* Small square buttons; the hovered one widens as its label slides in */
.ccshare__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: var(--ccshare-width);
	height: var(--ccshare-height);
	margin: 0;
	padding: 0 16px;
	overflow: hidden;
	font: inherit;
	font-size: var(--ccshare-font-size);
	font-weight: 600;
	line-height: 1;
	color: #fff !important;
	white-space: nowrap;
	text-decoration: none !important;
	cursor: pointer;
	background: var(--ccshare-color, #444);
	border: 0;
	border-radius: 0;
}

.ccshare__btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -4px;
}

.ccshare__btn--facebook { --ccshare-color: var(--ccshare-facebook); }
.ccshare__btn--x        { --ccshare-color: var(--ccshare-x); }
.ccshare__btn--linkedin { --ccshare-color: var(--ccshare-linkedin); }
.ccshare__btn--whatsapp { --ccshare-color: var(--ccshare-whatsapp); }
.ccshare__btn--viber    { --ccshare-color: var(--ccshare-viber); }
.ccshare__btn--email    { --ccshare-color: var(--ccshare-email); }
.ccshare__btn--copy     { --ccshare-color: var(--ccshare-copy); }
.ccshare__btn--native   { --ccshare-color: var(--ccshare-native); }

.ccshare__icon {
	flex: none;
	width: var(--ccshare-icon);
	height: var(--ccshare-icon);
}

/* Label: hidden until hover, then slides in from the icon */
.ccshare__label {
	max-width: 0;
	margin-left: -20px;
	overflow: hidden;
	visibility: hidden;
	opacity: 0;
	transition: all .3s ease-in-out;
}

.ccshare__item:hover .ccshare__label,
.ccshare__item:focus-within .ccshare__label,
.ccshare--labels .ccshare__label {
	max-width: 12em;
	margin-left: 6px;
	visibility: visible;
	opacity: 1;
}

/* Copy link: tick for a moment after copying */
.ccshare__icon--done,
.ccshare__btn.is-done .ccshare__icon:not(.ccshare__icon--done) {
	display: none;
}

.ccshare__btn.is-done .ccshare__icon--done {
	display: block;
}

/* Announced to screen readers only */
.ccshare__status {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.ccshare__label {
		transition: none;
	}
}