/**
 * Topic Pill Block Styles
 * Small pill-shaped label for topic indicators
 * Auto-adapts to background for proper contrast
 */

.gb-topic-pill {
    display: inline-flex;
    margin-bottom: 0.75rem;
}

.gb-topic-pill__text {
    display: inline-block;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 9999px;
    white-space: nowrap;
    /* Default: auto-contrast background */
    background: rgba(0, 0, 0, 0.08);
    color: inherit;
}

/* Sizes */
.gb-topic-pill--small .gb-topic-pill__text {
    padding: 0.25rem 0.75rem;
    font-size: 0.65rem;
}

.gb-topic-pill--medium .gb-topic-pill__text {
    padding: 0.375rem 1rem;
    font-size: 0.75rem;
}

.gb-topic-pill--large .gb-topic-pill__text {
    padding: 0.5rem 1.25rem;
    font-size: 0.85rem;
}

/* ==========================================================================
   Auto-contrast: Adapts pill background based on parent background
   ========================================================================== */

/* Default (light backgrounds) - dark semi-transparent overlay */
.gb-topic-pill--subtle .gb-topic-pill__text {
    background: rgba(0, 0, 0, 0.08);
    color: inherit;
}

/* Dark background detection - light semi-transparent overlay */
/* WordPress dark background class */
.has-dark-background .gb-topic-pill__text,
.has-dark-background .gb-topic-pill--subtle .gb-topic-pill__text {
    background: rgba(255, 255, 255, 0.15);
}

/* Common dark color classes */
.has-black-background-color .gb-topic-pill__text,
.has-dark-gray-background-color .gb-topic-pill__text,
.has-charcoal-background-color .gb-topic-pill__text {
    background: rgba(255, 255, 255, 0.15);
}

/* Inline dark backgrounds - hex detection */
[style*="background-color:#0"] .gb-topic-pill__text,
[style*="background-color:#1"] .gb-topic-pill__text,
[style*="background-color:#2"] .gb-topic-pill__text,
[style*="background-color:#3"] .gb-topic-pill__text,
[style*="background-color: #0"] .gb-topic-pill__text,
[style*="background-color: #1"] .gb-topic-pill__text,
[style*="background-color: #2"] .gb-topic-pill__text,
[style*="background-color: #3"] .gb-topic-pill__text {
    background: rgba(255, 255, 255, 0.15);
}

/* RGB dark backgrounds */
[style*="background-color: rgb(0,"] .gb-topic-pill__text,
[style*="background-color:rgb(0,"] .gb-topic-pill__text,
[style*="background: rgb(0,"] .gb-topic-pill__text {
    background: rgba(255, 255, 255, 0.15);
}

/* ==========================================================================
   Explicit Styles (override auto-contrast when selected)
   ========================================================================== */

/* Filled style - solid color */
.gb-topic-pill--filled .gb-topic-pill__text {
    background: var(--wp--preset--color--primary, #56c878);
    color: #fff;
}

/* When user sets custom background color via block editor */
.gb-topic-pill--filled.has-background .gb-topic-pill__text {
    background: inherit;
}

/* Outline style */
.gb-topic-pill--outline .gb-topic-pill__text {
    background: transparent;
    border: 2px solid currentColor;
    color: inherit;
}

/* Dark background: outline stays visible */
.has-dark-background .gb-topic-pill--outline .gb-topic-pill__text {
    border-color: rgba(255, 255, 255, 0.5);
}

/* Alignment */
.gb-topic-pill.aligncenter {
    display: flex;
    justify-content: center;
}

.gb-topic-pill.alignright {
    display: flex;
    justify-content: flex-end;
}

/* Editor placeholder */
.gb-topic-pill__text[data-rich-text-placeholder]::before {
    opacity: 0.5;
}

/* Common theme color presets */
.gb-topic-pill.has-primary-background-color .gb-topic-pill__text {
    background: var(--wp--preset--color--primary);
}

.gb-topic-pill.has-secondary-background-color .gb-topic-pill__text {
    background: var(--wp--preset--color--secondary);
}

.gb-topic-pill.has-accent-background-color .gb-topic-pill__text {
    background: var(--wp--preset--color--accent);
}

/* GutsyBites specific colors */
.gb-topic-pill.has-hero-accent-background-color .gb-topic-pill__text {
    background: var(--wp--preset--color--hero-accent, #56c878);
}