/**
 * Badge Block Styles
 * Pill-shaped badge with overlapping circular images and text
 */

/* Default CSS variables */
.wp-custom-blocks-badge {
    --badge-image-gap: -8px;
    --badge-content-gap: 12px;
    --badge-image-size: 40px;
    --badge-bg-color: #f3f4f6;
    --badge-text-color: #1e293b;
    --badge-border-radius: 100px;
    --badge-padding: 8px 24px 8px 8px;
}

/* Override any WordPress block wrappers */
.wp-custom-blocks-badge > *,
.wp-custom-blocks-badge .wp-block,
.wp-custom-blocks-badge .block-editor-block-list__block {
    display: inline-block !important;
    margin: 0 !important;
}

.wp-custom-blocks-badge .wp-block:not(.wp-block-image) {
    flex-shrink: 1 !important;
}

/* Main badge container - pill shaped */
.wp-custom-blocks-badge {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0 !important;
    background-color: var(--badge-bg-color);
    border-radius: var(--badge-border-radius);
    padding: var(--badge-padding);
    width: fit-content;
    flex-wrap: nowrap !important;
    min-height: 56px;
    box-sizing: border-box;
}

/* Editor - ensure controls work in real-time */
.editor-styles-wrapper .wp-custom-blocks-badge,
.block-editor-block-list__layout .wp-custom-blocks-badge {
    gap: 0 !important;
}

