/**
 * Editor-only styles for the ShareToSocial blocks.
 *
 * The parent block lays its inner network blocks out in a row (mirroring
 * the frontend share row) and the built-in "+" appender sits inline at the
 * end, exactly like the core Social Icons block. Each network button is
 * styled with the plugin's own CSS variables so its size and shape match
 * the rendered frontend buttons.
 */

/* Inner networks line up in a row; the appender joins them inline. */
.wp-block-sharetosocial-share > .block-editor-inner-blocks,
.wp-block-sharetosocial-share .block-editor-block-list__layout {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 8px;
	row-gap: 8px;
}

.wp-block-sharetosocial-share .block-editor-block-list__block {
	margin: 0;
	width: auto;
}

/* Force the built-in "+" appender to sit inline after the buttons. */
.wp-block-sharetosocial-share .block-list-appender {
	position: static;
	display: inline-flex;
	width: auto;
	margin: 0;
}

.wp-block-sharetosocial-share .block-list-appender .block-editor-button-block-appender,
.wp-block-sharetosocial-share .block-list-appender .block-list-appender__toggle {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* A single network button in the canvas, matching the frontend row.
   The --sts-btn-padding / --sts-font-size / --sts-radius variables come
   from the sts-size-* and sts-style-* classes on the same element. */
.wp-block-sharetosocial-share .sts-editor-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: var(--sts-btn-padding, 7px 13px);
	border-radius: var(--sts-radius, 6px);
	font-size: var(--sts-font-size, 13px);
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
	margin: 0;
}

.wp-block-sharetosocial-share .sts-editor-btn .sts-share__label {
	white-space: nowrap;
}

/* Hint shown in the Networks inspector panel. */
.wp-block-sharetosocial-share .sts-hint {
	font-size: 13px;
	color: #646970;
	font-style: italic;
	margin: 0;
}