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

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

@layer design-system.groups{.standard-button-group{--_extended-measurement-space-225:1.125rem;--size-items:small;--_gap:var(--sys-measurement-space-150);--_padding-inline:var(--sys-measurement-space-75);gap:var(--_gap);padding-inline:var(--_padding-inline);display:flex;&:not(.normal){@container style(--width-items:narrow){--width-items:narrow}@container style(--width-items:wide){--width-items:wide}}&:not(.round){@container style(--shape-items:square){--shape-items:square}}&.narrow{--width-items:narrow}&.wide{--width-items:wide}&.square{--shape-items:square}&:not(.small){@container style(--size-items:extra-small){--size-items:extra-small;--_gap:var(--_extended-measurement-space-225);--_padding-inline:calc(var(--_extended-measurement-space-225) / 2)}@container style(--size-items:medium){--size-items:medium;--_gap:var(--sys-measurement-space-100);--_padding-inline:var(--sys-measurement-space-0)}@container style(--size-items:large){--size-items:large;--_gap:var(--sys-measurement-space-100);--_padding-inline:var(--sys-measurement-space-0)}@container style(--size-items:extra-large){--size-items:extra-large;--_gap:var(--sys-measurement-space-100);--_padding-inline:var(--sys-measurement-space-0)}}&.extra-small{--size-items:extra-small;--_gap:var(--_extended-measurement-space-225);--_padding-inline:calc(var(--_extended-measurement-space-225) / 2)}&.medium{--size-items:medium;--_gap:var(--sys-measurement-space-100);--_padding-inline:var(--sys-measurement-space-0)}&.large{--size-items:large;--_gap:var(--sys-measurement-space-100);--_padding-inline:var(--sys-measurement-space-0)}&.extra-large{--size-items:extra-large;--_gap:var(--sys-measurement-space-100);--_padding-inline:var(--sys-measurement-space-0)}}.standard-button-group{--_delta:0px;--_power:5px;& .button{transition:padding-inline var(--sys-motion-spring-fast-spatial-duration) var(--sys-motion-spring-fast-spatial);padding-inline:calc(var(--_padding-inline) + var(--_delta) / 2)}& .icon-button{transition:inline-size var(--sys-motion-spring-fast-spatial-duration) var(--sys-motion-spring-fast-spatial);margin-inline:calc(var(--_padding-inline) * -1);inline-size:calc(var(--_inline-size) + var(--_delta))}& .toggle-button{& .label{transition:padding-inline var(--sys-motion-spring-fast-spatial-duration) var(--sys-motion-spring-fast-spatial);padding-inline:calc(var(--_padding-inline) + var(--_delta) / 2)}}& .toggle-icon-button{& .label{transition:inline-size var(--sys-motion-spring-fast-spatial-duration) var(--sys-motion-spring-fast-spatial);margin-inline:calc(var(--_padding-inline) * -1);inline-size:calc(var(--_inline-size) + var(--_delta))}}&>:is(.button,.icon-button):not(:only-child){&:active{--_delta:var(--_power)}&:active+&,&:has(+&:active){--_delta:calc((var(--_power) / 2) * -1)}&:first-child:active+&,&:has(+&:last-child:active){--_delta:calc(var(--_power) * -1)}:is(.toggle-button,.toggle-icon-button):has(.input:active)+&,&:has(+:is(.toggle-button,.toggle-icon-button)>.input:active){--_delta:calc((var(--_power) / 2) * -1)}:is(.toggle-button,.toggle-icon-button):first-child:has(.input:active)+&,&:has(+:is(.toggle-button,.toggle-icon-button):last-child>.input:active){--_delta:calc(var(--_power) * -1)}}&>:is(.toggle-button,.toggle-icon-button):not(:only-child){&:has(.input:active){--_delta:var(--_power)}&:has(.input:active)+&,&:has(+&>.input:active){--_delta:calc((var(--_power) / 2) * -1)}&:first-child:has(.input:active)+&,&:has(+&:last-child>.input:active){--_delta:calc(var(--_power) * -1)}:is(.button,.icon-button):active+&,&:has(+:is(.button,.icon-button):active){--_delta:calc((var(--_power) / 2) * -1)}&:has(+:is(.button,.icon-button):last-child:active),:is(.button,.icon-button):first-child:active+&{--_delta:calc(var(--_power) * -1)}}}}