.md-button-group-demo{inline-size:100%;max-inline-size:40rem;display:grid;justify-items:start;gap:var(--md-sys-measurement-space100)}.md-button-group{display:inline-flex;inline-size:max-content;align-items:center;gap:var(--_group-gap)}.md-button-group>.md-button{--_button-height: var(--_group-height);box-sizing:border-box}.md-button-group[data-control=standard]>.md-button{min-inline-size:0}.md-button-group[data-control=connected]>.md-button{--_group-current-inner: var(--_group-inner);--_group-radius: min( var(--_group-current-inner), calc(var(--_group-height) / 2) );--_group-outer-radius: min( var(--_group-outer), calc(var(--_group-height) / 2) );--_group-pressed-radius: min( var(--_group-pressed-inner), calc(var(--_group-height) / 2) );--_button-rest-shape: var(--_group-radius);--_button-pressed-shape: var(--_group-pressed-radius)}.md-button-group[data-control=connected]>.md-button:first-child{--_button-rest-shape: var(--_group-outer-radius) var(--_group-radius) var(--_group-radius) var(--_group-outer-radius);--_button-pressed-shape: var(--_group-outer-radius) var(--_group-pressed-radius) var(--_group-pressed-radius) var(--_group-outer-radius)}.md-button-group[data-control=connected]>.md-button:last-child{--_button-rest-shape: var(--_group-radius) var(--_group-outer-radius) var(--_group-outer-radius) var(--_group-radius);--_button-pressed-shape: var(--_group-pressed-radius) var(--_group-outer-radius) var(--_group-outer-radius) var(--_group-pressed-radius)}.md-button-group[data-control=connected]:dir(rtl)>.md-button:first-child{--_button-rest-shape: var(--_group-radius) var(--_group-outer-radius) var(--_group-outer-radius) var(--_group-radius);--_button-pressed-shape: var(--_group-pressed-radius) var(--_group-outer-radius) var(--_group-outer-radius) var(--_group-pressed-radius)}.md-button-group[data-control=connected]:dir(rtl)>.md-button:last-child{--_button-rest-shape: var(--_group-outer-radius) var(--_group-radius) var(--_group-radius) var(--_group-outer-radius);--_button-pressed-shape: var(--_group-outer-radius) var(--_group-pressed-radius) var(--_group-pressed-radius) var(--_group-outer-radius)}.md-button-group[data-control=connected]>.md-button[aria-pressed=true]{--_group-current-inner: var(--_group-selected-inner)}.md-group-check{display:inline-flex;flex:none;visibility:hidden}.md-group-check svg{inline-size:var(--_button-icon-size);block-size:var(--_button-icon-size);color:color-mix(in srgb,var(--_button-icon) calc(var(--_button-icon-opacity) * 100%),transparent)}.md-button[aria-pressed=true]>.md-group-check{visibility:visible}.md-button[aria-pressed=false]>.md-group-check+span{position:relative;inset-inline-start:calc((var(--_button-icon-size) + var(--_button-gap)) / -2)}.md-button-group[data-control=connected]>.md-outlined-button{--_button-outline-width: var(--_button-size-outline-width)}.md-button-group[data-control=connected]:is([data-size=xsmall],[data-size=small]){min-block-size:var(--md-sys-measurement-space600)}.md-button-group[data-control=connected]:is([data-size=xsmall],[data-size=small])>.md-button{min-inline-size:var(--md-sys-measurement-space600)}.md-button-group[data-control=connected]:is([data-size=xsmall],[data-size=small])>.md-button::after{content:"";position:absolute;inset-inline:0;inset-block-start:50%;block-size:var(--md-sys-measurement-space600);transform:translateY(-50%)}.md-button-group[data-control=connected]{inline-size:100%}.md-button-group[data-control=connected]>.md-button{flex:1}.md-button-group[data-control=standard]>.md-icon-button{--_icon-height:var(--_group-height);min-inline-size:0;box-sizing:border-box}.md-button-group:where([data-control=connected][data-size=large]){--_group-gap: var(--md-comp-button-group-connected-large-between-space);--_group-height: var(--md-comp-button-group-connected-large-container-height);--_group-outer: var(--md-comp-button-group-connected-large-container-shape);--_group-inner: var(--md-comp-button-group-connected-large-inner-corner-corner-size);--_group-pressed-inner: var(--md-comp-button-group-connected-large-pressed-inner-corner-corner-size);--_group-selected-inner: var(--md-comp-button-group-connected-large-selected-inner-corner-corner-size)}.md-button-group:where([data-control=connected][data-size=medium]){--_group-gap: var(--md-comp-button-group-connected-medium-between-space);--_group-height: var(--md-comp-button-group-connected-medium-container-height);--_group-outer: var(--md-comp-button-group-connected-medium-container-shape);--_group-inner: var(--md-comp-button-group-connected-medium-inner-corner-corner-size);--_group-pressed-inner: var(--md-comp-button-group-connected-medium-pressed-inner-corner-corner-size);--_group-selected-inner: var(--md-comp-button-group-connected-medium-selected-inner-corner-corner-size)}.md-button-group:where([data-control=connected][data-size=small]){--_group-gap: var(--md-comp-button-group-connected-small-between-space);--_group-height: var(--md-comp-button-group-connected-small-container-height);--_group-outer: var(--md-comp-button-group-connected-small-container-shape);--_group-inner: var(--md-comp-button-group-connected-small-inner-corner-corner-size);--_group-pressed-inner: var(--md-comp-button-group-connected-small-pressed-inner-corner-corner-size);--_group-selected-inner: var(--md-comp-button-group-connected-small-selected-inner-corner-corner-size)}.md-button-group:where([data-control=connected][data-size=xlarge]){--_group-gap: var(--md-comp-button-group-connected-xlarge-between-space);--_group-height: var(--md-comp-button-group-connected-xlarge-container-height);--_group-outer: var(--md-comp-button-group-connected-xlarge-container-shape);--_group-inner: var(--md-comp-button-group-connected-xlarge-inner-corner-corner-size);--_group-pressed-inner: var(--md-comp-button-group-connected-xlarge-pressed-inner-corner-corner-size);--_group-selected-inner: var(--md-comp-button-group-connected-xlarge-selected-inner-corner-corner-size)}.md-button-group:where([data-control=connected][data-size=xsmall]){--_group-gap: var(--md-comp-button-group-connected-xsmall-between-space);--_group-height: var(--md-comp-button-group-connected-xsmall-container-height);--_group-outer: var(--md-comp-button-group-connected-xsmall-container-shape);--_group-inner: var(--md-comp-button-group-connected-xsmall-inner-corner-corner-size);--_group-pressed-inner: var(--md-comp-button-group-connected-xsmall-pressed-inner-corner-corner-size);--_group-selected-inner: var(--md-comp-button-group-connected-xsmall-selected-inner-corner-corner-size)}.md-button-group:where([data-control=standard][data-size=large]){--_group-gap: var(--md-comp-button-group-standard-large-between-space);--_group-height: var(--md-comp-button-group-standard-large-container-height);--_group-width-damping: var(--md-comp-button-group-standard-large-pressed-item-width-motion-spring-dampening);--_group-width-stiffness: var(--md-comp-button-group-standard-large-pressed-item-width-motion-spring-stiffness);--_group-width-growth: var(--md-comp-button-group-standard-large-pressed-item-width-multiplier)}.md-button-group:where([data-control=standard][data-size=medium]){--_group-gap: var(--md-comp-button-group-standard-medium-between-space);--_group-height: var(--md-comp-button-group-standard-medium-container-height);--_group-width-damping: var(--md-comp-button-group-standard-medium-pressed-item-width-motion-spring-dampening);--_group-width-stiffness: var(--md-comp-button-group-standard-medium-pressed-item-width-motion-spring-stiffness);--_group-width-growth: var(--md-comp-button-group-standard-medium-pressed-item-width-multiplier)}.md-button-group:where([data-control=standard][data-size=small]){--_group-gap: var(--md-comp-button-group-standard-small-between-space);--_group-height: var(--md-comp-button-group-standard-small-container-height);--_group-width-damping: var(--md-comp-button-group-standard-small-pressed-item-width-motion-spring-dampening);--_group-width-stiffness: var(--md-comp-button-group-standard-small-pressed-item-width-motion-spring-stiffness);--_group-width-growth: var(--md-comp-button-group-standard-small-pressed-item-width-multiplier)}.md-button-group:where([data-control=standard][data-size=xlarge]){--_group-gap: var(--md-comp-button-group-standard-xlarge-between-space);--_group-height: var(--md-comp-button-group-standard-xlarge-container-height);--_group-width-damping: var(--md-comp-button-group-standard-xlarge-pressed-item-width-motion-spring-dampening);--_group-width-stiffness: var(--md-comp-button-group-standard-xlarge-pressed-item-width-motion-spring-stiffness);--_group-width-growth: var(--md-comp-button-group-standard-xlarge-pressed-item-width-multiplier)}.md-button-group:where([data-control=standard][data-size=xsmall]){--_group-gap: var(--md-comp-button-group-standard-xsmall-between-space);--_group-height: var(--md-comp-button-group-standard-xsmall-container-height);--_group-width-damping: var(--md-comp-button-group-standard-xsmall-pressed-item-width-motion-spring-dampening);--_group-width-stiffness: var(--md-comp-button-group-standard-xsmall-pressed-item-width-motion-spring-stiffness);--_group-width-growth: var(--md-comp-button-group-standard-xsmall-pressed-item-width-multiplier)}