@mussonindustrial/pyro-mui-joy/src/classes/buttongroup.css

A port of Material UI Joy Theme for Ignition by Inductive Automation

$gaps: (5px, 10px);

/* [psc='Joy/Container/buttongroup-connected'] {

    *:first-child {
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
    }

    *:last-child {
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
    }

    *:not(:first-child):not(:last-child) {
        margin-left: -1px;
        border-radius: 0px;
    }
} */

[psc='Joy/Container/buttongroup-connected'] {
    --joy-ButtonGroup-separatorSize: 1px;
    --joy-ButtonGroup-separatorColor: var(
        --joy-variant-outlinedBorder,
        var(
            --joy-palette-neutral-outlinedBorder,
            var(--joy-palette-neutral-300, #cdd7e1)
        )
    );
    --joy-ButtonGroup-radius: var(--joy-radius-sm);
    --joy-Divider-inset: 0.5rem;
    --joy-unstable_childRadius: calc(
        (1 - var(--joy-ButtonGroup-connected)) * var(--joy-ButtonGroup-radius) -
            var(--joy-variant-borderWidth, 0px)
    );
    --joy-ButtonGroup-connected: 1;
    gap: 0px;
    border-radius: var(--joy-ButtonGroup-radius);

    & > :first-child {
        --joy-Button-radius: var(--joy-ButtonGroup-radius)
            var(--joy-unstable_childRadius) var(--joy-unstable_childRadius)
            var(--joy-ButtonGroup-radius);
        --joy-IconButton-radius: var(--joy-ButtonGroup-radius)
            var(--joy-unstable_childRadius) var(--joy-unstable_childRadius)
            var(--joy-ButtonGroup-radius);
        border-right: var(--joy-ButtonGroup-separatorSize) solid
            var(--joy-ButtonGroup-separatorColor);
    }
    & > :last-child {
        --joy-Button-radius: var(--joy-unstable_childRadius)
            var(--joy-ButtonGroup-radius) var(--joy-ButtonGroup-radius)
            var(--joy-unstable_childRadius);
        --joy-IconButton-radius: var(--joy-unstable_childRadius)
            var(--joy-ButtonGroup-radius) var(--joy-ButtonGroup-radius)
            var(--joy-unstable_childRadius);
        border-left: var(--joy-ButtonGroup-separatorSize) solid
            var(--joy-ButtonGroup-separatorColor);
    }

    & > :not(:first-child):not(:only-child) {
        --joy-Button-margin: 0 0 0
            calc(var(--joy-ButtonGroup-separatorSize) * -1);
        --joy-IconButton-margin: 0 0 0
            calc(var(--joy-ButtonGroup-separatorSize) * -1);
    }

    & > :not(:first-child):not(:last-child):not(:only-child) {
        --joy-Button-radius: var(--joy-unstable_childRadius);
        --joy-IconButton-radius: var(--joy-unstable_childRadius);
        border-radius: var(--joy-unstable_childRadius);
        border-left: var(--joy-ButtonGroup-separatorSize) solid
            var(--joy-ButtonGroup-separatorColor);
        border-right: var(--joy-ButtonGroup-separatorSize) solid
            var(--joy-ButtonGroup-separatorColor);
    }
}