/* Ensure wrapper is visible on frontend */
.wp-block-wordpress-custom-blocks-badge {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    background-color: var(--badge-bg-color, #f3f4f6);
    border-radius: var(--badge-border-radius, 100px);
    padding: var(--badge-padding, 8px 24px 8px 8px);
    width: fit-content;
    min-height: 56px;
    box-sizing: border-box;
}

/* Apply CSS variables to frontend wrapper too */
.wp-block-wordpress-custom-blocks-badge[style*="--badge"] {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
}

/* Frontend specific - force all direct children to be inline */
.wp-block-wordpress-custom-blocks-badge > figure,
.wp-block-wordpress-custom-blocks-badge > p,
.wp-block-wordpress-custom-blocks-badge > h1,
.wp-block-wordpress-custom-blocks-badge > h2,
.wp-block-wordpress-custom-blocks-badge > h3,
.wp-block-wordpress-custom-blocks-badge > h4,
.wp-block-wordpress-custom-blocks-badge > h5,
.wp-block-wordpress-custom-blocks-badge > h6,
.wp-block-wordpress-custom-blocks-badge > .wp-block-image,
.wp-block-wordpress-custom-blocks-badge > .wp-block-paragraph,
.wp-block-wordpress-custom-blocks-badge > .wp-block-heading {
    display: inline-block !important;
    margin: 0 !important;
    align-self: center !important;
}

.wp-block-wordpress-custom-blocks-badge > figure:not(:first-child),
.wp-block-wordpress-custom-blocks-badge > .wp-block-image:not(:first-child) {
    margin-left: var(--badge-image-gap, -8px) !important;
}

.wp-block-wordpress-custom-blocks-badge > figure,
.wp-block-wordpress-custom-blocks-badge > .wp-block-image figure {
    width: var(--badge-image-size, 40px) !important;
    height: var(--badge-image-size, 40px) !important;
    flex-shrink: 0 !important;
}

.wp-block-wordpress-custom-blocks-badge > figure img,
.wp-block-wordpress-custom-blocks-badge > .wp-block-image img {
    width: var(--badge-image-size, 40px) !important;
    height: var(--badge-image-size, 40px) !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid #ffffff !important;
    max-width: var(--badge-image-size, 40px) !important;
    min-width: var(--badge-image-size, 40px) !important;
}

/* Support for WordPress native background color */
.wp-custom-blocks-badge[style*="background-color"] {
    --badge-bg-color: inherit;
}

/* Support for WordPress native text color */
.wp-custom-blocks-badge[style*="color"] {
    --badge-text-color: inherit;
}

/* Images container - creates overlapping effect */
.wp-custom-blocks-badge .wp-block-image {
    margin: 0 !important;
    width: var(--badge-image-size, 40px) !important;
    height: var(--badge-image-size, 40px) !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
    position: relative !important;
    align-self: center !important;
}

.wp-custom-blocks-badge .wp-block-image figure {
    margin: 0 !important;
    width: var(--badge-image-size, 40px) !important;
    height: var(--badge-image-size, 40px) !important;
    display: block !important;
}

/* Position images with overlap - use CSS variable */
.wp-custom-blocks-badge .wp-block-image:not(:first-child) {
    margin-left: var(--badge-image-gap, -8px) !important;
}

/* Editor specific - ensure gap control works */
.editor-styles-wrapper .wp-custom-blocks-badge .wp-block-image:not(:first-child),
.block-editor-block-list__layout .wp-custom-blocks-badge .wp-block-image:not(:first-child) {
    margin-left: var(--badge-image-gap, -8px) !important;
}

/* Make images circular */
.wp-custom-blocks-badge .wp-block-image img,
.wp-custom-blocks-badge img {
    width: var(--badge-image-size, 40px) !important;
    height: var(--badge-image-size, 40px) !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
    border: 2px solid #ffffff !important;
    box-sizing: border-box !important;
    max-width: var(--badge-image-size, 40px) !important;
    min-width: var(--badge-image-size, 40px) !important;
    min-height: var(--badge-image-size, 40px) !important;
}

/* Ensure image size control works in editor */
.editor-styles-wrapper .wp-custom-blocks-badge img,
.block-editor-block-list__layout .wp-custom-blocks-badge img {
    width: var(--badge-image-size, 40px) !important;
    height: var(--badge-image-size, 40px) !important;
    max-width: var(--badge-image-size, 40px) !important;
    min-width: var(--badge-image-size, 40px) !important;
    min-height: var(--badge-image-size, 40px) !important;
}

/* Text styling - add content gap on left side only */
.wp-custom-blocks-badge .wp-block-paragraph,
.wp-custom-blocks-badge .wp-block-heading {
    margin: 0 !important;
    margin-left: var(--badge-content-gap, 12px) !important;
    font-size: 16px;
    font-weight: 600;
    color: var(--badge-text-color);
    line-height: 1.2;
    flex-shrink: 1 !important;
    width: auto !important;
    max-width: none !important;
    align-self: center !important;
    display: inline-flex !important;
    align-items: center !important;
}

.wp-custom-blocks-badge p,
.wp-custom-blocks-badge h1,
.wp-custom-blocks-badge h2,
.wp-custom-blocks-badge h3,
.wp-custom-blocks-badge h4,
.wp-custom-blocks-badge h5,
.wp-custom-blocks-badge h6 {
    margin: 0 !important;
    margin-left: var(--badge-content-gap, 12px) !important;
    font-size: 16px;
    font-weight: 600;
    color: var(--badge-text-color);
    line-height: 1.2;
    align-self: center !important;
}

/* Frontend text elements */
.wp-block-wordpress-custom-blocks-badge > p,
.wp-block-wordpress-custom-blocks-badge > h1,
.wp-block-wordpress-custom-blocks-badge > h2,
.wp-block-wordpress-custom-blocks-badge > h3,
.wp-block-wordpress-custom-blocks-badge > h4,
.wp-block-wordpress-custom-blocks-badge > h5,
.wp-block-wordpress-custom-blocks-badge > h6,
.wp-block-wordpress-custom-blocks-badge > .wp-block-paragraph,
.wp-block-wordpress-custom-blocks-badge > .wp-block-paragraph p,
.wp-block-wordpress-custom-blocks-badge > .wp-block-heading {
    align-self: center !important;
    vertical-align: middle !important;
    margin: 0 !important;
    margin-left: var(--badge-content-gap, 12px) !important;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
}

/* Alignment support */
.wp-custom-blocks-badge.alignleft,
.wp-block-wordpress-custom-blocks-badge.alignleft {
    margin-right: auto;
    margin-left: 0;
}

.wp-custom-blocks-badge.aligncenter,
.wp-block-wordpress-custom-blocks-badge.aligncenter {
    margin-left: auto;
    margin-right: auto;
}

.wp-custom-blocks-badge.alignright,
.wp-block-wordpress-custom-blocks-badge.alignright {
    margin-left: auto;
    margin-right: 0;
}

/* Full and wide alignment */
.wp-custom-blocks-badge.alignfull,
.wp-custom-blocks-badge.alignwide,
.wp-block-wordpress-custom-blocks-badge.alignfull,
.wp-block-wordpress-custom-blocks-badge.alignwide {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 100%;
}

/* Editor-specific styles */
.editor-styles-wrapper .wp-custom-blocks-badge {
    max-width: 100%;
}

/* Responsive design */
@media (max-width: 768px) {
    .wp-custom-blocks-badge {
        --badge-image-size: 32px;
        --badge-padding: 6px 16px 6px 6px;
    }

    .wp-custom-blocks-badge .wp-block-paragraph,
    .wp-custom-blocks-badge .wp-block-heading {
        font-size: 14px;
    }
}

/* Support for gradient backgrounds */
.wp-custom-blocks-badge.has-background {
    background-image: var(--wp--preset--gradient--gradient, none);
}

/* Ensure images maintain circular shape even with WordPress classes */
.wp-custom-blocks-badge .wp-block-image.size-thumbnail img,
.wp-custom-blocks-badge .wp-block-image.size-medium img,
.wp-custom-blocks-badge .wp-block-image.size-large img,
.wp-custom-blocks-badge .wp-block-image.size-full img {
    width: var(--badge-image-size);
    height: var(--badge-image-size);
    border-radius: 50%;
}