') 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-1fenkb4{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: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-1fenkb4::-moz-focus-inner{border-style:none;}.css-1fenkb4.Mui-disabled{pointer-events:none;cursor:default;}@media print{.css-1fenkb4{-webkit-print-color-adjust:exact;color-adjust:exact;}}.css-1fenkb4:focus-visible{outline:3px solid hsla(210, 100%, 45%, 0.5);outline-offset:2px;}.css-1fenkb4:hover{-webkit-text-decoration:none;text-decoration:none;}.css-1fenkb4.Mui-disabled{color:rgba(0, 0, 0, 0.26);}@media (hover: hover){.css-1fenkb4: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-1fenkb4:hover{box-shadow:none;}.css-1fenkb4.Mui-focusVisible{box-shadow:none;}.css-1fenkb4:active{box-shadow:none;}.css-1fenkb4.Mui-disabled{box-shadow:none;}.css-1fenkb4 .MuiButton-startIcon{-webkit-transition:0.15s;transition:0.15s;margin-right:4px;margin-left:-1px;}.css-1fenkb4 .MuiButton-endIcon{-webkit-transition:0.15s;transition:0.15s;margin-left:4px;}.css-1fenkb4:hover{background-color:hsl(215, 15%, 97%);}.css-1fenkb4:active{background-color:hsl(215, 15%, 89%);}.css-1ur507a{display:inherit;margin-right:8px;margin-left:-4px;margin-left:-2px;}.css-1ur507a>*: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-x4suwh{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-x4suwh::-moz-focus-inner{border-style:none;}.css-x4suwh.Mui-disabled{pointer-events:none;cursor:default;}@media print{.css-x4suwh{-webkit-print-color-adjust:exact;color-adjust:exact;}}.css-x4suwh:focus-visible{outline:3px solid hsla(210, 100%, 45%, 0.5);outline-offset:2px;}.css-x4suwh:hover{background-color:var(--IconButton-hoverBg);}@media (hover: none){.css-x4suwh:hover{background-color:transparent;}}.css-x4suwh.Mui-disabled{background-color:transparent;color:rgba(0, 0, 0, 0.26);}.css-x4suwh:hover{border-color:hsl(215, 15%, 82%);background:hsl(215, 15%, 97%);}.css-x4suwh: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-9zaqii{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: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-9zaqii::-moz-focus-inner{border-style:none;}.css-9zaqii.Mui-disabled{pointer-events:none;cursor:default;}@media print{.css-9zaqii{-webkit-print-color-adjust:exact;color-adjust:exact;}}.css-9zaqii:focus-visible{outline:3px solid hsla(210, 100%, 45%, 0.5);outline-offset:2px;}.css-9zaqii:hover{-webkit-text-decoration:none;text-decoration:none;}.css-9zaqii.Mui-disabled{color:rgba(0, 0, 0, 0.26);}@media (hover: hover){.css-9zaqii: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-9zaqii:hover{box-shadow:none;}.css-9zaqii.Mui-focusVisible{box-shadow:none;}.css-9zaqii:active{box-shadow:none;}.css-9zaqii.Mui-disabled{box-shadow:none;}.css-9zaqii .MuiButton-startIcon{-webkit-transition:0.15s;transition:0.15s;margin-right:4px;margin-left:-1px;}.css-9zaqii .MuiButton-endIcon{-webkit-transition:0.15s;transition:0.15s;margin-left:4px;}.css-9zaqii:hover{background-color:hsla(210, 100%, 90%, 0.3);}.css-9zaqii: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-173idsg{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-173idsg.MuiTypography-body1>svg{margin-top:2px;}.css-173idsg svg:last-child{margin-left:2px;}.css-173idsg:focus-visible{outline:3px solid hsla(210, 100%, 45%, 0.5);outline-offset:2px;}.css-173idsg: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-irypel{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-irypel.MuiTypography-body1>svg{margin-top:2px;}.css-irypel svg:last-child{margin-left:2px;}.css-irypel:focus-visible{outline:3px solid hsla(210, 100%, 45%, 0.5);outline-offset:2px;}.css-irypel:hover{color:hsl(210, 100%, 38%);}.css-irypel>svg{font-size:13px;-webkit-transition:0.2s;transition:0.2s;}.css-irypel: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-3xp9o4{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-3xp9o4::-moz-focus-inner{border-style:none;}.css-3xp9o4.Mui-disabled{pointer-events:none;cursor:default;}@media print{.css-3xp9o4{-webkit-print-color-adjust:exact;color-adjust:exact;}}.css-3xp9o4:focus-visible{outline:3px solid hsla(210, 100%, 45%, 0.5);outline-offset:2px;}.css-3xp9o4:hover{background-color:var(--IconButton-hoverBg);}@media (hover: none){.css-3xp9o4:hover{background-color:transparent;}}.css-3xp9o4.Mui-disabled{background-color:transparent;color:rgba(0, 0, 0, 0.26);}.css-3xp9o4:hover{border-color:hsl(215, 15%, 82%);background:hsl(215, 15%, 97%);}.css-3xp9o4:active{background:hsl(215, 15%, 92%);}.css-3xp9o4 .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-1mqpwy8{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-bottom:16px;margin-left:4px;margin-right:4px;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;background-color:hsla(215, 15%, 97%, 0.4);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-1mqpwy8.MuiTypography-body1>svg{margin-top:2px;}.css-1mqpwy8 svg:last-child{margin-left:2px;}.css-1mqpwy8:focus-visible{outline:3px solid hsla(210, 100%, 45%, 0.5);outline-offset:2px;}.css-1mqpwy8:hover{color:hsl(210, 100%, 38%);}.css-1mqpwy8:hover,.css-1mqpwy8: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-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-1532b6q{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-1532b6q.MuiTypography-body1>svg{margin-top:2px;}.css-1532b6q svg:last-child{margin-left:2px;}.css-1532b6q:focus-visible{outline:3px solid hsla(210, 100%, 45%, 0.5);outline-offset:2px;}.css-1532b6q:hover{color:hsl(210, 100%, 38%);}.css-1532b6q:hover{border-left-color:hsl(215, 15%, 75%);color:hsl(215, 15%, 50%);}.css-1532b6q:active{border-left-color:hsl(210, 100%, 80%);color:hsl(210, 100%, 42%);}.css-1532b6q:active:hover{border-left-color:hsl(210, 100%, 42%);color:hsl(210, 100%, 42%);}.css-11labrl{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-11labrl.MuiTypography-body1>svg{margin-top:2px;}.css-11labrl svg:last-child{margin-left:2px;}.css-11labrl:focus-visible{outline:3px solid hsla(210, 100%, 45%, 0.5);outline-offset:2px;}.css-11labrl:hover{color:hsl(210, 100%, 38%);}.css-11labrl:hover{border-left-color:hsl(215, 15%, 75%);color:hsl(215, 15%, 50%);}.css-11labrl:active{border-left-color:hsl(210, 100%, 80%);color:hsl(210, 100%, 42%);}.css-11labrl:active:hover{border-left-color:hsl(210, 100%, 42%);color:hsl(210, 100%, 42%);}.css-19m7kbw{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;}.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-es0i9d{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-es0i9d.MuiTypography-body1>svg{margin-top:2px;}.css-es0i9d svg:last-child{margin-left:2px;}.css-es0i9d:focus-visible{outline:3px solid hsla(210, 100%, 45%, 0.5);outline-offset:2px;}.css-es0i9d:hover{color:hsl(210, 100%, 38%);}.css-es0i9d:hover{background-color:hsl(210, 100%, 96%);border-color:hsl(210, 100%, 80%);}.css-es0i9d: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-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 - Base UI 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.
MUI stands in solidarity with Ukraine. Contents