/* =========================================================
   Button Group component
   - .sb-btns: runtime
   - .pb-btns: builder/canvas
   ========================================================= */

.sb-btns,
.pb-btns {
    width: 100%;
    box-sizing: border-box;
}

/* Rows should not overflow their container */
.sb-btns [data-row],
.pb-btns [data-row] {
    width: 100%;
    max-width: 100%;
}

/* Base button sizing + shape */
.sb-btns .btn,
.pb-btns .btn {
    border-radius: .75rem;
    padding: 0.5rem 1rem;
    font-weight: 600;
}

/* Make sure default buttons look OK in both themes */
.sb-btns .btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info),
.pb-btns .btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info) {
    background: var(--sb-surface-2);
    color: var(--sb-text);
    border-color: var(--sb-border);
}

/* Primary stays readable in dark mode */
.sb-btns .btn-primary,
.pb-btns .btn-primary {
    background: var(--sb-accent);
    border-color: transparent;
    color: var(--sb-accent-contrast, #fff);
}

.sb-btns .btn:focus,
.pb-btns .btn:focus {
    box-shadow: var(--sb-focus);
}

/* =========================================================
   Builder/canvas: give the group a nicer "component block" feel
   (doesn't affect runtime)
   ========================================================= */

.pb-btns {
    border: 1px solid var(--sb-border);
    background: var(--sb-surface);
    border-radius: 14px;
    padding: .75rem;
}

/* If empty in editor, show a subtle placeholder */
.pb-btns:empty::before {
    content: "Button Group";
    display: inline-block;
    color: var(--sb-text-muted);
    font-weight: 600;
}

/* Slight hover lift in builder so it feels interactive */
.pb-btns .btn:hover {
    filter: brightness(1.04);
}