web-expressive/dist/components/connected-button-group.css

A standard-first frontend toolkit based on Material Expressive design language intent.

@layer design-system.groups{.connected-button-group{--size-items:small;gap:var(--sys-measurement-space-25);grid-auto-columns:1fr;grid-auto-flow:column;inline-size:100%;min-inline-size:max-content;display:grid;&:not(.small){@container style(--size-items:extra-small){--size-items:extra-small}@container style(--size-items:medium){--size-items:medium}@container style(--size-items:large){--size-items:large}@container style(--size-items:extra-large){--size-items:extra-large}}&:not(.round){@container style(--shape-items:square){--shape-items:square}}&.extra-small{--size-items:extra-small}&.medium{--size-items:medium}&.large{--size-items:large}&.extra-large{--size-items:extra-large}&.square{--shape-items:square}& .toggle-button{--_edge-corner:var(--_radius-full);--_inner-corner:var(--sys-shape-corner-small);--_border-radius:var(--_inner-corner);inline-size:100%;min-inline-size:3rem;@container style(--size-items:extra-small){--_inner-corner:var(--sys-shape-corner-extra-small)}@container style(--size-items:medium){--_inner-corner:var(--sys-shape-corner-small)}@container style(--size-items:large){--_inner-corner:var(--sys-shape-corner-large)}@container style(--size-items:extra-large){--_inner-corner:var(--sys-shape-corner-large-increased)}@container style(--shape-items:square){--_edge-corner:var(--_inner-corner)}&:has(.input:checked){--_border-radius:var(--_radius-full)}&:last-child{--_border-radius:var(--_inner-corner) var(--_edge-corner) var(--_edge-corner) var(--_inner-corner)}&:first-child{--_border-radius:var(--_edge-corner) var(--_inner-corner) var(--_inner-corner) var(--_edge-corner)}& .label{inline-size:100%}&:has(.icon:only-of-type.selected){& .label{transition:gap var(--sys-motion-spring-fast-spatial-duration) var(--sys-motion-spring-fast-spatial);gap:0}& .selected{transition:inline-size var(--sys-motion-spring-fast-effects-duration) var(--sys-motion-spring-fast-effects);inline-size:0;display:block;overflow:clip}&:has(.input:checked){& .label{gap:var(--_gap)}& .selected{inline-size:calc(var(--_icon-font-size))}}}}}}