/* ButtonGroup - Lumina Component Styling */

.ButtonGroup--lumina {
    display: inline-flex;
    align-items: center;
    border-radius: var(--slds-g-radius-border-circle);
    overflow: hidden;
    height: 40px;
    box-sizing: border-box;
    border: 1px solid var(--slds-g-color-border-2);
    background-color: var(--slds-g-color-surface-container-1);

    .ImageButton--in-group {
        border: none;
        border-radius: 0;
        background-color: transparent;
        height: 100%;
    }

    /* Preserve variant background colors when non-secondary variants are used
       (e.g., for ToggleButtonGroup selected state or custom variants) */
    .ImageButton--in-group.ImageButton--primary {
        background-color: var(--slds-g-color-accent-container-1);
    }

    .ImageButton--in-group.ImageButton--primary.ImageButton--pressed {
        background-color: var(--slds-g-color-accent-container-2);
    }
}

.ButtonGroup__divider {
    width: var(--slds-g-sizing-border-1);
    height: 100%;
    background-color: var(--slds-g-color-border-2);
    flex-shrink: 0;
}

/* Phone: the group scales horizontally (content-width) but its height drops to 32px.
   In-group buttons use height:100% (above), so they follow this height automatically. */
@media @phone {
    .ButtonGroup--lumina {
        height: var(--slds-g-sizing-9); /* 32px visual */

        /* Each segment carries a 40px-tall transparent tap overlay (ImageButton ::after).
           Allow it to bleed 4px above/below the 32px group instead of being clipped. */
        overflow: visible;
        border-color: var(--slds-g-color-border-1);

        /* With the clip removed, round the end segments so pressed/primary backgrounds
           still follow the group's pill shape at the ends. */
        .ImageButton--in-group:first-child {
            border-top-left-radius: var(--slds-g-radius-border-circle);
            border-bottom-left-radius: var(--slds-g-radius-border-circle);
        }
        .ImageButton--in-group:last-child {
            border-top-right-radius: var(--slds-g-radius-border-circle);
            border-bottom-right-radius: var(--slds-g-radius-border-circle);
        }
    }
    .ButtonGroup__divider {
        background-color: var(--slds-g-color-border-1);
    }
}

/* ButtonGroupInList - wrapper for ButtonGroup inside Lumina list items */

.ButtonGroupInList {
    display: inline-flex;
    align-items: center;
}