/*
 * Post Meta: layout, plus the share skins. Sizes, colours and type come from
 * the block's Style controls; skin colours sit in :where() (zero
 * specificity), so a colour set in the Style tab always wins.
 */

.ne-pm-tags,
.ne-pm-share,
.ne-pm-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.ne-pm-tag {
	text-decoration: none;
}

.ne-pm-share .ne-pm-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.ne-pm-share-ico {
	width: 1.1em;
	height: 1.1em;
	flex: 0 0 auto;
}

.ne-pm-links a {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	box-sizing: border-box;
	text-decoration: none;
	transition: opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.ne-pm-links svg {
	flex: 0 0 auto;
}

/* Vertical layout (share rail): label on top, buttons in a column. */
.ne-pm-share.is-vertical {
	flex-direction: column;
	flex-wrap: nowrap;
}

.ne-pm-share.is-vertical .ne-pm-links {
	flex-direction: column;
	flex-wrap: nowrap;
}

.ne-pm-share.is-vertical .ne-pm-label {
	flex-direction: column;
	text-align: center;
}

/* Skins: each link carries its network colour as --ne-brand. */
:where(.ne-pm-links.is-skin-brand) a {
	background-color: var(--ne-brand);
	color: #ffffff;
}

:where(.ne-pm-links.is-skin-brand_icon) a {
	color: var(--ne-brand);
}

:where(.ne-pm-links.is-skin-outline) a {
	border: 1px solid var(--ne-brand);
	color: var(--ne-brand);
}

:where(.ne-pm-links.is-skin-outline) a:hover {
	background-color: var(--ne-brand);
	color: #ffffff;
}

/* Fade-out effect: hovering one button fades the rest (opacity from the Style tab). */
.ne-pm-links.is-fade:hover a:not(:hover) {
	opacity: 0.35;
}

/* Tooltips: the network name from data-tip. */
.ne-pm-links.has-tip a::after {
	content: attr(data-tip);
	position: absolute;
	z-index: 5;
	white-space: nowrap;
	line-height: 1.2;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.ne-pm-links.has-tip a:hover::after,
.ne-pm-links.has-tip a:focus-visible::after {
	opacity: 1;
	visibility: visible;
}

.ne-pm-links.tip-top a::after {
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translate(-50%, 4px);
}

.ne-pm-links.tip-bottom a::after {
	top: calc(100% + 6px);
	left: 50%;
	transform: translate(-50%, -4px);
}

.ne-pm-links.tip-left a::after {
	right: calc(100% + 6px);
	top: 50%;
	transform: translate(4px, -50%);
}

.ne-pm-links.tip-right a::after {
	left: calc(100% + 6px);
	top: 50%;
	transform: translate(-4px, -50%);
}

.ne-pm-links.tip-top a:hover::after,
.ne-pm-links.tip-bottom a:hover::after {
	transform: translate(-50%, 0);
}

.ne-pm-links.tip-left a:hover::after,
.ne-pm-links.tip-right a:hover::after {
	transform: translate(0, -50%);
}

.ne-pm-empty {
	margin: 0;
	padding: 0.75rem 1rem;
	border: 1px dashed #9ca3af;
	color: #6b7280;
	font-size: 0.875rem;
}