') center center no-repeat;}.css-1ydgzvd.focusVisible{background-color:#79b;}.css-1ydgzvd.checked{-webkit-transform:translateX(24px);-moz-transform:translateX(24px);-ms-transform:translateX(24px);transform:translateX(24px);}.css-1ydgzvd.checked::before{background-image:url('data:image/svg+xml;utf8, ');}.css-u9fjb1{position:absolute;width:100%;height:100%;top:0;left:0;opacity:0;z-index:1;margin:0;cursor:pointer;}.css-46az0k{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin-top:32px;margin-bottom:32px;}.css-28r57m{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}@media (min-width:0px){.css-28r57m{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.css-28r57m>:not(style):not(style){margin:0;}.css-28r57m>:not(style)~:not(style){margin-top:24px;}}@media (min-width:600px){.css-28r57m{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}.css-28r57m>:not(style):not(style){margin:0;}.css-28r57m>:not(style)~:not(style){margin-left:8px;}}.css-128wqv7{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;background-color:transparent;outline:0;border:0;margin:0;border-radius:0;padding:0;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;-moz-appearance:none;-webkit-appearance:none;-webkit-text-decoration:none;text-decoration:none;color:inherit;-webkit-transition:all 100ms ease-in;transition:all 100ms ease-in;text-transform:initial;font-weight:700;letter-spacing:0;font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:0.875rem;line-height:1.75;scroll-snap-margin-top:calc(var(--MuiDocs-header-height) + 32px);scroll-margin-top:calc(var(--MuiDocs-header-height) + 32px);min-width:64px;padding:6px 16px;border:0;border-radius:12px;-webkit-transition:background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;transition:background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;padding:6px 8px;color:var(--variant-textColor);background-color:var(--variant-textBg);--variant-textColor:hsl(210, 14%, 87%);--variant-outlinedColor:hsl(210, 14%, 87%);--variant-outlinedBorder:hsla(210, 14%, 87%, 0.5);--variant-containedColor:hsl(210, 14%, 22%);--variant-containedBg:hsl(210, 14%, 87%);padding:4px 5px;font-size:0.8125rem;box-shadow:none;-webkit-transition:background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;transition:background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;-webkit-transition:all 120ms ease-in;transition:all 120ms ease-in;padding:6px 10px;font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:0.8125rem;font-weight:500;border-radius:10px;color:hsl(215, 15%, 22%);}.css-128wqv7::-moz-focus-inner{border-style:none;}.css-128wqv7.Mui-disabled{pointer-events:none;cursor:default;}@media print{.css-128wqv7{-webkit-print-color-adjust:exact;color-adjust:exact;}}.css-128wqv7:focus-visible{outline:3px solid hsla(210, 100%, 45%, 0.5);outline-offset:2px;}.css-128wqv7:hover{-webkit-text-decoration:none;text-decoration:none;}.css-128wqv7.Mui-disabled{color:rgba(0, 0, 0, 0.26);}@media (hover: hover){.css-128wqv7:hover{--variant-containedBg:hsl(210, 14%, 60.9%);--variant-textBg:hsla(210, 14%, 87%, 0.04);--variant-outlinedBorder:hsl(210, 14%, 87%);--variant-outlinedBg:hsla(210, 14%, 87%, 0.04);}}.css-128wqv7:hover{box-shadow:none;}.css-128wqv7.Mui-focusVisible{box-shadow:none;}.css-128wqv7:active{box-shadow:none;}.css-128wqv7.Mui-disabled{box-shadow:none;}.css-128wqv7.MuiButton-loading{color:transparent;}.css-128wqv7 .MuiButton-startIcon{-webkit-transition:0.15s;transition:0.15s;margin-right:4px;margin-left:-1px;}.css-128wqv7 .MuiButton-endIcon{-webkit-transition:0.15s;transition:0.15s;margin-left:4px;}.css-128wqv7:hover{background-color:hsl(215, 15%, 97%);}.css-128wqv7:active{background-color:hsl(215, 15%, 89%);}.css-1siv2hp{display:inherit;margin-right:8px;margin-left:-4px;margin-left:-2px;}.css-1siv2hp>*:nth-of-type(1){font-size:18px;}.css-1drcvtn{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:1em;height:1em;display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-transition:fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;transition:fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;fill:currentColor;font-size:1.5rem;margin-right:4px;}.css-1r9kwv0{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;gap:4px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.css-1uu3wz3{margin:0;font-size:0.875rem;line-height:1.5;letter-spacing:0;font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-weight:400;scroll-snap-margin-top:calc(var(--MuiDocs-header-height) + 32px);scroll-margin-top:calc(var(--MuiDocs-header-height) + 32px);color:hsl(215, 15%, 22%);}.css-3z0pvq{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;background-color:transparent;outline:0;border:0;margin:0;border-radius:0;padding:0;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;-moz-appearance:none;-webkit-appearance:none;-webkit-text-decoration:none;text-decoration:none;color:inherit;-webkit-transition:all 100ms ease-in;transition:all 100ms ease-in;text-align:center;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;font-size:1.5rem;padding:8px;border-radius:50%;color:rgba(0, 0, 0, 0.54);-webkit-transition:background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;transition:background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;--IconButton-hoverBg:rgba(0, 0, 0, 0.04);border-radius:12px;-webkit-transition:all 100ms ease-in;transition:all 100ms ease-in;}.css-3z0pvq::-moz-focus-inner{border-style:none;}.css-3z0pvq.Mui-disabled{pointer-events:none;cursor:default;}@media print{.css-3z0pvq{-webkit-print-color-adjust:exact;color-adjust:exact;}}.css-3z0pvq:focus-visible{outline:3px solid hsla(210, 100%, 45%, 0.5);outline-offset:2px;}.css-3z0pvq:hover{background-color:var(--IconButton-hoverBg);}@media (hover: none){.css-3z0pvq:hover{background-color:transparent;}}.css-3z0pvq.Mui-disabled{background-color:transparent;color:rgba(0, 0, 0, 0.26);}.css-3z0pvq.MuiIconButton-loading{color:transparent;}.css-3z0pvq:hover{border-color:hsl(215, 15%, 82%);background:hsl(215, 15%, 97%);}.css-3z0pvq:active{background:hsl(215, 15%, 92%);}.css-cgbyev{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:1em;height:1em;display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-transition:fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;transition:fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;fill:currentColor;font-size:1.5rem;font-size:15px;color:hsl(215, 15%, 22%);}.css-1n7d4b{margin:0;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;border-width:0;border-style:solid;border-color:hsl(215, 15%, 92%);border-bottom-width:thin;border-color:hsl(215, 15%, 92%);margin-top:16px;margin-bottom:16px;}.css-9jay18{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}.css-14rl8k6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;background-color:transparent;outline:0;border:0;margin:0;border-radius:0;padding:0;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;-moz-appearance:none;-webkit-appearance:none;-webkit-text-decoration:none;text-decoration:none;color:inherit;-webkit-transition:all 100ms ease-in;transition:all 100ms ease-in;text-transform:initial;font-weight:700;letter-spacing:0;font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:0.875rem;line-height:1.75;scroll-snap-margin-top:calc(var(--MuiDocs-header-height) + 32px);scroll-margin-top:calc(var(--MuiDocs-header-height) + 32px);min-width:64px;padding:6px 16px;border:0;border-radius:12px;-webkit-transition:background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;transition:background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;padding:6px 8px;color:var(--variant-textColor);background-color:var(--variant-textBg);--variant-textColor:hsl(210, 100%, 45%);--variant-outlinedColor:hsl(210, 100%, 45%);--variant-outlinedBorder:hsla(210, 100%, 45%, 0.5);--variant-containedColor:#fff;--variant-containedBg:hsl(210, 100%, 45%);padding:4px 5px;font-size:0.8125rem;box-shadow:none;-webkit-transition:background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;transition:background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;-webkit-transition:all 120ms ease-in;transition:all 120ms ease-in;padding:6px 10px;font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:0.8125rem;font-weight:500;border-radius:10px;color:hsl(210, 100%, 42%);}.css-14rl8k6::-moz-focus-inner{border-style:none;}.css-14rl8k6.Mui-disabled{pointer-events:none;cursor:default;}@media print{.css-14rl8k6{-webkit-print-color-adjust:exact;color-adjust:exact;}}.css-14rl8k6:focus-visible{outline:3px solid hsla(210, 100%, 45%, 0.5);outline-offset:2px;}.css-14rl8k6:hover{-webkit-text-decoration:none;text-decoration:none;}.css-14rl8k6.Mui-disabled{color:rgba(0, 0, 0, 0.26);}@media (hover: hover){.css-14rl8k6:hover{--variant-containedBg:hsl(210, 100%, 38%);--variant-textBg:hsla(210, 100%, 45%, 0.04);--variant-outlinedBorder:hsl(210, 100%, 45%);--variant-outlinedBg:hsla(210, 100%, 45%, 0.04);}}.css-14rl8k6:hover{box-shadow:none;}.css-14rl8k6.Mui-focusVisible{box-shadow:none;}.css-14rl8k6:active{box-shadow:none;}.css-14rl8k6.Mui-disabled{box-shadow:none;}.css-14rl8k6.MuiButton-loading{color:transparent;}.css-14rl8k6 .MuiButton-startIcon{-webkit-transition:0.15s;transition:0.15s;margin-right:4px;margin-left:-1px;}.css-14rl8k6 .MuiButton-endIcon{-webkit-transition:0.15s;transition:0.15s;margin-left:4px;}.css-14rl8k6:hover{background-color:hsla(210, 100%, 90%, 0.3);}.css-14rl8k6:active{background-color:hsla(210, 100%, 90%, 0.5);}.css-q7mezt{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:1em;height:1em;display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-transition:fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;transition:fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;fill:currentColor;font-size:1.5rem;}.css-dpal3j{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}@media (min-width:0px){.css-dpal3j{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.css-dpal3j>:not(style):not(style){margin:0;}.css-dpal3j>:not(style)~:not(style){margin-top:24px;}}@media (min-width:600px){.css-dpal3j{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}.css-dpal3j>:not(style):not(style){margin:0;}.css-dpal3j>:not(style)~:not(style){margin-left:8px;}}.css-1icctab{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;gap:8px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}.css-8czjic{margin:0;font:inherit;line-height:inherit;letter-spacing:inherit;color:hsl(210, 100%, 45%);-webkit-text-decoration:none;text-decoration:none;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-weight:600;color:hsl(210, 100%, 42%);}.css-8czjic.MuiTypography-body1>svg{margin-top:2px;}.css-8czjic svg:last-child{margin-left:2px;}.css-8czjic:focus-visible{outline:3px solid hsla(210, 100%, 45%, 0.5);outline-offset:2px;}.css-8czjic:hover{color:hsl(210, 100%, 38%);}.css-1quk7ah{vertical-align:bottom;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;color:hsl(200, 10%, 4%);}.css-1aqg8hk{margin:0;font-size:1rem;line-height:1.5;letter-spacing:0;font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-weight:400;scroll-snap-margin-top:calc(var(--MuiDocs-header-height) + 32px);scroll-margin-top:calc(var(--MuiDocs-header-height) + 32px);color:hsl(215, 15%, 65%);font-size:13px;opacity:70%;}.css-40lmk4{margin:0;font:inherit;line-height:inherit;letter-spacing:inherit;color:hsl(210, 100%, 45%);-webkit-text-decoration:none;text-decoration:none;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-weight:600;color:hsl(210, 100%, 42%);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:2px;font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:0.8125rem;font-weight:500;color:hsl(210, 100%, 42%);}.css-40lmk4.MuiTypography-body1>svg{margin-top:2px;}.css-40lmk4 svg:last-child{margin-left:2px;}.css-40lmk4:focus-visible{outline:3px solid hsla(210, 100%, 45%, 0.5);outline-offset:2px;}.css-40lmk4:hover{color:hsl(210, 100%, 38%);}.css-40lmk4>svg{font-size:13px;-webkit-transition:0.2s;transition:0.2s;}.css-40lmk4:hover>svg{-webkit-transform:translateX(2px);-moz-transform:translateX(2px);-ms-transform:translateX(2px);transform:translateX(2px);}.css-5ax1kt{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;gap:8px;}.css-q8575k{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;background-color:transparent;outline:0;border:0;margin:0;border-radius:0;padding:0;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;-moz-appearance:none;-webkit-appearance:none;-webkit-text-decoration:none;text-decoration:none;color:inherit;-webkit-transition:all 100ms ease-in;transition:all 100ms ease-in;text-align:center;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;font-size:1.5rem;padding:8px;border-radius:50%;color:rgba(0, 0, 0, 0.54);-webkit-transition:background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;transition:background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;--IconButton-hoverBg:rgba(0, 0, 0, 0.04);padding:5px;font-size:1.125rem;border-radius:12px;-webkit-transition:all 100ms ease-in;transition:all 100ms ease-in;height:32px;width:32px;}.css-q8575k::-moz-focus-inner{border-style:none;}.css-q8575k.Mui-disabled{pointer-events:none;cursor:default;}@media print{.css-q8575k{-webkit-print-color-adjust:exact;color-adjust:exact;}}.css-q8575k:focus-visible{outline:3px solid hsla(210, 100%, 45%, 0.5);outline-offset:2px;}.css-q8575k:hover{background-color:var(--IconButton-hoverBg);}@media (hover: none){.css-q8575k:hover{background-color:transparent;}}.css-q8575k.Mui-disabled{background-color:transparent;color:rgba(0, 0, 0, 0.26);}.css-q8575k.MuiIconButton-loading{color:transparent;}.css-q8575k:hover{border-color:hsl(215, 15%, 82%);background:hsl(215, 15%, 97%);}.css-q8575k:active{background:hsl(215, 15%, 92%);}.css-q8575k .MuiSvgIcon-root{font-size:1.125rem;}.css-xf0l99{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:1em;height:1em;display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-transition:fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;transition:fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;fill:currentColor;font-size:1.25rem;color:hsl(215, 15%, 65%);}.css-1bqobp2{top:var(--MuiDocs-header-height);margin-top:var(--MuiDocs-header-height);padding-left:6px;position:-webkit-sticky;position:sticky;height:calc(100vh - var(--MuiDocs-header-height));overflow-y:auto;padding-top:32px;padding-bottom:56px;padding-right:32px;display:none;scrollbar-width:thin;}@media (min-width:900px){.css-1bqobp2{display:block;}}.css-14e31vo{margin:0;font-size:1rem;line-height:1.5;letter-spacing:0;font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-weight:400;scroll-snap-margin-top:calc(var(--MuiDocs-header-height) + 32px);scroll-margin-top:calc(var(--MuiDocs-header-height) + 32px);padding:8px 0px 8px 11.2px;font-size:0.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.1rem;color:hsl(215, 15%, 40%);}.css-t1ynre{padding:0;margin:0;list-style:none;}.css-1bokhcy{margin:0;font-size:1rem;line-height:1.5;letter-spacing:0;font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-weight:400;scroll-snap-margin-top:calc(var(--MuiDocs-header-height) + 32px);scroll-margin-top:calc(var(--MuiDocs-header-height) + 32px);padding:0;margin:0;list-style:none;}.css-1t4v9it{margin:0;font:inherit;line-height:inherit;letter-spacing:inherit;color:hsl(210, 100%, 45%);display:block;-webkit-text-decoration:none;text-decoration:none;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-weight:600;color:hsl(210, 100%, 42%);box-sizing:border-box;padding:6px 0 6px 12px;border-left:1px solid transparent;display:block;font-size:0.8125rem;font-weight:500;text-overflow:ellipsis;overflow:hidden;color:hsl(215, 15%, 12%);}.css-1t4v9it.MuiTypography-body1>svg{margin-top:2px;}.css-1t4v9it svg:last-child{margin-left:2px;}.css-1t4v9it:focus-visible{outline:3px solid hsla(210, 100%, 45%, 0.5);outline-offset:2px;}.css-1t4v9it:hover{color:hsl(210, 100%, 38%);}.css-1t4v9it:hover{border-left-color:hsl(215, 15%, 75%);color:hsl(215, 15%, 50%);}.css-1t4v9it:active{border-left-color:hsl(210, 100%, 80%);color:hsl(210, 100%, 42%);}.css-1t4v9it:active:hover{border-left-color:hsl(210, 100%, 42%);color:hsl(210, 100%, 42%);}.css-vz27s0{margin:0;font:inherit;line-height:inherit;letter-spacing:inherit;color:hsl(210, 100%, 45%);display:block;-webkit-text-decoration:none;text-decoration:none;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-weight:600;color:hsl(210, 100%, 42%);box-sizing:border-box;padding:6px 0 6px 12px;border-left:1px solid transparent;display:block;font-size:0.8125rem;font-weight:500;text-overflow:ellipsis;overflow:hidden;color:hsl(215, 15%, 12%);padding:6px 0 6px 24px;}.css-vz27s0.MuiTypography-body1>svg{margin-top:2px;}.css-vz27s0 svg:last-child{margin-left:2px;}.css-vz27s0:focus-visible{outline:3px solid hsla(210, 100%, 45%, 0.5);outline-offset:2px;}.css-vz27s0:hover{color:hsl(210, 100%, 38%);}.css-vz27s0:hover{border-left-color:hsl(215, 15%, 75%);color:hsl(215, 15%, 50%);}.css-vz27s0:active{border-left-color:hsl(210, 100%, 80%);color:hsl(210, 100%, 42%);}.css-vz27s0:active:hover{border-left-color:hsl(210, 100%, 42%);color:hsl(210, 100%, 42%);}.css-1exy4yq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin-top:16px;margin-left:4px;margin-right:4px;}.css-s18vc2{box-sizing:border-box;width:100%;height:45px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;border-left:1px solid;border-right:1px solid;border-bottom:0;border-color:hsl(215, 15%, 92%);-webkit-transition:background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;transition:background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;}.css-s18vc2:first-of-type{border-top:1px solid hsl(215, 15%, 92%);border-radius:12px 12px 0 0;}.css-s18vc2:hover{background-color:hsl(215, 15%, 97%);}.css-s18vc2:focus-visible{outline:3px solid hsla(210, 100%, 45%, 0.5);outline-offset:-3px;}.css-s18vc2 img{display:inline-block;}.css-12rnmal{height:25px;width:116px;}.css-25nckq{margin:0;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;border-width:0;border-style:solid;border-color:hsl(215, 15%, 92%);border-bottom-width:thin;border-color:hsl(215, 15%, 92%);}.css-1h9x0ym{height:29px;width:70px;}.css-133cnwy{margin:0;font:inherit;line-height:inherit;letter-spacing:inherit;color:hsl(210, 100%, 45%);-webkit-text-decoration:none;text-decoration:none;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-weight:600;color:hsl(210, 100%, 42%);height:45px;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;border:1px dashed;border-color:hsl(215, 15%, 82%);border-radius:0 0 12px 12px;background-color:hsla(210, 100%, 96%, 0.4);-webkit-transition:color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;transition:color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;}.css-133cnwy.MuiTypography-body1>svg{margin-top:2px;}.css-133cnwy svg:last-child{margin-left:2px;}.css-133cnwy:focus-visible{outline:3px solid hsla(210, 100%, 45%, 0.5);outline-offset:2px;}.css-133cnwy:hover{color:hsl(210, 100%, 38%);}.css-133cnwy:hover{background-color:hsl(210, 100%, 96%);border-color:hsl(210, 100%, 80%);}.css-133cnwy:focus-visible{outline-offset:-3px;}.css-4xnl8u{margin:0;display:inline-block;font-size:0.75rem;line-height:1.5;letter-spacing:0;font-weight:700;font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";scroll-snap-margin-top:calc(var(--MuiDocs-header-height) + 32px);scroll-margin-top:calc(var(--MuiDocs-header-height) + 32px);font-weight:500;}.css-v674ym{margin:0;font:inherit;line-height:inherit;letter-spacing:inherit;color:hsl(210, 100%, 45%);-webkit-text-decoration:none;text-decoration:none;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-weight:600;color:hsl(210, 100%, 42%);margin-top:16px;margin-left:4px;margin-right:4px;margin-bottom:16px;padding:8px;padding-left:10px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:10px;border:1px solid;border-color:hsl(215, 15%, 92%);border-radius:12px;transition-property:all;transition-timing:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}.css-v674ym.MuiTypography-body1>svg{margin-top:2px;}.css-v674ym svg:last-child{margin-left:2px;}.css-v674ym:focus-visible{outline:3px solid hsla(210, 100%, 45%, 0.5);outline-offset:2px;}.css-v674ym:hover{color:hsl(210, 100%, 38%);}.css-v674ym:hover,.css-v674ym:focus-visible{background-color:hsl(210, 100%, 96%);border-color:hsl(210, 100%, 80%);}.css-1yuqj86{border-radius:3px;overflow:auto;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}.css-spfw6s{height:6px;width:16px;background-color:#0057B7;}.css-1u18uw9{height:6px;width:16px;background-color:#FFD700;}.css-pq6m89{margin:0;display:inline-block;font-size:0.75rem;line-height:1.5;letter-spacing:0;font-weight:700;font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";scroll-snap-margin-top:calc(var(--MuiDocs-header-height) + 32px);scroll-margin-top:calc(var(--MuiDocs-header-height) + 32px);color:hsl(215, 15%, 22%);font-weight:500;}.css-1f23llj{position:fixed;bottom:24px;right:24px;z-index:10;}.css-10tto1t{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;background-color:transparent;outline:0;border:0;margin:0;border-radius:0;padding:0;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;-moz-appearance:none;-webkit-appearance:none;-webkit-text-decoration:none;text-decoration:none;color:inherit;-webkit-transition:all 100ms ease-in;transition:all 100ms ease-in;text-transform:initial;font-weight:700;letter-spacing:0;font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:0.875rem;line-height:1.75;scroll-snap-margin-top:calc(var(--MuiDocs-header-height) + 32px);scroll-margin-top:calc(var(--MuiDocs-header-height) + 32px);min-height:36px;-webkit-transition:background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;transition:background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;border-radius:50%;padding:0;min-width:0;width:56px;height:56px;z-index:1050;box-shadow:0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);color:rgba(0, 0, 0, 0.87);background-color:hsl(215, 15%, 82%);width:40px;height:40px;background-color:hsl(210, 100%, 96%);border:1px solid hsl(210, 100%, 80%);box-shadow:0px 4px 12px rgba(0, 0, 0, 0.1);}.css-10tto1t::-moz-focus-inner{border-style:none;}.css-10tto1t.Mui-disabled{pointer-events:none;cursor:default;}@media print{.css-10tto1t{-webkit-print-color-adjust:exact;color-adjust:exact;}}.css-10tto1t:focus-visible{outline:3px solid hsla(210, 100%, 45%, 0.5);outline-offset:2px;}.css-10tto1t:active{box-shadow:0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12);}.css-10tto1t:hover{background-color:#f5f5f5;-webkit-text-decoration:none;text-decoration:none;}@media (hover: none){.css-10tto1t:hover{background-color:hsl(215, 15%, 82%);}}.css-10tto1t.Mui-focusVisible{box-shadow:0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);}.css-10tto1t.Mui-disabled{color:rgba(0, 0, 0, 0.26);box-shadow:none;background-color:rgba(0, 0, 0, 0.12);}.css-10tto1t:hover{background-color:hsl(210, 100%, 80%);}.css-8fsf1z{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:1em;height:1em;display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-transition:fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;transition:fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;fill:currentColor;font-size:1.5rem;color:hsl(210, 100%, 30%);}
React Switch component and hook - MUI Base Skip to content
Switch Switches are UI elements that let users choose between two states—most commonly on/off.
The Switch component provides users with a switch for toggling between two mutually exclusive states.
import { Switch } from '@mui/base/Switch' ;
Copy Copied (or Ctrl + C)
The Switch component is composed of a root <span>
that houses three interior slots—a track, a thumb, and an input:
< span class = " base-Switch-root" >
< span class = " base-Switch-track" > </ span>
< span class = " base-Switch-thumb" > </ span>
< input type = " checkbox" class = " base-Switch-input" />
</ span>
Copy Copied (or Ctrl + C)
Use the slots
prop to override the root or any other interior slot:
< Switch slots = { { root : 'div' , track : 'div' } } />
Copy Copied (or Ctrl + C)
Use the slotProps
prop to pass custom props to internal slots.
The following code snippet applies a CSS class called my-thumb
to the thumb slot:
< Switch slotProps = { { thumb : { className : 'my-thumb' } } } />
Copy Copied (or Ctrl + C)
In TypeScript, you can specify the custom component type used in the slots.root
as a generic parameter of the unstyled component.
This way, you can safely provide the custom root's props directly on the component:
< Switch< typeof CustomComponent> slots= { { root: CustomComponent } } customProp / >
Copy Copied (or Ctrl + C)
The same applies for props specific to custom primitive elements:
< Switch< 'input' > slots= { { root: 'input' } } autoFocus= { true } / >
Copy Copied (or Ctrl + C)
import { useSwitch } from '@mui/base/useSwitch' ;
Copy Copied (or Ctrl + C)
The useSwitch
hook lets you apply the functionality of a Switch to a fully custom component.
It returns props to be placed on the custom component, along with fields representing the component's internal state.
Hooks do not support slot props , but they do support customization props .
Hooks give you the most room for customization, but require more work to implement.
With hooks, you can take full control over how your component is rendered, and define all the custom props and CSS classes you need.
You may not need to use hooks unless you find that you're limited by the customization options of their component counterparts—for instance, if your component requires significantly different HTML structure .
Press Enter to start editing
Press Enter to start editing
To make the Switch component accessible, you should ensure that the corresponding labels reflect the Switch's current state.
Contents
MUI stands in solidarity with Ukraine.