@mantine/core/styles/Switch.css

React components library focused on usability, accessibility and developer experience

.m-5f93f3bb{--switch-height-xs:calc(1rem*var(--mantine-scale));--switch-height-sm:calc(1.25rem*var(--mantine-scale));--switch-height-md:calc(1.5rem*var(--mantine-scale));--switch-height-lg:calc(1.875rem*var(--mantine-scale));--switch-height-xl:calc(2.25rem*var(--mantine-scale));--switch-width-xs:calc(2rem*var(--mantine-scale));--switch-width-sm:calc(2.375rem*var(--mantine-scale));--switch-width-md:calc(2.875rem*var(--mantine-scale));--switch-width-lg:calc(3.5rem*var(--mantine-scale));--switch-width-xl:calc(4.5rem*var(--mantine-scale));--switch-thumb-size-xs:calc(0.75rem*var(--mantine-scale));--switch-thumb-size-sm:calc(0.875rem*var(--mantine-scale));--switch-thumb-size-md:calc(1.125rem*var(--mantine-scale));--switch-thumb-size-lg:calc(1.375rem*var(--mantine-scale));--switch-thumb-size-xl:calc(1.75rem*var(--mantine-scale));--switch-label-font-size-xs:calc(0.3125rem*var(--mantine-scale));--switch-label-font-size-sm:calc(0.375rem*var(--mantine-scale));--switch-label-font-size-md:calc(0.4375rem*var(--mantine-scale));--switch-label-font-size-lg:calc(0.5625rem*var(--mantine-scale));--switch-label-font-size-xl:calc(0.6875rem*var(--mantine-scale));--switch-track-label-padding-xs:calc(0.0625rem*var(--mantine-scale));--switch-track-label-padding-sm:calc(0.125rem*var(--mantine-scale));--switch-track-label-padding-md:calc(0.125rem*var(--mantine-scale));--switch-track-label-padding-lg:calc(0.1875rem*var(--mantine-scale));--switch-track-label-padding-xl:calc(0.1875rem*var(--mantine-scale));--switch-height:var(--switch-height-sm);--switch-width:var(--switch-width-sm);--switch-thumb-size:var(--switch-thumb-size-sm);--switch-label-font-size:var(--switch-label-font-size-sm);--switch-track-label-padding:var(--switch-track-label-padding-sm);--switch-radius:calc(62.5rem*var(--mantine-scale));--switch-color:var(--mantine-primary-color-filled);position:relative}.m-926b4011{height:0;opacity:0;padding:0;position:absolute;white-space:nowrap;width:0}.m-926b4011,.m-9307d992{margin:0;overflow:hidden}.m-9307d992{-webkit-tap-highlight-color:transparent;align-items:center;appearance:none;background-color:var(--_switch-bg);border:calc(.0625rem*var(--mantine-scale)) solid var(--_switch-bd);border-radius:var(--switch-radius);color:var(--_switch-color);cursor:var(--_switch-cursor,var(--mantine-cursor-type));display:flex;font-size:var(--switch-label-font-size);font-weight:600;height:var(--switch-height);line-height:0;min-width:var(--switch-width);order:var(--_switch-order,1);position:relative;transition:background-color .15s ease,border-color .15s ease;user-select:none;z-index:0}.m-926b4011:focus-visible+.m-9307d992{outline:calc(.125rem*var(--mantine-scale)) solid var(--mantine-primary-color-filled);outline-offset:calc(.125rem*var(--mantine-scale))}.m-926b4011:checked+.m-9307d992{--_switch-bg:var(--switch-color);--_switch-bd:var(--switch-color);--_switch-color:var(--mantine-color-white)}.m-926b4011:disabled+.m-9307d992,.m-926b4011[data-disabled]+.m-9307d992{--_switch-bg:var(--_switch-disabled-color);--_switch-bd:var(--_switch-disabled-color);--_switch-cursor:not-allowed}[data-mantine-color-scheme=light] .m-9307d992{--_switch-bg:var(--mantine-color-gray-2);--_switch-bd:var(--mantine-color-gray-3);--_switch-color:var(--mantine-color-gray-6);--_switch-disabled-color:var(--mantine-color-gray-2)}[data-mantine-color-scheme=dark] .m-9307d992{--_switch-bg:var(--mantine-color-dark-6);--_switch-bd:var(--mantine-color-dark-4);--_switch-color:var(--mantine-color-dark-1);--_switch-disabled-color:var(--mantine-color-dark-4)}.m-9307d992[data-error]{--_switch-bd:var(--mantine-color-error)}.m-9307d992[data-label-position=left]{--_switch-order:2}.m-93039a1d{background-color:var(--_switch-thumb-bg,var(--mantine-color-white));border:calc(.0625rem*var(--mantine-scale)) solid var(--_switch-thumb-bd);border-radius:var(--switch-radius);display:flex;height:var(--switch-thumb-size);left:var(--_switch-thumb-left,var(--switch-track-label-padding));position:absolute;transition:left .15s ease;width:var(--switch-thumb-size);z-index:1}[dir=rtl] .m-93039a1d{left:unset;right:var(--_switch-thumb-left,var(--switch-track-label-padding));transition:right .15s ease}.m-93039a1d>*{margin:auto}.m-926b4011:checked+*>.m-93039a1d{--_switch-thumb-left:calc(100% - var(--switch-thumb-size) - var(--switch-track-label-padding));--_switch-thumb-bd:var(--mantine-color-white)}.m-926b4011:disabled+*>.m-93039a1d,.m-926b4011[data-disabled]+*>.m-93039a1d{--_switch-thumb-bd:var(--_switch-thumb-bg-disabled);--_switch-thumb-bg:var(--_switch-thumb-bg-disabled)}[data-mantine-color-scheme=light] .m-93039a1d{--_switch-thumb-bd:var(--mantine-color-gray-3);--_switch-thumb-bg-disabled:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-93039a1d{--_switch-thumb-bd:var(--mantine-color-white);--_switch-thumb-bg-disabled:var(--mantine-color-dark-3)}.m-8277e082{display:grid;height:100%;margin:0 0 0 calc(var(--switch-thumb-size) + var(--switch-track-label-padding));min-width:calc(var(--switch-width) - var(--switch-thumb-size));padding-inline:var(--switch-track-label-padding);place-content:center;transition:margin .15s ease}.m-926b4011:checked+*>.m-8277e082,[dir=rtl] .m-8277e082{margin:0 calc(var(--switch-thumb-size) + var(--switch-track-label-padding)) 0 0}[dir=rtl] .m-926b4011:checked+*>.m-8277e082{margin:0 0 0 calc(var(--switch-thumb-size) + var(--switch-track-label-padding))}