@material/switch
Version:
The Material Components for the web switch component
1 lines • 133 kB
Source Map (JSON)
{"version":3,"sources":["webpack:///./packages/mdc-switch/styles.scss","webpack:///./packages/material-components-web/node_modules/@material/theme/_css.scss","webpack:///./packages/material-components-web/node_modules/@material/theme/_gss.scss","webpack:///styles.scss","webpack:///./packages/mdc-switch/_switch.scss","webpack:///./packages/material-components-web/node_modules/@material/dom/_dom.scss","webpack:///./packages/material-components-web/node_modules/@material/rtl/_rtl.scss","webpack:///./packages/material-components-web/node_modules/@material/ripple/_ripple.scss","webpack:///./packages/material-components-web/node_modules/@material/animation/_animation.scss","webpack:///./packages/material-components-web/node_modules/@material/focus-ring/_focus-ring.scss","webpack:///./stdin","webpack:///./packages/mdc-switch/_switch-theme.scss","webpack:///./packages/material-components-web/node_modules/@material/ripple/_ripple-theme.scss","webpack:///./packages/material-components-web/node_modules/@material/elevation/_elevation-theme.scss"],"names":[],"mappings":"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A;EACA,wBA/BgB;EAgChB,uBAhCgB;ANwTtB;AE7RI;EIPA;IAeI;ENyRN;AACF;;AOjWA;ETmCM;ECZF;EDwBA;AEwTJ;AQ1BI;EV1SE;ECZF;EDwBA;AE6TJ;;AQ/BI;EV1SE;ECZF;EDwBA;AEmUJ;;AQrCI;EV1SE;ECZF;EDwBA;AEyUJ;;AQ3CI;EV1SE;ECZF;EDwBA;AE+UJ;;AQjDI;EV1SE;ECZF;EDwBA;AEqVJ;;AQvDI;EV1SE;ECZF;EDwBA;AE2VJ;;AQ7DI;EV1SE;ECZF;EDwBA;AEiWJ;;AQnEI;EV1SE;ECZF;EDwBA;AEuWJ;;AQzEI;EV1SE;ECZF;EDwBA;AE6WJ;;AQ/EI;EV1SE;ECZF;EDwBA;AEmXJ;;AQ9DI;EVjUE;ECZF;EDwBA;AEyXJ;AQ3CE;EV9UE;EAZE;ECZF;EDwBA;AE+XJ;AQjDE;EV9UE;EAZE;ECZF;EDwBA;AEqYJ;AQjDE;;EVhWI;ECZF;EDwBA;AE2YJ;AQtCI;EVjXE;ECZF;EDwBA;AEgZJ;;AQpCE;EVxXI;ECZF;EDwBA;AEsZJ;AQpCE;EV9XI;ECZF;EDwBA;AE2ZJ;AQrCE;EVlYI;ECZF;EDwBA;AEgaJ;AQtBE;EVtZI;ECZF;EDwBA;AEqaJ;;AQ3BE;EVtZI;ECZF;EDwBA;AE2aJ;;AQjCE;EVtZI;ECZF;EDwBA;AEibJ;;AQvCE;EVtZI;ECZF;EDwBA;AEubJ;;AQrBE;EV9aI;ECZF;EDwBA;AE6bJ;;AQ3BE;EV9aI;ECZF;EDwBA;AEmcJ;;AQfE;EVhcI;ECZF;EDwBA;EAZE;ECZF;EDwBA;AE4cJ;;AQxBE;EVhcI;ECZF;EDwBA;EAZE;ECZF;EDwBA;AEqdJ;;ASzYI;;EXxFE;ECZF;EDwBA;AE4dJ;;AShZI;;EXxFE;ECZF;EDwBA;AEmeJ;;ASvZI;;EXxFE;ECZF;EDwBA;AE0eJ;;AS9ZI;;EXxFE;ECZF;EDwBA;AEifJ;;ASraI;;EXxFE;ECZF;EDwBA;AEwfJ;;AS5aI;;EXxFE;ECZF;EDwBA;AE+fJ;;AS1CE;EXjeI;ECZF;EDwBA;AEqgBJ;;AShDE;EA9QI;EXnNA;ECZF;EDwBA;AE4gBJ;;AS3SM;EAEI;AT6SV;ASxSQ;EAEI,yBAhRO;EX0Bb;ECZF;EDwBA;AEshBJ;ASjSI;EXrPA;AEyhBJ;;ASpEE;EXjeI;ECZF;EDwBA;AE+hBJ;;AS1EE;EA9QI;EXnNA;ECZF;EDwBA;AEsiBJ;;ASrUM;EAEI;ATuUV;ASlUQ;EAEI,yBAhRO;EX0Bb;ECZF;EDwBA;AEgjBJ;AS3TI;EXrPA;AEmjBJ;;AQlCE;EV7hBI;ECZF;EDwBA;EAZE;ECZF;EDwBA;AE4jBJ;AQpCE;EVpiBI;ECZF;EDwBA;AEikBJ;AQ7BE;EVhjBI;ECZF;EDwBA;AEskBJ;;AQNE;EV5kBI;ECZF;EDwBA;AE4kBJ;;AQZE;EV5kBI;ECZF;EDwBA;AEklBJ;;AQlBE;EV5kBI;ECZF;EDwBA;AEwlBJ;;AQxBE;EV5kBI;ECZF;EDwBA;AE8lBJ;;AQ9BE;EV5kBI;ECZF;EDwBA;AEomBJ;;AQRE;EVxmBI;ECZF;EDwBA;AE0mBJ;;AQdE;EVxmBI;ECZF;EDwBA;AEgnBJ;;AQpBE;EVxmBI;ECZF;EDwBA;AEsnBJ;;AQ1BE;EVxmBI;ECZF;EDwBA;AE4nBJ;;AQhCE;EVxmBI;ECZF;EDwBA;AEkoBJ;;AQhCE;EV9mBI;ECZF;EDwBA;AEwoBJ;;AEpnBI;EM0TF;IErHI;EVobJ;EQ/TA;IErHI;EVubJ;EQ3SE;IVjXE;ICZF;IDwBA;EEqpBF;;EQ3QA;IVtZI;ICZF;IDwBA;EE2pBF;;EQjRA;IVtZI;ICZF;IDwBA;EEiqBF;;EQvRA;IVtZI;ICZF;IDwBA;EEuqBF;;EQ7RA;IVtZI;ICZF;IDwBA;EE6qBF;;EQ3QA;IV9aI;ICZF;IDwBA;EEmrBF;;EQjRA;IV9aI;ICZF;IDwBA;EEyrBF;;EQrJA;IVhjBI;ICZF;IDwBA;EE+rBF;AACF,C","file":"mdc.switch.css","sourcesContent":["//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/theme/custom-properties';\n@use '@material/base/mixins' as base-mixins;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/theme/theme';\n@use '@material/theme/theme-color';\n@use './elevation-theme';\n\n@mixin core-styles($query: feature-targeting.all()) {\n $feat-animation: feature-targeting.create-target($query, animation);\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @for $z-value from 0 through 24 {\n .mdc-elevation--z#{$z-value} {\n @include elevation-theme.elevation($z-value, $query: $query);\n }\n }\n\n .mdc-elevation-transition {\n @include feature-targeting.targets($feat-animation) {\n transition: elevation-theme.transition-value();\n }\n\n @include feature-targeting.targets($feat-structure) {\n will-change: elevation-theme.$property;\n }\n }\n}\n\n///\n/// Called once per application to set up the global default elevation styles.\n///\n@mixin overlay-common($query: feature-targeting.all()) {\n $feat-animation: feature-targeting.create-target($query, animation);\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-elevation-overlay {\n @include feature-targeting.targets($feat-structure) {\n @include base-mixins.emit-once('mdc-elevation/common/structure') {\n position: absolute;\n border-radius: inherit;\n pointer-events: none;\n\n @include theme.property(\n opacity,\n custom-properties.create(--mdc-elevation-overlay-opacity, 0)\n );\n }\n }\n\n @include feature-targeting.targets($feat-animation) {\n @include base-mixins.emit-once('mdc-elevation/common/animation') {\n transition: elevation-theme.overlay-transition-value();\n }\n }\n\n @include base-mixins.emit-once('mdc-elevation/common/color') {\n $fill-color: custom-properties.create(\n --mdc-elevation-overlay-color,\n elevation-theme.$overlay-color\n );\n @include elevation-theme.overlay-fill-color($fill-color, $query: $query);\n }\n }\n}\n","//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use 'sass:list';\n@use 'sass:map';\n@use 'sass:meta';\n@use './gss';\n\n/// When true, add an additional property/value declaration before declarations\n/// that use advanced features such as custom properties or CSS functions. This\n/// adds fallback support for older browsers such as IE11 that do not support\n/// these features at the cost of additional CSS. Set this variable to false to\n/// disable generating fallback declarations.\n$enable-fallback-declarations: true !default;\n\n/// Writes a CSS property/value declaration. This mixin is used throughout the\n/// theme package for consistency for dynamically setting CSS property values.\n///\n/// This mixin may optionally take a fallback value. For advanced features such\n/// as custom properties or CSS functions like min and max, a fallback value is\n/// recommended to support older browsers.\n///\n/// @param {String} $property - The CSS property of the declaration.\n/// @param {*} $value - The value of the CSS declaration. The value should be\n/// resolved by other theme functions first (i.e. custom property Maps and\n/// Material theme keys are not supported in this mixin). If the value is\n/// null, no declarations will be emitted.\n/// @param {*} $fallback - An optional fallback value for older browsers. If\n/// provided, a second property/value declaration will be added before the\n/// main property/value declaration.\n/// @param {Map} $gss - An optional Map of GSS annotations to add.\n/// @param {Bool} $important - If true, add `!important` to the declaration.\n@mixin declaration(\n $property,\n $value,\n $fallback-value: null,\n $gss: (),\n $important: false\n) {\n // Normally setting a null value to a property will not emit CSS, so mixins\n // wouldn't need to check this. However, Sass will throw an error if the\n // interpolated property is a custom property.\n @if $value != null {\n $important-rule: if($important, ' !important', '');\n\n @if $fallback-value and $enable-fallback-declarations {\n @include gss.annotate($gss);\n #{$property}: #{$fallback-value} #{$important-rule};\n\n // Add @alternate to annotations.\n $gss: map.merge(\n $gss,\n (\n alternate: true,\n )\n );\n }\n\n @include gss.annotate($gss);\n #{$property}: #{$value}#{$important-rule};\n }\n}\n\n/// Unpacks shorthand values for CSS properties (i.e. lists of 1-3 values).\n/// If a list of 4 values is given, it is returned as-is.\n///\n/// Examples:\n///\n/// unpack-value(4px) => 4px 4px 4px 4px\n/// unpack-value(4px 2px) => 4px 2px 4px 2px\n/// unpack-value(4px 2px 2px) => 4px 2px 2px 2px\n/// unpack-value(4px 2px 0 2px) => 4px 2px 0 2px\n///\n/// @param {Number | Map | List} $value - List of 1 to 4 value numbers.\n/// @return {List} a List of 4 value numbers.\n@function unpack-value($value) {\n @if meta.type-of($value) == 'map' or list.length($value) == 1 {\n @return $value $value $value $value;\n } @else if list.length($value) == 4 {\n @return $value;\n } @else if list.length($value) == 3 {\n @return list.nth($value, 1) list.nth($value, 2) list.nth($value, 3)\n list.nth($value, 2);\n } @else if list.length($value) == 2 {\n @return list.nth($value, 1) list.nth($value, 2) list.nth($value, 1)\n list.nth($value, 2);\n }\n\n @error \"Invalid CSS property value: '#{$value}' is more than 4 values\";\n}\n","//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use 'sass:list';\n@use 'sass:map';\n@use 'sass:meta';\n\n/// Adds optional GSS annotation comments. Useful for theme mixins where one or\n/// more properties are set indirectly.\n///\n/// Annotations may be provided as a Map of annotations or as named arguments.\n///\n/// @example - scss\n/// @include annotate((noflip: true));\n/// left: 0;\n///\n/// @example - scss\n/// @include annotate($noflip: true);\n/// left: 0;\n///\n/// @example - css\n/// /* @noflip */ /*rtl:ignore*/\n/// left: 0;\n///\n/// @param {Map} $annotations - Map of annotations. Values must be set to `true`\n/// for an annotation to be added.\n@mixin annotate($annotations...) {\n $keywords: meta.keywords($annotations);\n @if list.length($annotations) > 0 {\n $annotations: list.nth($annotations, 1);\n } @else {\n $annotations: $keywords;\n }\n\n @if (map.get($annotations, alternate) == true) {\n /* @alternate */\n }\n\n // noflip must be the last tag right before the property\n @if (map.get($annotations, noflip) == true) {\n /* @noflip */ /*rtl:ignore*/\n }\n}\n",".mdc-elevation-overlay {\n position: absolute;\n border-radius: inherit;\n pointer-events: none;\n opacity: 0;\n /* @alternate */\n opacity: var(--mdc-elevation-overlay-opacity, 0);\n transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);\n background-color: #fff;\n /* @alternate */\n background-color: var(--mdc-elevation-overlay-color, #fff);\n}\n\n.mdc-switch {\n align-items: center;\n background: none;\n border: none;\n cursor: pointer;\n display: inline-flex;\n flex-shrink: 0;\n margin: 0;\n outline: none;\n overflow: visible;\n padding: 0;\n position: relative;\n}\n.mdc-switch:disabled {\n cursor: default;\n pointer-events: none;\n}\n\n.mdc-switch__track {\n overflow: hidden;\n position: relative;\n width: 100%;\n}\n.mdc-switch__track::before, .mdc-switch__track::after {\n border: 1px solid transparent;\n border-radius: inherit;\n box-sizing: border-box;\n content: \"\";\n height: 100%;\n /* @noflip */\n /*rtl:ignore*/\n left: 0;\n position: absolute;\n width: 100%;\n}\n@media screen and (forced-colors: active) {\n .mdc-switch__track::before, .mdc-switch__track::after {\n border-color: currentColor;\n }\n}\n.mdc-switch__track::before {\n transition: transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1);\n transform: translateX(0);\n}\n.mdc-switch__track::after {\n transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1);\n transform: translateX(-100%);\n}\n[dir=rtl] .mdc-switch__track::after, .mdc-switch__track[dir=rtl]::after {\n /*rtl:begin:ignore*/\n transform: translateX(100%);\n /*rtl:end:ignore*/\n}\n\n.mdc-switch--selected .mdc-switch__track::before {\n transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1);\n transform: translateX(100%);\n}\n[dir=rtl] .mdc-switch--selected .mdc-switch__track::before, .mdc-switch--selected .mdc-switch__track[dir=rtl]::before {\n /*rtl:begin:ignore*/\n transform: translateX(-100%);\n /*rtl:end:ignore*/\n}\n\n.mdc-switch--selected .mdc-switch__track::after {\n transition: transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1);\n transform: translateX(0);\n}\n\n.mdc-switch__handle-track {\n height: 100%;\n pointer-events: none;\n position: absolute;\n top: 0;\n transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1);\n /* @noflip */\n /*rtl:ignore*/\n left: 0;\n /* @noflip */\n /*rtl:ignore*/\n right: auto;\n transform: translateX(0);\n}\n[dir=rtl] .mdc-switch__handle-track, .mdc-switch__handle-track[dir=rtl] {\n /*rtl:begin:ignore*/\n /* @noflip */\n /*rtl:ignore*/\n left: auto;\n /* @noflip */\n /*rtl:ignore*/\n right: 0;\n /*rtl:end:ignore*/\n}\n\n.mdc-switch--selected .mdc-switch__handle-track {\n transform: translateX(100%);\n}\n[dir=rtl] .mdc-switch--selected .mdc-switch__handle-track, .mdc-switch--selected .mdc-switch__handle-track[dir=rtl] {\n /*rtl:begin:ignore*/\n transform: translateX(-100%);\n /*rtl:end:ignore*/\n}\n\n.mdc-switch__handle {\n display: flex;\n pointer-events: auto;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n /* @noflip */\n /*rtl:ignore*/\n left: 0;\n /* @noflip */\n /*rtl:ignore*/\n right: auto;\n}\n[dir=rtl] .mdc-switch__handle, .mdc-switch__handle[dir=rtl] {\n /*rtl:begin:ignore*/\n /* @noflip */\n /*rtl:ignore*/\n left: auto;\n /* @noflip */\n /*rtl:ignore*/\n right: 0;\n /*rtl:end:ignore*/\n}\n\n.mdc-switch__handle::before, .mdc-switch__handle::after {\n border: 1px solid transparent;\n border-radius: inherit;\n box-sizing: border-box;\n content: \"\";\n width: 100%;\n height: 100%;\n /* @noflip */\n /*rtl:ignore*/\n left: 0;\n position: absolute;\n top: 0;\n transition: background-color 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1), border-color 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1);\n z-index: -1;\n}\n@media screen and (forced-colors: active) {\n .mdc-switch__handle::before, .mdc-switch__handle::after {\n border-color: currentColor;\n }\n}\n\n.mdc-switch__shadow {\n border-radius: inherit;\n bottom: 0;\n /* @noflip */\n /*rtl:ignore*/\n left: 0;\n position: absolute;\n /* @noflip */\n /*rtl:ignore*/\n right: 0;\n top: 0;\n}\n\n.mdc-elevation-overlay {\n bottom: 0;\n /* @noflip */\n /*rtl:ignore*/\n left: 0;\n /* @noflip */\n /*rtl:ignore*/\n right: 0;\n top: 0;\n}\n\n.mdc-switch__ripple {\n /* @noflip */\n /*rtl:ignore*/\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n z-index: -1;\n}\n.mdc-switch:disabled .mdc-switch__ripple {\n display: none;\n}\n\n.mdc-switch__icons {\n height: 100%;\n position: relative;\n width: 100%;\n z-index: 1;\n}\n\n.mdc-switch__icon {\n bottom: 0;\n /* @noflip */\n /*rtl:ignore*/\n left: 0;\n margin: auto;\n position: absolute;\n /* @noflip */\n /*rtl:ignore*/\n right: 0;\n top: 0;\n opacity: 0;\n transition: opacity 30ms 0ms cubic-bezier(0.4, 0, 1, 1);\n}\n\n.mdc-switch--selected .mdc-switch__icon--on,\n.mdc-switch--unselected .mdc-switch__icon--off {\n opacity: 1;\n transition: opacity 45ms 30ms cubic-bezier(0, 0, 0.2, 1);\n}\n\n.mdc-switch {\n --mdc-ripple-fg-size: 0;\n --mdc-ripple-left: 0;\n --mdc-ripple-top: 0;\n --mdc-ripple-fg-scale: 1;\n --mdc-ripple-fg-translate-end: 0;\n --mdc-ripple-fg-translate-start: 0;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n will-change: transform, opacity;\n}\n@keyframes mdc-ripple-fg-radius-in {\n from {\n animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);\n }\n to {\n transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));\n }\n}\n@keyframes mdc-ripple-fg-opacity-in {\n from {\n animation-timing-function: linear;\n opacity: 0;\n }\n to {\n opacity: var(--mdc-ripple-fg-opacity, 0);\n }\n}\n@keyframes mdc-ripple-fg-opacity-out {\n from {\n animation-timing-function: linear;\n opacity: var(--mdc-ripple-fg-opacity, 0);\n }\n to {\n opacity: 0;\n }\n}\n.mdc-switch .mdc-switch__ripple::before,\n.mdc-switch .mdc-switch__ripple::after {\n position: absolute;\n border-radius: 50%;\n opacity: 0;\n pointer-events: none;\n content: \"\";\n}\n.mdc-switch .mdc-switch__ripple::before {\n transition: opacity 15ms linear, background-color 15ms linear;\n z-index: 1;\n /* @alternate */\n z-index: var(--mdc-ripple-z-index, 1);\n}\n.mdc-switch .mdc-switch__ripple::after {\n z-index: 0;\n /* @alternate */\n z-index: var(--mdc-ripple-z-index, 0);\n}\n.mdc-switch.mdc-ripple-upgraded .mdc-switch__ripple::before {\n transform: scale(var(--mdc-ripple-fg-scale, 1));\n}\n.mdc-switch.mdc-ripple-upgraded .mdc-switch__ripple::after {\n top: 0;\n /* @noflip */\n /*rtl:ignore*/\n left: 0;\n transform: scale(0);\n transform-origin: center center;\n}\n.mdc-switch.mdc-ripple-upgraded--unbounded .mdc-switch__ripple::after {\n top: var(--mdc-ripple-top, 0);\n /* @noflip */\n /*rtl:ignore*/\n left: var(--mdc-ripple-left, 0);\n}\n.mdc-switch.mdc-ripple-upgraded--foreground-activation .mdc-switch__ripple::after {\n animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;\n}\n.mdc-switch.mdc-ripple-upgraded--foreground-deactivation .mdc-switch__ripple::after {\n animation: mdc-ripple-fg-opacity-out 150ms;\n transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));\n}\n.mdc-switch .mdc-switch__ripple::before,\n.mdc-switch .mdc-switch__ripple::after {\n top: calc(50% - 50%);\n /* @noflip */\n /*rtl:ignore*/\n left: calc(50% - 50%);\n width: 100%;\n height: 100%;\n}\n.mdc-switch.mdc-ripple-upgraded .mdc-switch__ripple::before,\n.mdc-switch.mdc-ripple-upgraded .mdc-switch__ripple::after {\n top: var(--mdc-ripple-top, calc(50% - 50%));\n /* @noflip */\n /*rtl:ignore*/\n left: var(--mdc-ripple-left, calc(50% - 50%));\n width: var(--mdc-ripple-fg-size, 100%);\n height: var(--mdc-ripple-fg-size, 100%);\n}\n.mdc-switch.mdc-ripple-upgraded .mdc-switch__ripple::after {\n width: var(--mdc-ripple-fg-size, 100%);\n height: var(--mdc-ripple-fg-size, 100%);\n}\n.mdc-switch .mdc-switch__focus-ring-wrapper {\n width: 100%;\n position: absolute;\n top: 50%;\n /* @noflip */\n /*rtl:ignore*/\n left: 50%;\n /* @noflip */\n /*rtl:ignore*/\n transform: translate(-50%, -50%);\n}\n.mdc-switch.mdc-ripple-upgraded--background-focused .mdc-switch__focus-ring, .mdc-switch:not(.mdc-ripple-upgraded):focus .mdc-switch__focus-ring {\n pointer-events: none;\n border: 2px solid transparent;\n border-radius: 6px;\n box-sizing: content-box;\n position: absolute;\n top: 50%;\n /* @noflip */\n /*rtl:ignore*/\n left: 50%;\n /* @noflip */\n /*rtl:ignore*/\n transform: translate(-50%, -50%);\n height: calc(\n 100% + 4px\n );\n width: calc(\n 100% + 4px\n );\n}\n@media screen and (forced-colors: active) {\n .mdc-switch.mdc-ripple-upgraded--background-focused .mdc-switch__focus-ring, .mdc-switch:not(.mdc-ripple-upgraded):focus .mdc-switch__focus-ring {\n border-color: CanvasText;\n }\n}\n.mdc-switch.mdc-ripple-upgraded--background-focused .mdc-switch__focus-ring::after, .mdc-switch:not(.mdc-ripple-upgraded):focus .mdc-switch__focus-ring::after {\n content: \"\";\n border: 2px solid transparent;\n border-radius: 8px;\n display: block;\n position: absolute;\n top: 50%;\n /* @noflip */\n /*rtl:ignore*/\n left: 50%;\n /* @noflip */\n /*rtl:ignore*/\n transform: translate(-50%, -50%);\n height: calc(100% + 4px);\n width: calc(100% + 4px);\n}\n@media screen and (forced-colors: active) {\n .mdc-switch.mdc-ripple-upgraded--background-focused .mdc-switch__focus-ring::after, .mdc-switch:not(.mdc-ripple-upgraded):focus .mdc-switch__focus-ring::after {\n border-color: CanvasText;\n }\n}\n\n.mdc-switch {\n width: 36px;\n /* @alternate */\n width: var(--mdc-switch-track-width, 36px);\n}\n.mdc-switch.mdc-switch--selected:enabled .mdc-switch__handle::after {\n background: #6200ee;\n /* @alternate */\n background: var(--mdc-switch-selected-handle-color, var(--mdc-theme-primary, #6200ee));\n}\n\n.mdc-switch.mdc-switch--selected:enabled:hover:not(:focus):not(:active) .mdc-switch__handle::after {\n background: #310077;\n /* @alternate */\n background: var(--mdc-switch-selected-hover-handle-color, #310077);\n}\n\n.mdc-switch.mdc-switch--selected:enabled:focus:not(:active) .mdc-switch__handle::after {\n background: #310077;\n /* @alternate */\n background: var(--mdc-switch-selected-focus-handle-color, #310077);\n}\n\n.mdc-switch.mdc-switch--selected:enabled:active .mdc-switch__handle::after {\n background: #310077;\n /* @alternate */\n background: var(--mdc-switch-selected-pressed-handle-color, #310077);\n}\n\n.mdc-switch.mdc-switch--selected:disabled .mdc-switch__handle::after {\n background: #424242;\n /* @alternate */\n background: var(--mdc-switch-disabled-selected-handle-color, #424242);\n}\n\n.mdc-switch.mdc-switch--unselected:enabled .mdc-switch__handle::after {\n background: #616161;\n /* @alternate */\n background: var(--mdc-switch-unselected-handle-color, #616161);\n}\n\n.mdc-switch.mdc-switch--unselected:enabled:hover:not(:focus):not(:active) .mdc-switch__handle::after {\n background: #212121;\n /* @alternate */\n background: var(--mdc-switch-unselected-hover-handle-color, #212121);\n}\n\n.mdc-switch.mdc-switch--unselected:enabled:focus:not(:active) .mdc-switch__handle::after {\n background: #212121;\n /* @alternate */\n background: var(--mdc-switch-unselected-focus-handle-color, #212121);\n}\n\n.mdc-switch.mdc-switch--unselected:enabled:active .mdc-switch__handle::after {\n background: #212121;\n /* @alternate */\n background: var(--mdc-switch-unselected-pressed-handle-color, #212121);\n}\n\n.mdc-switch.mdc-switch--unselected:disabled .mdc-switch__handle::after {\n background: #424242;\n /* @alternate */\n background: var(--mdc-switch-disabled-unselected-handle-color, #424242);\n}\n\n.mdc-switch .mdc-switch__handle::before {\n background: #fff;\n /* @alternate */\n background: var(--mdc-switch-handle-surface-color, var(--mdc-theme-surface, #fff));\n}\n.mdc-switch:enabled .mdc-switch__shadow {\n --mdc-elevation-box-shadow-for-gss: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);\n box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);\n /* @alternate */\n box-shadow: var(--mdc-switch-handle-elevation, var(--mdc-elevation-box-shadow-for-gss));\n}\n.mdc-switch:disabled .mdc-switch__shadow {\n --mdc-elevation-box-shadow-for-gss: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);\n box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);\n /* @alternate */\n box-shadow: var(--mdc-switch-disabled-handle-elevation, var(--mdc-elevation-box-shadow-for-gss));\n}\n.mdc-switch .mdc-switch__focus-ring-wrapper,\n.mdc-switch .mdc-switch__handle {\n height: 20px;\n /* @alternate */\n height: var(--mdc-switch-handle-height, 20px);\n}\n.mdc-switch:disabled .mdc-switch__handle::after {\n opacity: 0.38;\n /* @alternate */\n opacity: var(--mdc-switch-disabled-handle-opacity, 0.38);\n}\n\n.mdc-switch .mdc-switch__handle {\n border-radius: 10px;\n /* @alternate */\n border-radius: var(--mdc-switch-handle-shape, 10px);\n}\n.mdc-switch .mdc-switch__handle {\n width: 20px;\n /* @alternate */\n width: var(--mdc-switch-handle-width, 20px);\n}\n.mdc-switch .mdc-switch__handle-track {\n width: calc(100% - 20px);\n /* @alternate */\n width: calc(100% - var(--mdc-switch-handle-width, 20px));\n}\n.mdc-switch.mdc-switch--selected:enabled .mdc-switch__icon {\n fill: #fff;\n /* @alternate */\n fill: var(--mdc-switch-selected-icon-color, var(--mdc-theme-on-primary, #fff));\n}\n\n.mdc-switch.mdc-switch--selected:disabled .mdc-switch__icon {\n fill: #fff;\n /* @alternate */\n fill: var(--mdc-switch-disabled-selected-icon-color, var(--mdc-theme-on-primary, #fff));\n}\n\n.mdc-switch.mdc-switch--unselected:enabled .mdc-switch__icon {\n fill: #fff;\n /* @alternate */\n fill: var(--mdc-switch-unselected-icon-color, var(--mdc-theme-on-primary, #fff));\n}\n\n.mdc-switch.mdc-switch--unselected:disabled .mdc-switch__icon {\n fill: #fff;\n /* @alternate */\n fill: var(--mdc-switch-disabled-unselected-icon-color, var(--mdc-theme-on-primary, #fff));\n}\n\n.mdc-switch.mdc-switch--selected:disabled .mdc-switch__icons {\n opacity: 0.38;\n /* @alternate */\n opacity: var(--mdc-switch-disabled-selected-icon-opacity, 0.38);\n}\n\n.mdc-switch.mdc-switch--unselected:disabled .mdc-switch__icons {\n opacity: 0.38;\n /* @alternate */\n opacity: var(--mdc-switch-disabled-unselected-icon-opacity, 0.38);\n}\n\n.mdc-switch.mdc-switch--selected .mdc-switch__icon {\n width: 18px;\n /* @alternate */\n width: var(--mdc-switch-selected-icon-size, 18px);\n height: 18px;\n /* @alternate */\n height: var(--mdc-switch-selected-icon-size, 18px);\n}\n\n.mdc-switch.mdc-switch--unselected .mdc-switch__icon {\n width: 18px;\n /* @alternate */\n width: var(--mdc-switch-unselected-icon-size, 18px);\n height: 18px;\n /* @alternate */\n height: var(--mdc-switch-unselected-icon-size, 18px);\n}\n\n.mdc-switch.mdc-switch--selected:enabled:hover:not(:focus) .mdc-switch__ripple::before,\n.mdc-switch.mdc-switch--selected:enabled:hover:not(:focus) .mdc-switch__ripple::after {\n background-color: #6200ee;\n /* @alternate */\n background-color: var(--mdc-switch-selected-hover-state-layer-color, var(--mdc-theme-primary, #6200ee));\n}\n\n.mdc-switch.mdc-switch--selected:enabled:focus .mdc-switch__ripple::before,\n.mdc-switch.mdc-switch--selected:enabled:focus .mdc-switch__ripple::after {\n background-color: #6200ee;\n /* @alternate */\n background-color: var(--mdc-switch-selected-focus-state-layer-color, var(--mdc-theme-primary, #6200ee));\n}\n\n.mdc-switch.mdc-switch--selected:enabled:active .mdc-switch__ripple::before,\n.mdc-switch.mdc-switch--selected:enabled:active .mdc-switch__ripple::after {\n background-color: #6200ee;\n /* @alternate */\n background-color: var(--mdc-switch-selected-pressed-state-layer-color, var(--mdc-theme-primary, #6200ee));\n}\n\n.mdc-switch.mdc-switch--unselected:enabled:hover:not(:focus) .mdc-switch__ripple::before,\n.mdc-switch.mdc-switch--unselected:enabled:hover:not(:focus) .mdc-switch__ripple::after {\n background-color: #424242;\n /* @alternate */\n background-color: var(--mdc-switch-unselected-hover-state-layer-color, #424242);\n}\n\n.mdc-switch.mdc-switch--unselected:enabled:focus .mdc-switch__ripple::before,\n.mdc-switch.mdc-switch--unselected:enabled:focus .mdc-switch__ripple::after {\n background-color: #424242;\n /* @alternate */\n background-color: var(--mdc-switch-unselected-focus-state-layer-color, #424242);\n}\n\n.mdc-switch.mdc-switch--unselected:enabled:active .mdc-switch__ripple::before,\n.mdc-switch.mdc-switch--unselected:enabled:active .mdc-switch__ripple::after {\n background-color: #424242;\n /* @alternate */\n background-color: var(--mdc-switch-unselected-pressed-state-layer-color, #424242);\n}\n\n.mdc-switch.mdc-switch--selected:enabled:hover:not(:focus):hover .mdc-switch__ripple::before, .mdc-switch.mdc-switch--selected:enabled:hover:not(:focus).mdc-ripple-surface--hover .mdc-switch__ripple::before {\n opacity: 0.04;\n /* @alternate */\n opacity: var(--mdc-switch-selected-hover-state-layer-opacity, 0.04);\n}\n\n.mdc-switch.mdc-switch--selected:enabled:focus.mdc-ripple-upgraded--background-focused .mdc-switch__ripple::before, .mdc-switch.mdc-switch--selected:enabled:focus:not(.mdc-ripple-upgraded):focus .mdc-switch__ripple::before {\n transition-duration: 75ms;\n opacity: 0.12;\n /* @alternate */\n opacity: var(--mdc-switch-selected-focus-state-layer-opacity, 0.12);\n}\n\n.mdc-switch.mdc-switch--selected:enabled:active:not(.mdc-ripple-upgraded) .mdc-switch__ripple::after {\n transition: opacity 150ms linear;\n}\n.mdc-switch.mdc-switch--selected:enabled:active:not(.mdc-ripple-upgraded):active .mdc-switch__ripple::after {\n transition-duration: 75ms;\n opacity: 0.1;\n /* @alternate */\n opacity: var(--mdc-switch-selected-pressed-state-layer-opacity, 0.1);\n}\n.mdc-switch.mdc-switch--selected:enabled:active.mdc-ripple-upgraded {\n --mdc-ripple-fg-opacity: var(--mdc-switch-selected-pressed-state-layer-opacity, 0.1);\n}\n\n.mdc-switch.mdc-switch--unselected:enabled:hover:not(:focus):hover .mdc-switch__ripple::before, .mdc-switch.mdc-switch--unselected:enabled:hover:not(:focus).mdc-ripple-surface--hover .mdc-switch__ripple::before {\n opacity: 0.04;\n /* @alternate */\n opacity: var(--mdc-switch-unselected-hover-state-layer-opacity, 0.04);\n}\n\n.mdc-switch.mdc-switch--unselected:enabled:focus.mdc-ripple-upgraded--background-focused .mdc-switch__ripple::before, .mdc-switch.mdc-switch--unselected:enabled:focus:not(.mdc-ripple-upgraded):focus .mdc-switch__ripple::before {\n transition-duration: 75ms;\n opacity: 0.12;\n /* @alternate */\n opacity: var(--mdc-switch-unselected-focus-state-layer-opacity, 0.12);\n}\n\n.mdc-switch.mdc-switch--unselected:enabled:active:not(.mdc-ripple-upgraded) .mdc-switch__ripple::after {\n transition: opacity 150ms linear;\n}\n.mdc-switch.mdc-switch--unselected:enabled:active:not(.mdc-ripple-upgraded):active .mdc-switch__ripple::after {\n transition-duration: 75ms;\n opacity: 0.1;\n /* @alternate */\n opacity: var(--mdc-switch-unselected-pressed-state-layer-opacity, 0.1);\n}\n.mdc-switch.mdc-switch--unselected:enabled:active.mdc-ripple-upgraded {\n --mdc-ripple-fg-opacity: var(--mdc-switch-unselected-pressed-state-layer-opacity, 0.1);\n}\n\n.mdc-switch .mdc-switch__ripple {\n height: 48px;\n /* @alternate */\n height: var(--mdc-switch-state-layer-size, 48px);\n width: 48px;\n /* @alternate */\n width: var(--mdc-switch-state-layer-size, 48px);\n}\n.mdc-switch .mdc-switch__track {\n height: 14px;\n /* @alternate */\n height: var(--mdc-switch-track-height, 14px);\n}\n.mdc-switch:disabled .mdc-switch__track {\n opacity: 0.12;\n /* @alternate */\n opacity: var(--mdc-switch-disabled-track-opacity, 0.12);\n}\n\n.mdc-switch:enabled .mdc-switch__track::after {\n background: #d7bbff;\n /* @alternate */\n background: var(--mdc-switch-selected-track-color, #d7bbff);\n}\n\n.mdc-switch:enabled:hover:not(:focus):not(:active) .mdc-switch__track::after {\n background: #d7bbff;\n /* @alternate */\n background: var(--mdc-switch-selected-hover-track-color, #d7bbff);\n}\n\n.mdc-switch:enabled:focus:not(:active) .mdc-switch__track::after {\n background: #d7bbff;\n /* @alternate */\n background: var(--mdc-switch-selected-focus-track-color, #d7bbff);\n}\n\n.mdc-switch:enabled:active .mdc-switch__track::after {\n background: #d7bbff;\n /* @alternate */\n background: var(--mdc-switch-selected-pressed-track-color, #d7bbff);\n}\n\n.mdc-switch:disabled .mdc-switch__track::after {\n background: #424242;\n /* @alternate */\n background: var(--mdc-switch-disabled-selected-track-color, #424242);\n}\n\n.mdc-switch:enabled .mdc-switch__track::before {\n background: #e0e0e0;\n /* @alternate */\n background: var(--mdc-switch-unselected-track-color, #e0e0e0);\n}\n\n.mdc-switch:enabled:hover:not(:focus):not(:active) .mdc-switch__track::before {\n background: #e0e0e0;\n /* @alternate */\n background: var(--mdc-switch-unselected-hover-track-color, #e0e0e0);\n}\n\n.mdc-switch:enabled:focus:not(:active) .mdc-switch__track::before {\n background: #e0e0e0;\n /* @alternate */\n background: var(--mdc-switch-unselected-focus-track-color, #e0e0e0);\n}\n\n.mdc-switch:enabled:active .mdc-switch__track::before {\n background: #e0e0e0;\n /* @alternate */\n background: var(--mdc-switch-unselected-pressed-track-color, #e0e0e0);\n}\n\n.mdc-switch:disabled .mdc-switch__track::before {\n background: #424242;\n /* @alternate */\n background: var(--mdc-switch-disabled-unselected-track-color, #424242);\n}\n\n.mdc-switch .mdc-switch__track {\n border-radius: 7px;\n /* @alternate */\n border-radius: var(--mdc-switch-track-shape, 7px);\n}\n\n@media screen and (forced-colors: active), (-ms-high-contrast: active) {\n .mdc-switch:enabled .mdc-switch__shadow {\n /* @alternate */\n }\n .mdc-switch:disabled .mdc-switch__shadow {\n /* @alternate */\n }\n .mdc-switch:disabled .mdc-switch__handle::after {\n opacity: 1;\n /* @alternate */\n opacity: var(--mdc-switch-disabled-handle-opacity, 1);\n }\n\n .mdc-switch.mdc-switch--selected:enabled .mdc-switch__icon {\n fill: ButtonText;\n /* @alternate */\n fill: var(--mdc-switch-selected-icon-color, ButtonText);\n }\n\n .mdc-switch.mdc-switch--selected:disabled .mdc-switch__icon {\n fill: GrayText;\n /* @alternate */\n fill: var(--mdc-switch-disabled-selected-icon-color, GrayText);\n }\n\n .mdc-switch.mdc-switch--unselected:enabled .mdc-switch__icon {\n fill: ButtonText;\n /* @alternate */\n fill: var(--mdc-switch-unselected-icon-color, ButtonText);\n }\n\n .mdc-switch.mdc-switch--unselected:disabled .mdc-switch__icon {\n fill: GrayText;\n /* @alternate */\n fill: var(--mdc-switch-disabled-unselected-icon-color, GrayText);\n }\n\n .mdc-switch.mdc-switch--selected:disabled .mdc-switch__icons {\n opacity: 1;\n /* @alternate */\n opacity: var(--mdc-switch-disabled-selected-icon-opacity, 1);\n }\n\n .mdc-switch.mdc-switch--unselected:disabled .mdc-switch__icons {\n opacity: 1;\n /* @alternate */\n opacity: var(--mdc-switch-disabled-unselected-icon-opacity, 1);\n }\n\n .mdc-switch:disabled .mdc-switch__track {\n opacity: 1;\n /* @alternate */\n opacity: var(--mdc-switch-disabled-track-opacity, 1);\n }\n}","//\n// Copyright 2021 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/animation/animation';\n@use '@material/dom/dom';\n@use '@material/elevation/elevation';\n@use '@material/ripple/ripple-theme';\n@use '@material/ripple/ripple';\n@use '@material/focus-ring/focus-ring';\n@use '@material/rtl/rtl';\n@use '@material/theme/gss';\n\n$animation-duration: 75ms;\n$icon-exit-duration: 0.4 * $animation-duration;\n$icon-enter-duration: $animation-duration - $icon-exit-duration;\n$ripple-target: '.mdc-switch__ripple';\n\n@mixin static-styles() {\n @include static-styles-without-ripple();\n\n .mdc-switch {\n @include ripple.common; // COPYBARA_COMMENT_THIS_LINE\n @include ripple.surface($ripple-target: $ripple-target);\n @include ripple.radius-unbounded($ripple-target: $ripple-target);\n\n .mdc-switch__focus-ring-wrapper {\n width: 100%;\n position: absolute;\n // IE11 hacks\n top: 50%;\n @include rtl.ignore-next-line();\n left: 50%;\n @include rtl.ignore-next-line();\n transform: translate(-50%, -50%);\n // end IE11 hacks\n }\n\n @include ripple-theme.focus {\n .mdc-switch__focus-ring {\n @include focus-ring.focus-ring();\n }\n }\n }\n}\n\n@mixin static-styles-without-ripple() {\n @include elevation.overlay-common; // COPYBARA_COMMENT_THIS_LINE\n\n .mdc-switch {\n @include root;\n\n &:disabled {\n @include disabled;\n }\n }\n\n .mdc-switch__track {\n @include track;\n @include track-off;\n\n .mdc-switch--selected & {\n @include track-on;\n }\n }\n\n .mdc-switch__handle-track {\n @include handle-track;\n @include handle-track-off;\n\n .mdc-switch--selected & {\n @include handle-track-on;\n }\n }\n\n .mdc-switch__handle {\n @include handle;\n }\n\n .mdc-switch__shadow {\n @include shadow;\n }\n\n .mdc-elevation-overlay {\n @include overlay;\n }\n\n .mdc-switch__ripple {\n @include ripple;\n\n .mdc-switch:disabled & {\n @include ripple-disabled;\n }\n }\n\n .mdc-switch__icons {\n @include icons;\n }\n\n .mdc-switch__icon {\n @include icon;\n @include icon-hidden;\n }\n\n .mdc-switch--selected .mdc-switch__icon--on,\n .mdc-switch--unselected .mdc-switch__icon--off {\n @include icon-visible;\n }\n}\n\n@mixin root() {\n align-items: center;\n background: none;\n border: none;\n cursor: pointer;\n display: inline-flex;\n flex-shrink: 0; // Stop from collapsing in flex containers\n margin: 0;\n outline: none;\n overflow: visible;\n padding: 0;\n position: relative;\n}\n\n@mixin disabled() {\n cursor: default;\n pointer-events: none;\n}\n\n@mixin track() {\n overflow: hidden;\n position: relative;\n width: 100%;\n\n &::before,\n &::after {\n border: 1px solid transparent; // high contrast mode\n border-radius: inherit;\n box-sizing: border-box;\n content: '';\n height: 100%;\n @include gss.annotate($noflip: true);\n left: 0;\n position: absolute;\n width: 100%;\n\n // Added for Firefox 94 which broke transparent borders in Windows HCM.\n // See https://bugzilla.mozilla.org/show_bug.cgi?id=1740924.\n @include dom.forced-colors-mode($exclude-ie11: true) {\n border-color: currentColor;\n }\n }\n}\n\n@mixin track-on() {\n &::before {\n transition: animation.exit-temporary(transform, $animation-duration);\n transform: translateX(100%);\n @include rtl.rtl {\n transform: translateX(-100%);\n }\n }\n\n &::after {\n transition: animation.enter(transform, $animation-duration);\n transform: translateX(0);\n }\n}\n\n@mixin track-off() {\n &::before {\n transition: animation.enter(transform, $animation-duration);\n transform: translateX(0);\n }\n\n &::after {\n transition: animation.exit-temporary(transform, $animation-duration);\n transform: translateX(-100%);\n @include rtl.rtl {\n transform: translateX(100%);\n }\n }\n}\n\n@mixin handle-track() {\n height: 100%;\n // The handle track is used to move the handle across the width of the switch\n // and may overflow the bounds of the component. It should not be used for\n // pointer events.\n pointer-events: none;\n position: absolute;\n top: 0; // Needed for IE11\n transition: animation.standard(transform, $animation-duration);\n // IE11 needs explicit left/right\n @include rtl.reflexive(left, 0, right, auto);\n}\n\n@mixin handle-track-on() {\n transform: translateX(100%);\n\n @include rtl.rtl {\n transform: translateX(-100%);\n }\n}\n\n@mixin handle-track-off() {\n transform: translateX(0);\n}\n\n@mixin handle() {\n display: flex;\n pointer-events: auto;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n // IE11 needs explicit left/right\n @include rtl.reflexive(left, 0, right, auto);\n\n &::before,\n &::after {\n border: 1px solid transparent; // high contrast mode\n border-radius: inherit;\n box-sizing: border-box;\n content: '';\n width: 100%;\n height: 100%;\n @include gss.annotate($noflip: true);\n left: 0;\n position: absolute;\n top: 0; // IE11 fix\n transition: animation.standard(background-color, $animation-duration),\n animation.standard(border-color, $animation-duration);\n // Move the handle background colors beneath the shadow overlay color,\n // rather than move the overlay on top of the handle with a positive\n // z-index, which would require moving all other content on top of the\n // overlay with an even greater z-index.\n z-index: -1;\n\n // Added for Firefox 94 which broke transparent borders in Windows HCM.\n // See https://bugzilla.mozilla.org/show_bug.cgi?id=1740924.\n @include dom.forced-colors-mode($exclude-ie11: true) {\n border-color: currentColor;\n }\n }\n}\n\n@mixin shadow() {\n border-radius: inherit;\n bottom: 0;\n @include gss.annotate($noflip: true);\n left: 0;\n position: absolute;\n @include gss.annotate($noflip: true);\n right: 0;\n top: 0;\n}\n\n@mixin overlay() {\n bottom: 0;\n @include gss.annotate($noflip: true);\n left: 0;\n @include gss.annotate($noflip: true);\n right: 0;\n top: 0;\n}\n\n@mixin ripple() {\n @include gss.annotate($noflip: true);\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n // Move ripple beneath shadow overlay and handle background colors (see\n // handle() mixin for explanation).\n z-index: -1;\n}\n\n@mixin ripple-disabled {\n display: none;\n}\n\n@mixin icons() {\n height: 100%;\n position: relative;\n width: 100%;\n z-index: 1;\n}\n\n@mixin icon() {\n bottom: 0;\n @include gss.annotate($noflip: true);\n left: 0;\n // IE11 needs top/right/bottom/left + margin instead of translate(-50%, -50%)\n // because of SVG centering issues\n margin: auto;\n position: absolute;\n @include gss.annotate($noflip: true);\n right: 0;\n top: 0;\n}\n\n@mixin icon-hidden() {\n opacity: 0;\n transition: animation.exit-permanent(opacity, $icon-exit-duration);\n}\n\n@mixin icon-visible() {\n opacity: 1;\n transition: animation.enter(\n opacity,\n $icon-enter-duration,\n $delay: $icon-exit-duration\n );\n}\n","// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\n@use '@material/feature-targeting/feature-targeting';\n///\n/// Emits necessary layout styles to set a transparent border around an element\n/// without interfering with the rest of its component layout. The border is\n/// only visible in high-contrast mode. The target element should be a child of\n/// a relatively positioned top-level element (i.e. a ::before pseudo-element).\n///\n/// @param {number} $border-width - The width of the transparent border.\n/// @param {string} $border-style - The style of the transparent border.\n///\n@mixin transparent-border(\n $border-width: 1px,\n $border-style: solid,\n $query: feature-targeting.all()\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n position: absolute;\n box-sizing: border-box;\n width: