/**
 * WP Share Plugin — share icons.
 *
 * The renderer sets these custom properties inline:
 *   .wpsp         --wpsp-size, and --wpsp-main / --wpsp-icon in "custom colors" mode
 *   .wpsp__link   --wpsp-brand (network brand color)
 * Selectors use two classes so theme styles for a, button and li do not override them.
 */

.wpsp {
	--wpsp-size: 40px;
	margin: 1.5em 0;
}

.wpsp [hidden] {
	display: none !important;
}

.wpsp .wpsp__heading {
	margin: 0 0 0.5em;
	font-size: 0.95em;
	font-weight: 600;
}

.wpsp .wpsp__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin: 0;
	padding: 0;
	list-style: none;
	margin-left: -0.5rem;
}

.wpsp .wpsp__item {
	margin: 0;
	padding: 0;
}

/* Alignment (physical left/right, also on right-to-left sites). */
.wpsp--align-left .wpsp__heading {
	text-align: left;
}

.wpsp--align-left .wpsp__list,
.rtl .wpsp--align-right .wpsp__list {
	justify-content: flex-start;
}

.rtl .wpsp--align-left .wpsp__list,
.wpsp--align-right .wpsp__list {
	justify-content: flex-end;
}

.wpsp--align-center .wpsp__heading {
	text-align: center;
}

.wpsp--align-center .wpsp__list {
	justify-content: center;
}

.wpsp--align-right .wpsp__heading {
	text-align: right;
}

/* Buttons. --wpsp-bg, --wpsp-fg and --wpsp-bd are switched by the style variants below. */
.wpsp .wpsp__link {
	--wpsp-c: var(--wpsp-main, var(--wpsp-brand, #4b5563));
	--wpsp-bg: var(--wpsp-c);
	--wpsp-fg: var(--wpsp-icon, #fff);
	--wpsp-bd: var(--wpsp-c);
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45em;
	box-sizing: border-box;
	min-width: var(--wpsp-size);
	height: var(--wpsp-size);
	margin: 0;
	padding: 0;
	border: 2px solid var(--wpsp-bd);
	border-radius: 999px;
	box-shadow: none;
	font: inherit;
	font-size: max(13px, calc(var(--wpsp-size) * 0.36));
	font-weight: 600;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: opacity 0.15s ease, transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

/*
 * Themes style a/button states with very specific selectors (e.g. Twenty Twenty-One's
 * `.site a:focus:not(…):not(…)` or `button:not(:hover):not(:active):not(.has-background)`),
 * which would hide the icon on focus. !important is limited to these properties; the
 * values still come from the custom properties, so the variants below keep working.
 */
.wpsp .wpsp__link,
.wpsp .wpsp__link:visited,
.wpsp .wpsp__link:hover,
.wpsp .wpsp__link:focus,
.wpsp .wpsp__link:active {
	border-color: var(--wpsp-bd) !important;
	background: var(--wpsp-bg) !important;
	box-shadow: none !important;
	color: var(--wpsp-fg) !important;
	text-decoration: none !important;
}

.wpsp .wpsp__link:hover {
	opacity: 0.85;
	transform: translateY(-1px);
}

.wpsp .wpsp__link:focus-visible {
	outline: 2px solid var(--wpsp-c) !important;
	outline-offset: 2px !important;
}

.wpsp .wpsp__link svg {
	display: block;
	flex: none;
	width: calc(var(--wpsp-size) * 0.45);
	height: calc(var(--wpsp-size) * 0.45);
	fill: currentColor;
}

/* Styles. */
.wpsp--style-outline .wpsp__link {
	--wpsp-bg: transparent;
	--wpsp-fg: var(--wpsp-c);
}

.wpsp--style-outline .wpsp__link:hover {
	--wpsp-bg: var(--wpsp-c);
	--wpsp-fg: var(--wpsp-icon, #fff);
	opacity: 1;
}

.wpsp--style-plain .wpsp__link {
	--wpsp-bg: transparent;
	--wpsp-fg: var(--wpsp-c);
	--wpsp-bd: transparent;
}

.wpsp--style-plain .wpsp__link svg {
	width: calc(var(--wpsp-size) * 0.6);
	height: calc(var(--wpsp-size) * 0.6);
}

/* Shapes. */
.wpsp--shape-rounded .wpsp__link {
	border-radius: calc(var(--wpsp-size) * 0.22);
}

.wpsp--shape-square .wpsp__link {
	border-radius: 0;
}

/* Labels: visible next to the icon, or kept for screen readers only. */
.wpsp--labels .wpsp__link {
	padding: 0 calc(var(--wpsp-size) * 0.4);
}

.wpsp--labels.wpsp--style-plain .wpsp__link {
	padding: 0 0.25em;
}

.wpsp:not(.wpsp--labels) .wpsp__label,
.wpsp .wpsp__status {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Copy link: swap to a check mark after copying. */
.wpsp .wpsp__link .wpsp__icon--check,
.wpsp .wpsp__link.is-copied svg {
	display: none;
}

.wpsp .wpsp__link.is-copied .wpsp__icon--check {
	display: block;
}

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

	.wpsp .wpsp__link:hover {
		transform: none;
	}
}