@layer design-system.components{.toggle-icon-button{--_fill:0;--_button-transitions:border-radius var(--sys-motion-spring-fast-spatial-duration) var(--sys-motion-spring-fast-spatial), background var(--sys-motion-spring-fast-effects-duration) var(--sys-motion-spring-fast-effects), outline-width var(--sys-motion-spring-fast-spatial-duration) var(--sys-motion-spring-pop-focus);--_radius-full:calc(min((var(--_block-size) - var(--_padding-block) * 2) / 2, (var(--_inline-size) - var(--_padding-inline) * 2) / 2));--_shadow:none;--_background:var(--sys-color-surface-container);--_border:none;--_cursor:pointer;--_color:var(--sys-color-on-surface-variant);--_state:none;--_outline-width:0px;place-items:center;inline-size:fit-content;display:inline-grid;&:has(.input:not(:disabled)){&:has(.input:hover){--_state:oklch(from var(--_color) l c h / 8%)}&:has(.input:focus-visible){--_state:oklch(from var(--_color) l c h / 10%);--_outline-width:3px}&:has(.input:active){--_border-radius:var(--_active-button-corner);--_state:oklch(from var(--_color) l c h / 10%)}&:has(.input:checked){--_background:var(--sys-color-primary);--_fill:1;--_color:var(--sys-color-on-primary)}&.tonal{--_background:var(--sys-color-secondary-container);--_color:var(--sys-color-on-secondary-container);&:has(.input:checked){--_background:var(--sys-color-secondary);--_color:var(--sys-color-on-secondary)}}&.outline{--_background:transparent;--_border:1px solid var(--sys-color-outline-variant);--_color:var(--sys-color-on-surface-variant);&:has(.input:checked){--_background:var(--sys-color-inverse-surface);--_color:var(--sys-color-inverse-on-surface)}}&.standard{--_background:none;--_color:var(--sys-color-on-surface-variant);&:has(.input:checked){--_background:none;--_color:var(--sys-color-primary)}}}&:has(.input:disabled){--_background:oklch(from var(--sys-color-on-surface) l c h / 10%);--_cursor:not-allowed;--_color:oklch(from var(--sys-color-on-surface) l c h / 38%);--_state:none;&.outline{--_border:1px solid var(--sys-color-outline-variant)}}& .input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;border:none;outline:none;grid-area:1/1;block-size:100%;inline-size:100%}& .label{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;cursor:var(--_cursor);isolation:isolate;padding-inline:var(--_padding-inline);padding-block:var(--_padding-block);inline-size:var(--_inline-size);block-size:var(--_block-size);color:var(--_color);font:var(--_font);user-select:none;background:0 0;border:none;outline:none;grid-area:1/1;place-items:center;text-decoration:none;display:inline-grid;position:relative;& .icon{inline-size:var(--_icon-font-size);block-size:var(--_icon-font-size);font-size:var(--_icon-font-size);line-height:1;font-family:var(--ref-typeface-symbols);font-variation-settings:"FILL" var(--_fill,0), "wght" 400, "GRAD" 0, "opsz" 24;font-feature-settings:"liga";white-space:nowrap;grid-area:1/1;display:inline-block;overflow:clip;&:is(svg){fill:var(--_color)}&:is(img){object-fit:cover}.toggle-icon-button:has(&.selected){& .selected{display:none}&:has(input:checked){& .icon{display:none}& .selected{display:block}}}}&:before{z-index:-1;transition:var(--_button-transitions);outline:var(--_outline-width) solid var(--sys-color-secondary);outline-offset:2px;box-shadow:var(--_shadow);border:var(--_border);border-radius:var(--_border-radius);background:var(--_background);content:"";grid-area:1/1;block-size:100%;inline-size:100%;display:block}&:after{z-index:-1;transition:var(--_button-transitions);border-radius:var(--_border-radius);background:var(--_state);content:"";grid-area:1/1;block-size:100%;inline-size:100%;display:block}}}.toggle-icon-button{--_initial-button-corner:var(--_radius-full);--_selected-button-corner:var(--sys-shape-corner-medium);--_active-button-corner:var(--sys-shape-corner-small);--_initial-square-button-corner:var(--sys-shape-corner-medium);--_selected-square-button-corner:var(--_radius-full);--_border-radius:var(--_initial-button-corner);--_icon-font-size:1.25rem;--_block-size:3rem;--_padding-block:var(--sys-measurement-space-50);--_normal-inline-size:3rem;--_normal-padding-inline:var(--sys-measurement-space-50);--_narrow-inline-size:3rem;--_narrow-padding-inline:var(--sys-measurement-space-100);--_wide-inline-size:3.25rem;--_wide-padding-inline:var(--sys-measurement-space-0);--_inline-size:var(--_normal-inline-size);--_padding-inline:var(--_normal-padding-inline);&:not(.normal){@container style(--width-items:narrow){--_inline-size:var(--_narrow-inline-size);--_padding-inline:var(--_narrow-padding-inline)}@container style(--width-items:wide){--_inline-size:var(--_wide-inline-size);--_padding-inline:var(--_wide-padding-inline)}}&.narrow{--_inline-size:var(--_narrow-inline-size);--_padding-inline:var(--_narrow-padding-inline)}&.wide{--_inline-size:var(--_wide-inline-size);--_padding-inline:var(--_wide-padding-inline)}&:not(.round){@container style(--shape-items:square){--_border-radius:var(--_initial-square-button-corner)}}&.square{--_border-radius:var(--_initial-square-button-corner)}&:has(.input:checked){--_border-radius:var(--_selected-button-corner);&:not(.round){@container style(--shape-items:square){--_border-radius:var(--_selected-square-button-corner)}}&.square{--_border-radius:var(--_selected-square-button-corner)}}&:not(.small){@container style(--size-items:extra-small){--_block-size:3rem;--_icon-font-size:1.25rem;--_padding-block:var(--sys-measurement-space-100);--_selected-button-corner:var(--sys-shape-corner-medium);--_initial-square-button-corner:var(--sys-shape-corner-medium);--_active-button-corner:var(--sys-shape-corner-small);--_normal-inline-size:3rem;--_normal-padding-inline:var(--sys-measurement-space-100);--_narrow-inline-size:3rem;--_narrow-padding-inline:var(--sys-measurement-space-125);--_wide-inline-size:3rem;--_wide-padding-inline:var(--sys-measurement-space-50)}@container style(--size-items:medium){--_block-size:3.5rem;--_icon-font-size:1.5rem;--_padding-block:var(--sys-measurement-space-0);--_selected-button-corner:var(--sys-shape-corner-large);--_initial-square-button-corner:var(--sys-shape-corner-large);--_active-button-corner:var(--sys-shape-corner-medium);--_normal-inline-size:3.5rem;--_normal-padding-inline:var(--sys-measurement-space-0);--_narrow-inline-size:3.5rem;--_narrow-padding-inline:var(--sys-measurement-space-50);--_wide-inline-size:4.5rem;--_wide-padding-inline:var(--sys-measurement-space-0)}@container style(--size-items:large){--_block-size:6rem;--_icon-font-size:2rem;--_padding-block:var(--sys-measurement-space-0);--_selected-button-corner:var(--sys-shape-corner-extra-large);--_initial-square-button-corner:var(--sys-shape-corner-extra-large);--_active-button-corner:var(--sys-shape-corner-large);--_normal-inline-size:6rem;--_normal-padding-inline:var(--sys-measurement-space-0);--_narrow-inline-size:4rem;--_narrow-padding-inline:var(--sys-measurement-space-0);--_wide-inline-size:8rem;--_wide-padding-inline:var(--sys-measurement-space-0)}@container style(--size-items:extra-large){--_block-size:8.5rem;--_icon-font-size:2.5rem;--_padding-block:var(--sys-measurement-space-0);--_selected-button-corner:var(--sys-shape-corner-extra-large);--_initial-square-button-corner:var(--sys-shape-corner-extra-large);--_active-button-corner:var(--sys-shape-corner-large);--_normal-inline-size:8.5rem;--_normal-padding-inline:var(--sys-measurement-space-0);--_narrow-inline-size:6.5rem;--_narrow-padding-inline:var(--sys-measurement-space-0);--_wide-inline-size:11.5rem;--_wide-padding-inline:var(--sys-measurement-space-0)}}&.extra-small{--_block-size:3rem;--_icon-font-size:1.25rem;--_padding-block:var(--sys-measurement-space-100);--_selected-button-corner:var(--sys-shape-corner-medium);--_initial-square-button-corner:var(--sys-shape-corner-medium);--_active-button-corner:var(--sys-shape-corner-small);--_normal-inline-size:3rem;--_normal-padding-inline:var(--sys-measurement-space-100);--_narrow-inline-size:3rem;--_narrow-padding-inline:var(--sys-measurement-space-125);--_wide-inline-size:3rem;--_wide-padding-inline:var(--sys-measurement-space-50)}&.medium{--_block-size:3.5rem;--_icon-font-size:1.5rem;--_padding-block:var(--sys-measurement-space-0);--_selected-button-corner:var(--sys-shape-corner-large);--_initial-square-button-corner:var(--sys-shape-corner-large);--_active-button-corner:var(--sys-shape-corner-medium);--_normal-inline-size:3.5rem;--_normal-padding-inline:var(--sys-measurement-space-0);--_narrow-inline-size:3.5rem;--_narrow-padding-inline:var(--sys-measurement-space-50);--_wide-inline-size:4.5rem;--_wide-padding-inline:var(--sys-measurement-space-0)}&.large{--_block-size:6rem;--_icon-font-size:2rem;--_padding-block:var(--sys-measurement-space-0);--_selected-button-corner:var(--sys-shape-corner-extra-large);--_initial-square-button-corner:var(--sys-shape-corner-extra-large);--_active-button-corner:var(--sys-shape-corner-large);--_normal-inline-size:6rem;--_normal-padding-inline:var(--sys-measurement-space-0);--_narrow-inline-size:4rem;--_narrow-padding-inline:var(--sys-measurement-space-0);--_wide-inline-size:8rem;--_wide-padding-inline:var(--sys-measurement-space-0)}&.extra-large{--_block-size:8.5rem;--_icon-font-size:2.5rem;--_padding-block:var(--sys-measurement-space-0);--_selected-button-corner:var(--sys-shape-corner-extra-large);--_initial-square-button-corner:var(--sys-shape-corner-extra-large);--_active-button-corner:var(--sys-shape-corner-large);--_normal-inline-size:8.5rem;--_normal-padding-inline:var(--sys-measurement-space-0);--_narrow-inline-size:6.5rem;--_narrow-padding-inline:var(--sys-measurement-space-0);--_wide-inline-size:11.5rem;--_wide-padding-inline:var(--sys-measurement-space-0)}}}