/*
 * Small-component layer (badges, alerts, soft cards) registered via
 * register_block_style() in functions.php. These sit under the existing
 * page-section patterns, closer to a traditional UI-kit's "core
 * components" layer than a full section layout.
 */

/* core/group is-style-ghost-card-soft */
.is-style-ghost-card-soft {
	background: var(--wp--preset--color--base);
	border-radius: 20px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
	padding: var(--wp--custom--spacing--gap);
}

/* core/group is-style-ghost-alert-* */
.is-style-ghost-alert-info,
.is-style-ghost-alert-success,
.is-style-ghost-alert-warning,
.is-style-ghost-alert-error {
	border-left: 4px solid;
	border-radius: 8px;
	padding: 16px 20px;
}

.is-style-ghost-alert-info {
	background: rgba(0, 90, 255, 0.08);
	border-left-color: var(--wp--preset--color--primary, #005aff);
}

.is-style-ghost-alert-success {
	background: rgba(46, 125, 50, 0.08);
	border-left-color: #2e7d32;
}

.is-style-ghost-alert-warning {
	background: rgba(237, 143, 2, 0.1);
	border-left-color: #ed8f02;
}

.is-style-ghost-alert-error {
	background: rgba(211, 47, 47, 0.08);
	border-left-color: #d32f2f;
}

/* core/button is-style-ghost-soft */
.is-style-ghost-soft .wp-block-button__link {
	background: rgba(0, 90, 255, 0.1);
	color: var(--wp--preset--color--primary, #005aff);
	box-shadow: 0 6px 20px rgba(0, 90, 255, 0.15);
}

.is-style-ghost-soft .wp-block-button__link:hover {
	background: rgba(0, 90, 255, 0.18);
}

/* core/button is-style-ghost-badge */
.is-style-ghost-badge .wp-block-button__link {
	padding: 4px 14px;
	font-size: var(--wp--preset--font-size--x-small);
	background: var(--wp--preset--color--neutral);
	color: var(--wp--preset--color--contrast);
	box-shadow: none;
}

/* core/group is-style-ghost-avatar-group (holds core/image children) */
.is-style-ghost-avatar-group {
	display: flex;
}

.is-style-ghost-avatar-group .wp-block-image {
	margin: 0 0 0 -12px;
}

.is-style-ghost-avatar-group .wp-block-image:first-child {
	margin-left: 0;
}

.is-style-ghost-avatar-group .wp-block-image img {
	border-radius: 9999px;
	border: 2px solid var(--wp--preset--color--base);
	display: block;
}