.md-split-demo{max-inline-size:100%;display:grid;justify-items:start;gap:var(--md-sys-measurement-space100)}.md-split-button{--_split-icon-offset: -1px;display:inline-flex;min-block-size:var(--md-sys-measurement-space600);align-items:center;gap:var(--_split-gap);max-inline-size:100%}.md-split-button>.md-button{--_split-inner-radius: min( var(--_split-inner), calc(var(--_split-height) / 2) );--_split-pressed-inner-radius: min( var(--_split-pressed-inner), calc(var(--_split-height) / 2) );--_split-outer-radius: min( var(--_split-outer), calc(var(--_split-height) / 2) );--_button-height: var(--_split-height);--_button-leading: var(--_split-item-leading);--_button-trailing: var(--_split-item-trailing)}.md-split-button>.md-split-leading{--_button-rest-shape: var(--_split-outer-radius) var(--_split-inner-radius) var(--_split-inner-radius) var(--_split-outer-radius);--_button-pressed-shape: var(--_split-outer-radius) var(--_split-pressed-inner-radius) var(--_split-pressed-inner-radius) var(--_split-outer-radius)}.md-split-button>.md-split-trailing{--_button-icon-size: var(--_split-item-icon-size);--_button-rest-shape: var(--_split-inner-radius) var(--_split-outer-radius) var(--_split-outer-radius) var(--_split-inner-radius);--_button-pressed-shape: var(--_split-pressed-inner-radius) var(--_split-outer-radius) var(--_split-outer-radius) var(--_split-pressed-inner-radius)}.md-split-button:dir(rtl)>.md-split-leading{--_button-rest-shape: var(--_split-inner-radius) var(--_split-outer-radius) var(--_split-outer-radius) var(--_split-inner-radius);--_button-pressed-shape: var(--_split-pressed-inner-radius) var(--_split-outer-radius) var(--_split-outer-radius) var(--_split-pressed-inner-radius)}.md-split-button:dir(rtl)>.md-split-trailing{--_button-rest-shape: var(--_split-outer-radius) var(--_split-inner-radius) var(--_split-inner-radius) var(--_split-outer-radius);--_button-pressed-shape: var(--_split-outer-radius) var(--_split-pressed-inner-radius) var(--_split-pressed-inner-radius) var(--_split-outer-radius)}.md-split-button>.md-button{transition:border-radius var(--_motion-fast-spatial-duration) var(--_motion-fast-spatial-easing),background-color var(--_button-effects-duration) var(--_button-easing),color var(--_button-effects-duration) var(--_button-easing),box-shadow var(--_button-effects-duration) var(--_button-easing)}.md-split-button[data-size=medium]{--_split-icon-offset: -2px}.md-split-button[data-size=large]{--_split-icon-offset: -3px}.md-split-button[data-size=xlarge]{--_split-icon-offset: -6px}.md-split-button>.md-button::after{content:"";position:absolute;inline-size:100%;min-inline-size:var(--md-sys-measurement-space600);block-size:100%;min-block-size:var(--md-sys-measurement-space600);inset:50% auto auto 50%;transform:translate(-50%,-50%)}.md-split-button>.md-split-leading::after{inset-inline-start:auto;inset-inline-end:0;transform:translateY(-50%)}.md-split-button>.md-split-trailing>svg{translate:var(--_split-icon-offset) 0;rotate:0deg;transition:translate var(--_motion-fast-spatial-duration) var(--_motion-fast-spatial-easing),rotate var(--_motion-fast-spatial-duration) var(--_motion-fast-spatial-easing)}.md-split-button:dir(rtl)>.md-split-trailing>svg{translate:calc(-1 * var(--_split-icon-offset)) 0}.md-split-button>.md-split-trailing:is(:active,[data-pressed],[data-button-state=pressed],[aria-expanded=true]):not(:disabled)>svg{translate:0 0;rotate:180deg}.md-split-button:dir(rtl)>.md-split-trailing:is(:active,[data-pressed],[data-button-state=pressed],[aria-expanded=true]):not(:disabled)>svg{rotate:-180deg}@media(prefers-reduced-motion:reduce){.md-split-button>.md-split-trailing>svg{transition:none}}.md-split-menu{position:fixed;inset:auto;margin:0;max-inline-size:calc(100vw - 2 * var(--md-sys-measurement-space100))}@media(prefers-reduced-motion:reduce){.md-split-button>.md-button{transition:none}}.md-split-button>.md-split-trailing[aria-expanded=true]{--_split-inner: var(--_split-item-selected-inner)}.md-split-button:where([data-size=large]){--_split-gap: var(--md-comp-split-button-large-between-space);--_split-height: var(--md-comp-split-button-large-container-height);--_split-outer: var(--md-comp-split-button-large-container-shape);--_split-inner: var(--md-comp-split-button-large-inner-corner-corner-size);--_split-pressed-inner: var(--md-comp-split-button-large-inner-corner-pressed-corner-size)}.md-split-button:where([data-size=medium]){--_split-gap: var(--md-comp-split-button-medium-between-space);--_split-height: var(--md-comp-split-button-medium-container-height);--_split-outer: var(--md-comp-split-button-medium-container-shape);--_split-inner: var(--md-comp-split-button-medium-inner-corner-corner-size);--_split-pressed-inner: var(--md-comp-split-button-medium-inner-corner-pressed-corner-size)}.md-split-button:where([data-size=small]){--_split-gap: var(--md-comp-split-button-small-between-space);--_split-height: var(--md-comp-split-button-small-container-height);--_split-outer: var(--md-comp-split-button-small-container-shape);--_split-inner: var(--md-comp-split-button-small-inner-corner-corner-size);--_split-pressed-inner: var(--md-comp-split-button-small-inner-corner-pressed-corner-size)}.md-split-button:where([data-size=xlarge]){--_split-gap: var(--md-comp-split-button-xlarge-between-space);--_split-height: var(--md-comp-split-button-xlarge-container-height);--_split-outer: var(--md-comp-split-button-xlarge-container-shape);--_split-inner: var(--md-comp-split-button-xlarge-inner-corner-corner-size);--_split-pressed-inner: var(--md-comp-split-button-xlarge-inner-corner-pressed-corner-size)}.md-split-button:where([data-size=xsmall]){--_split-gap: var(--md-comp-split-button-xsmall-between-space);--_split-height: var(--md-comp-split-button-xsmall-container-height);--_split-outer: var(--md-comp-split-button-xsmall-container-shape);--_split-inner: var(--md-comp-split-button-xsmall-inner-corner-corner-size);--_split-pressed-inner: var(--md-comp-split-button-xsmall-inner-corner-pressed-corner-size)}.md-split-button:where([data-size=xsmall]){--_split-outer: var(--md-comp-split-button-xsmall-outer-corner-corner-size)}.md-split-button:where([data-size=large])>.md-split-leading{--_split-item-leading: var(--md-comp-split-button-large-leading-button-leading-space);--_split-item-trailing: var(--md-comp-split-button-large-leading-button-trailing-space)}.md-split-button:where([data-size=large])>.md-split-trailing{--_split-item-icon-size: var(--md-comp-split-button-large-trailing-button-icon-size);--_split-item-selected-inner: var(--md-comp-split-button-large-trailing-button-inner-corner-selected-corner-size);--_split-item-leading: var(--md-comp-split-button-large-trailing-button-leading-space);--_split-item-trailing: var(--md-comp-split-button-large-trailing-button-trailing-space)}.md-split-button:where([data-size=medium])>.md-split-leading{--_split-item-leading: var(--md-comp-split-button-medium-leading-button-leading-space);--_split-item-trailing: var(--md-comp-split-button-medium-leading-button-trailing-space)}.md-split-button:where([data-size=medium])>.md-split-trailing{--_split-item-icon-size: var(--md-comp-split-button-medium-trailing-button-icon-size);--_split-item-selected-inner: var(--md-comp-split-button-medium-trailing-button-inner-corner-selected-corner-size);--_split-item-leading: var(--md-comp-split-button-medium-trailing-button-leading-space);--_split-item-trailing: var(--md-comp-split-button-medium-trailing-button-trailing-space)}.md-split-button:where([data-size=small])>.md-split-leading{--_split-item-leading: var(--md-comp-split-button-small-leading-button-leading-space);--_split-item-trailing: var(--md-comp-split-button-small-leading-button-trailing-space)}.md-split-button:where([data-size=small])>.md-split-trailing{--_split-item-icon-size: var(--md-comp-split-button-small-trailing-button-icon-size);--_split-item-selected-inner: var(--md-comp-split-button-small-trailing-button-inner-corner-selected-corner-size);--_split-item-leading: var(--md-comp-split-button-small-trailing-button-leading-space);--_split-item-trailing: var(--md-comp-split-button-small-trailing-button-trailing-space)}.md-split-button:where([data-size=xlarge])>.md-split-leading{--_split-item-leading: var(--md-comp-split-button-xlarge-leading-button-leading-space);--_split-item-trailing: var(--md-comp-split-button-xlarge-leading-button-trailing-space)}.md-split-button:where([data-size=xlarge])>.md-split-trailing{--_split-item-icon-size: var(--md-comp-split-button-xlarge-trailing-button-icon-size);--_split-item-selected-inner: var(--md-comp-split-button-xlarge-trailing-button-inner-corner-selected-corner-size);--_split-item-leading: var(--md-comp-split-button-xlarge-trailing-button-leading-space);--_split-item-trailing: var(--md-comp-split-button-xlarge-trailing-button-trailing-space)}.md-split-button:where([data-size=xsmall])>.md-split-leading{--_split-item-leading: var(--md-comp-split-button-xsmall-leading-button-leading-space);--_split-item-trailing: var(--md-comp-split-button-xsmall-leading-button-trailing-space)}.md-split-button:where([data-size=xsmall])>.md-split-trailing{--_split-item-icon-size: var(--md-comp-split-button-xsmall-trailing-button-icon-size);--_split-item-selected-inner: var(--md-comp-split-button-xsmall-trailing-button-inner-corner-selected-corner-size);--_split-item-leading: var(--md-comp-split-button-xsmall-trailing-button-leading-space);--_split-item-trailing: var(--md-comp-split-button-xsmall-trailing-button-trailing-space)}.md-split-button:where([data-size=large])>.md-button:where(:where(:hover,[data-component-state=hovered]):not(:disabled):not([aria-disabled=true]):not(:has(>input:disabled,>select:disabled)):not(:where([data-touch]))){--_split-inner: var(--md-comp-split-button-large-inner-corner-hovered-corner-size)}.md-split-button:where([data-size=medium])>.md-button:where(:where(:hover,[data-component-state=hovered]):not(:disabled):not([aria-disabled=true]):not(:has(>input:disabled,>select:disabled)):not(:where([data-touch]))){--_split-inner: var(--md-comp-split-button-medium-inner-corner-hovered-corner-size)}.md-split-button:where([data-size=small])>.md-button:where(:where(:hover,[data-component-state=hovered]):not(:disabled):not([aria-disabled=true]):not(:has(>input:disabled,>select:disabled)):not(:where([data-touch]))){--_split-inner: var(--md-comp-split-button-small-inner-corner-hovered-corner-size)}.md-split-button:where([data-size=xlarge])>.md-button:where(:where(:hover,[data-component-state=hovered]):not(:disabled):not([aria-disabled=true]):not(:has(>input:disabled,>select:disabled)):not(:where([data-touch]))){--_split-inner: var(--md-comp-split-button-xlarge-inner-corner-hovered-corner-size)}.md-split-button:where([data-size=xsmall])>.md-button:where(:where(:hover,[data-component-state=hovered]):not(:disabled):not([aria-disabled=true]):not(:has(>input:disabled,>select:disabled)):not(:where([data-touch]))){--_split-inner: var(--md-comp-split-button-xsmall-inner-corner-hovered-corner-size)}