| 1 | {"version":3,"sources":["webpack:///./packages/mdc-switch/styles.scss","webpack:///./packages/material-components-web/node_modules/@material/theme/_css.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"],"names":[],"mappings":";;;;;;;AA4DE,uBAGM,kBACA,sBACA,oBCCF,UAYF,gDDFI,sDCVF,sBAYF,0DCRF,YA8DA,mBACA,gBACA,YACA,eACA,oBACA,cACA,SACA,aACA,iBACA,UACA,kBArEE,qBAyEF,eACA,oBArEA,mBAyEA,gBACA,kBACA,WAEA,qDAEE,6BACA,sBACA,sBACA,WACA,YAEA,OACA,kBACA,WCvEA,0CD6DF,qDAeI,2BAqBJ,2BACE,0OACA,wDAGF,0BACE,kPACA,gEEtHE,uEFwHA,8DAxBJ,iDACE,kPACA,8DElGE,qHFoGA,gEAIJ,gDACE,0OACA,wDAnGF,0BAuHA,YAIA,oBACA,kBACA,MACA,kPDvIE,kBCqJF,wDEnJI,uEHFF,kBCaA,gDAgIF,8DE3II,mHF8IF,gEA9HF,oBAuIA,aACA,oBACA,kBACA,QACA,8DD7JE,kBGEE,2DHFF,kBCiKF,uDAEE,6BACA,sBACA,sBACA,WACA,WACA,YAEA,OACA,kBACA,MACA,qHAMA,WCnKA,0CDiJF,uDAuBI,2BAlKJ,oBAwKA,sBACA,SAEA,OACA,kBAEA,QACA,MA3KA,uBA+KA,SAEA,OAEA,QACA,MAhLA,oBAqLA,SACA,kBACA,QACA,wEAGA,WAxLE,yCA4LF,aAvLA,mBA2LA,YACA,kBACA,WACA,UA1LA,kBA8LA,SAEA,OAGA,YACA,kBAEA,QACA,MAIA,UACA,uDAvMA,2FA2MA,UACA,wDA/RA,YGwEE,wBACA,qBACA,oBACA,yBACA,iCACA,mCAEA,0CAGE,8BAoLJ,2CACE,KACE,8DC3R2B,CD2R3B,sDC3R2B,CDgS3B,oJAGF,GACE,yMAXJ,mCACE,KACE,8DC3R2B,CD2R3B,sDC3R2B,CDgS3B,oJAGF,GACE,yMAKJ,4CACE,KACE,0EACA,UAGF,GACE,yCAPJ,oCACE,KACE,0EACA,UAGF,GACE,yCAIJ,6CACE,KACE,0EACA,wCAGF,GACE,WAPJ,qCACE,KACE,0EACA,wCAGF,GACE,WAlNJ,+EAGI,kBACA,kBACA,UACA,oBACA,WAIJ,wCAGI,4DJ5EA,UAYF,qCI6EF,uCJzFI,UAYF,qCIyFA,4DAEI,sGAIJ,2DAEI,MAEA,OACA,8CACA,sEAMJ,sEAEI,6BAEA,+BAMJ,kFAEI,wLAQJ,oFAEI,4FAKA,wMA0CN,+EAGI,oBAEA,qBACA,UAZK,CAaL,WAbK,CAkBP,uHAGI,2CAEA,6CACA,sCACA,uCAIJ,2DAEI,sCACA,uCHzOJ,4CACE,WACA,kBAEA,QAEA,SAEA,wEAKA,gJKUF,oBACA,6BACA,kBACA,uBACA,kBACA,QAEA,SAEA,wEACA;;KAzB0B,CA0B1B;;KApB4B,CJiC5B,0CDlCE,gJKwBA,yBAGF,8JACE,WACA,6BACA,iBAhEgB,CAiEhB,cACA,kBACA,QAEA,SAEA,wEACA,uBA/BgB,CAgChB,sBAhCgB,CJ2BlB,0CIPA,8JAeI,yBCvER,YPmCM,WAYF,0CQ8RA,oER1SE,mBAYF,sFQ8RA,mGR1SE,mBAYF,kEQ8RA,uFR1SE,mBAYF,kEQ8RA,2ER1SE,mBAYF,oEQ8RA,qER1SE,mBAYF,qEQ8RA,sER1SE,mBAYF,8DQ8RA,qGR1SE,mBAYF,oEQ8RA,yFR1SE,mBAYF,oEQ8RA,6ER1SE,mBAYF,sEQ8RA,uER1SE,mBAYF,uEQqTA,wCRjUE,gBAYF,kFQ8UF,wCR9UE,iJAZE,yHAYF,uFQ8UF,yCR9UE,gJAZE,wHAYF,gGQoVF,4ERhWI,YAYF,6CQqWA,gDRjXE,aAYF,wDQ4WF,gCRxXI,mBAYF,mDQkXF,gCR9XI,WAYF,2CQsXF,sCRlYI,wBAYF,wDQ0YF,2DRtZI,UAYF,8EQ0YF,4DRtZI,UAYF,uFQ0YF,6DRtZI,UAYF,gFQ0YF,8DRtZI,UAYF,yFQkaF,6DR9aI,aAYF,+DQkaF,+DR9aI,aAYF,iEQobF,mDRhcI,WAYF,iDAZE,YAYF,kDQobF,qDRhcI,WAYF,mDAZE,YAYF,oDS4EA,6KTxFE,yBAYF,uGS4EA,qJTxFE,yBAYF,uGS4EA,uJTxFE,yBAYF,yGS4EA,iLTxFE,yBAYF,+ES4EA,yJTxFE,yBAYF,+ES4EA,2JTxFE,yBAYF,iFSqdF,8MTjeI,aAYF,mESqdF,8NA9QI,yBTnNA,aAYF,mESiOE,qGAEI,gCAKF,4GAEI,wBAhRO,CT0Bb,YAYF,oESqPA,oETrPA,oFSqdF,kNTjeI,aAYF,qESqdF,kOA9QI,yBTnNA,aAYF,qESiOE,uGAEI,gCAKF,8GAEI,wBAhRO,CT0Bb,YAYF,sESqPA,sETrPA,sFQihBF,gCR7hBI,YAYF,gDAZE,WAYF,+CQwhBF,+BRpiBI,YAYF,4CQoiBF,wCRhjBI,aAYF,uDQgkBF,8CR5kBI,mBAYF,2DQgkBF,6ER5kBI,mBAYF,iEQgkBF,iER5kBI,mBAYF,iEQgkBF,qDR5kBI,mBAYF,mEQgkBF,+CR5kBI,mBAYF,oEQ4lBF,+CRxmBI,mBAYF,6DQ4lBF,8ERxmBI,mBAYF,mEQ4lBF,kERxmBI,mBAYF,mEQ4lBF,sDRxmBI,mBAYF,qEQ4lBF,gDRxmBI,mBAYF,sEQkmBF,+BR9mBI,kBAYF,iDEoBA,sEMiVA,gDRjXE,UAYF,qDQ0YF,2DRtZI,gBAYF,uDQ0YF,4DRtZI,cAYF,8DQ0YF,6DRtZI,gBAYF,yDQ0YF,8DRtZI,cAYF,gEQkaF,6DR9aI,UAYF,4DQkaF,+DR9aI,UAYF,8DQoiBF,wCRhjBI,UAYF,qD","file":"mdc.switch.min.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 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: 100%;\n height: 100%;\n top: 0;\n left: 0;\n border: $border-width $border-style transparent;\n border-radius: inherit;\n content: '';\n pointer-events: none;\n }\n\n // Used to satisfy Firefox v94 which does not render transparent borders in HCM (b/206440838).\n @include forced-colors-mode($exclude-ie11: true) {\n @include feature-targeting.targets($feat-structure) {\n border-color: CanvasText;\n }\n }\n}\n\n///\n/// Visually hides text content for accessibility. This text should only be\n/// visible to screen reader users.\n/// See https://a11yproject.com/posts/how-to-hide-content/\n///\n@mixin visually-hidden($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n clip: rect(1px, 1px, 1px, 1px);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap; /* added line */\n width: 1px;\n }\n}\n\n/// Selects for IE11 support.\n///\n/// @content styles to emit for IE11 support\n@mixin ie11-support {\n @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n @content;\n }\n}\n\n/// Selects for `forced-colors` high contrast mode.\n///\n/// While in `forced-colors` mode, only system colors should be used.\n///\n/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#system_colors\n/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors\n/// @content styles to emit in `forced-colors` mode\n@mixin forced-colors-mode($exclude-ie11: false) {\n @if $exclude-ie11 {\n @media screen and (forced-colors: active) {\n @content;\n }\n } @else {\n @media screen and (forced-colors: active), (-ms-high-contrast: active) {\n @content;\n }\n }\n}\n","//\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@use 'sass:list';\n@use 'sass:meta';\n@use 'sass:selector';\n@use '@material/theme/gss';\n@use '@material/theme/selector-ext';\n@use '@material/theme/theme';\n\n$include: true !default;\n\n/// Creates a rule that will be applied when a component is within the context\n/// of an RTL layout.\n///\n/// @example - scss\n/// .mdc-foo {\n/// padding-left: 4px;\n///\n/// @include rtl {\n/// padding-left: auto;\n/// padding-right: 4px;\n/// }\n/// }\n///\n/// @example - css\n/// .mdc-foo {\n/// padding-left: 4px;\n/// }\n///\n/// [dir=\"rtl\"] .mdc-foo,\n/// .mdc-foo[dir=\"rtl\"] {\n/// padding-left: auto;\n/// padding-right: 4px;\n/// }\n///\n/// Note that this mixin works by checking for an ancestor element with\n/// `[dir=\"rtl\"]`. As a result, nested `dir` values are not supported:\n///\n/// @example - html\n/// <html dir=\"rtl\">\n/// <!-- ... -->\n/// <div dir=\"ltr\">\n/// <div class=\"mdc-foo\">Styled incorrectly as RTL!</div>\n/// </div>\n/// </html>\n///\n/// In the future, selectors such as the `:dir` pseudo-class\n/// (http://mdn.io/css/:dir) will help us mitigate this.\n///\n/// @content Content to be styled in an RTL context.\n@mixin rtl() {\n @if ($include) {\n $dir-rtl: '[dir=rtl]';\n\n $rtl-selectors: list.join(\n selector.nest($dir-rtl, &),\n selector-ext.append-strict(&, $dir-rtl)\n );\n\n @at-root {\n #{$rtl-selectors} {\n /*rtl:begin:ignore*/\n @content;\n /*rtl:end:ignore*/\n }\n }\n }\n}\n\n// Takes a base box-model property name (`margin`, `border`, `padding`, etc.) along with a\n// default direction (`left` or `right`) and value, and emits rules which apply the given value to the\n// specified direction by default and the opposite direction in RTL.\n//\n// For example:\n//\n// ```scss\n// .mdc-foo {\n// @include rtl-reflexive-box(margin, left, 8px);\n// }\n// ```\n//\n// is equivalent to:\n//\n// ```scss\n// .mdc-foo {\n// margin-left: 8px;\n// margin-right: 0;\n//\n// @include rtl {\n// margin-left: 0;\n// margin-right: 8px;\n// }\n// }\n// ```\n//\n// whereas:\n//\n// ```scss\n// .mdc-foo {\n// @include rtl-reflexive-box(margin, right, 8px);\n// }\n// ```\n//\n// is equivalent to:\n//\n// ```scss\n// .mdc-foo {\n// margin-left: 0;\n// margin-right: 8px;\n//\n// @include rtl {\n// margin-left: 8px;\n// margin-right: 0;\n// }\n// }\n// ```\n//\n// You can also pass an optional 4th `$root-selector` argument which will be forwarded to `mdc-rtl`,\n// e.g. `@include rtl-reflexive-box(margin, left, 8px, '.mdc-component')`.\n//\n// Note that this function will always zero out the original value in an RTL context.\n// If you're trying to flip the values, use `mdc-rtl-reflexive-property()` instead.\n@mixin reflexive-box(\n $base-property,\n $default-direction,\n $value,\n $replace: null\n) {\n @if (list.index((right, left), $default-direction) == null) {\n @error \"Invalid default direction: '#{$default-direction}'. Please specifiy either 'right' or 'left'.\";\n }\n\n $left-value: $value;\n $right-value: 0;\n\n @if ($default-direction == right) {\n $left-value: 0;\n $right-value: $value;\n }\n\n @include reflexive-property(\n $base-property,\n $left-value,\n $right-value,\n $replace: $replace\n );\n}\n\n// Takes a base property and emits rules that assign <base-property>-left to <left-value> and\n// <base-property>-right to <right-value> in a LTR context, and vice versa in a RTL context.\n// For example:\n//\n// ```scss\n// .mdc-foo {\n// @include rtl-reflexive-property(margin, auto, 12px);\n// }\n// ```\n//\n// is equivalent to:\n//\n// ```scss\n// .mdc-foo {\n// margin-left: auto;\n// margin-right: 12px;\n//\n// @include rtl {\n// margin-left: 12px;\n// margin-right: auto;\n// }\n// }\n// ```\n//\n// An optional 4th `$root-selector` argument can be given, which will be passed to `mdc-rtl`.\n@mixin reflexive-property(\n $base-property,\n $left-value,\n $right-value,\n $replace: null\n) {\n $prop-left: #{$base-property}-left;\n $prop-right: #{$base-property}-right;\n\n @include reflexive(\n $prop-left,\n $left-value,\n $prop-right,\n $right-value,\n $replace: $replace\n );\n}\n\n// Takes an argument specifying a horizontal position property (either 'left' or 'right') as well\n// as a value, and applies that value to the specified position in a LTR context, and flips it in a\n// RTL context. For example:\n//\n// ```scss\n// .mdc-foo {\n// @include rtl-reflexive-position(left, 0);\n// }\n// ```\n//\n// is equivalent to:\n//\n// ```scss\n// .mdc-foo {\n// left: 0;\n// right: initial;\n//\n// @include rtl {\n// left: initial;\n// right: 0;\n// }\n// }\n// ```\n//\n// An optional third $root-selector argument may also be given, which is passed to `mdc-rtl`.\n@mixin reflexive-position($position-property, $value, $replace: null) {\n @if (list.index((right, left), $position-property) == null) {\n @error \"Invalid position #{position-property}. Please specifiy either right or left\";\n }\n\n // TODO: 'initial' is not supported in IE 11. https://caniuse.com/#feat=css-initial-value\n $left-value: $value;\n $right-value: initial;\n\n @if ($position-property == right) {\n $right-value: $value;\n $left-value: initial;\n }\n\n @include reflexive(\n left,\n $left-value,\n right,\n $right-value,\n $replace: $replace\n );\n}\n\n// Takes pair of properties with values as arguments and flips it in RTL context.\n// For example:\n//\n// ```scss\n// .mdc-foo {\n// @include rtl-reflexive(left, 2px, right, 5px);\n// }\n// ```\n//\n// is equivalent to:\n//\n// ```scss\n// .mdc-foo {\n// left: 2px;\n// right: 5px;\n//\n// @include rtl {\n// right: 2px;\n// left: 5px;\n// }\n// }\n// ```\n//\n// An optional fifth `$root-selector` argument may also be given, which is passed to `mdc-rtl`.\n@mixin reflexive(\n $left-property,\n $left-value,\n $right-property,\n $right-value,\n $replace: null\n) {\n $left-replace: null;\n $right-replace: null;\n @if $replace {\n @if meta.type-of($left-value) == 'string' {\n $left-replace: $replace;\n }\n\n @if meta.type-of($right-value) == 'string' {\n $right-replace: $replace;\n }\n\n @if $left-replace == null and $right-replace == null {\n @error 'mdc-rtl: $replace may only be used with strings but neither left nor right values are strings.';\n }\n\n // If any replacements are null, treat the entire value as null (do not\n // emit anything).\n @each $name, $replacement in $replace {\n @if $replacement == null {\n $left-value: null;\n $right-value: null;\n }\n }\n }\n\n // Do not emit if either value are null\n @if $left-value and $right-value {\n @include _property($left-property, $left-value, $replace: $left-replace);\n @include _property($right-property, $right-value, $replace: $right-replace);\n\n @include rtl {\n @include _property(\n $left-property,\n $right-value,\n $replace: $right-replace\n );\n @include _property($right-property, $left-value, $replace: $left-replace);\n }\n }\n}\n\n///\n/// Adds RTL ignore annotation when `$mdc-rtl-include` is true.\n///\n@mixin ignore-next-line() {\n @include gss.annotate(\n (\n noflip: $include,\n )\n );\n}\n\n///\n/// Adds `@noflip` annotation when `$mdc-rtl-include` is true.\n///\n/// @param {String} $property\n/// @param {String} $value\n/// @param {Map} $replace\n///\n@mixin _property($property, $value, $replace: null) {\n @include theme.property(\n $property,\n $value,\n $replace: $replace,\n $gss: (noflip: $include)\n );\n}\n","//\n// Copyright 2016 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 'sass:math';\n@use 'sass:color';\n@use 'sass:map';\n@use '@material/animation/functions' as functions2;\n@use '@material/animation/variables' as variables2;\n@use '@material/base/mixins' as base-mixins;\n@use '@material/theme/custom-properties';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/rtl/rtl';\n@use '@material/theme/theme';\n@use './ripple-theme';\n\n@mixin core-styles($query: feature-targeting.all()) {\n @include static-styles($query: $query);\n\n .mdc-ripple-surface {\n @include ripple-theme.states($query: $query);\n }\n}\n\n@mixin static-styles($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-ripple-surface {\n @include surface($query: $query);\n @include radius-bounded($query: $query);\n @include surface-styles($query: $query);\n }\n\n .mdc-ripple-surface[data-mdc-ripple-is-unbounded],\n .mdc-ripple-upgraded--unbounded {\n @include radius-unbounded($query: $query);\n @include unbounded-styles($query: $query);\n }\n}\n\n/// Sets all states (including hover, focus, press, activated and selected) with\n/// given color as base color.\n///\n/// This mixin is for internal use only. Use `ripple-theme.states($color)` mixin\n/// to set interactive states (hover, focus & press) color.\n///\n/// @param {Color|String} $color - Target base color. Can be valid CSS color or\n/// a color string literal (i.e., `primary`, `secondary`, etc).\n@mixin states-for-color($color, $query: feature-targeting.all()) {\n @include ripple-theme.states($color, $query: $query);\n @include ripple-theme.states-activated($color, $query: $query);\n @include ripple-theme.states-selected($color, $query: $query);\n}\n\n@mixin surface-styles($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n position: relative;\n outline: none;\n overflow: hidden;\n }\n}\n\n@mixin unbounded-styles($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n @include feature-targeting.targets($feat-structure) {\n overflow: visible;\n }\n}\n\n@mixin common($query: feature-targeting.all()) {\n $feat-animation: feature-targeting.create-target($query, animation);\n\n // Ensure that styles needed by any component using MDC Ripple are emitted, but only once.\n // (Every component using MDC Ripple imports these mixins, but doesn't necessarily import\n // mdc-ripple.scss.)\n @include feature-targeting.targets($feat-animation) {\n @include base-mixins.emit-once('mdc-ripple/common/animation') {\n @include keyframes_;\n }\n }\n}\n\n@mixin surface(\n $query: feature-targeting.all(),\n $ripple-target: '&',\n $include-will-change: true // TODO(b/151931961): Remove once resolved\n) {\n $feat-animation: feature-targeting.create-target($query, animation);\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\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\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n // TODO(b/151931961): Remove the following block once resolved\n @if $include-will-change {\n will-change: transform, opacity;\n }\n }\n\n #{$ripple-target}::before,\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-structure) {\n position: absolute;\n border-radius: 50%;\n opacity: 0;\n pointer-events: none;\n content: '';\n }\n }\n\n #{$ripple-target}::before {\n @include feature-targeting.targets($feat-animation) {\n // Also transition background-color to avoid unnatural color flashes when toggling activated/selected state\n transition: opacity ripple-theme.$states-wash-duration linear,\n background-color ripple-theme.$states-wash-duration linear;\n }\n\n @include feature-targeting.targets($feat-structure) {\n // Ensure that the ripple wash for hover/focus states is displayed on top of positioned child elements\n @include theme.property(\n z-index,\n custom-properties.create(--mdc-ripple-z-index, 1)\n );\n }\n }\n\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-structure) {\n @include theme.property(\n z-index,\n custom-properties.create(--mdc-ripple-z-index, 0)\n );\n }\n }\n\n // Common styles for upgraded surfaces (some of these depend on custom properties set via JS or other mixins)\n\n &.mdc-ripple-upgraded {\n #{$ripple-target}::before {\n @include feature-targeting.targets($feat-structure) {\n transform: scale(var(--mdc-ripple-fg-scale, 1));\n }\n }\n\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-structure) {\n top: 0;\n @include rtl.ignore-next-line();\n left: 0;\n transform: scale(0);\n transform-origin: center center;\n }\n }\n }\n\n &.mdc-ripple-upgraded--unbounded {\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-structure) {\n top: var(--mdc-ripple-top, 0);\n @include rtl.ignore-next-line();\n left: var(--mdc-ripple-left, 0);\n }\n }\n }\n\n &.mdc-ripple-upgraded--foreground-activation {\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-animation) {\n animation: mdc-ripple-fg-radius-in ripple-theme.$translate-duration\n forwards,\n mdc-ripple-fg-opacity-in ripple-theme.$fade-in-duration forwards;\n }\n }\n }\n\n &.mdc-ripple-upgraded--foreground-deactivation {\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-animation) {\n animation: mdc-ripple-fg-opacity-out ripple-theme.$fade-out-duration;\n }\n\n @include feature-targeting.targets($feat-structure) {\n // Retain transform from mdc-ripple-fg-radius-in activation\n transform: translate(var(--mdc-ripple-fg-translate-end, 0))\n scale(var(--mdc-ripple-fg-scale, 1));\n }\n }\n }\n}\n\n@mixin radius-bounded(\n $radius: 100%,\n $query: feature-targeting.all(),\n $ripple-target: '&'\n) {\n $feat-struture: feature-targeting.create-target($query, structure);\n\n #{$ripple-target}::before,\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-struture) {\n top: calc(50% - #{$radius});\n @include rtl.ignore-next-line();\n left: calc(50% - #{$radius});\n width: $radius * 2;\n height: $radius * 2;\n }\n }\n\n &.mdc-ripple-upgraded {\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-struture) {\n width: var(--mdc-ripple-fg-size, $radius);\n height: var(--mdc-ripple-fg-size, $radius);\n }\n }\n }\n}\n\n@mixin radius-unbounded(\n $radius: 100%,\n $query: feature-targeting.all(),\n $ripple-target: '&'\n) {\n $feat-struture: feature-targeting.create-target($query, structure);\n\n #{$ripple-target}::before,\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-struture) {\n top: calc(50% - #{math.div($radius, 2)});\n @include rtl.ignore-next-line();\n left: calc(50% - #{math.div($radius, 2)});\n width: $radius;\n height: $radius;\n }\n }\n\n &.mdc-ripple-upgraded {\n #{$ripple-target}::before,\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-struture) {\n top: var(--mdc-ripple-top, calc(50% - #{math.div($radius, 2)}));\n @include rtl.ignore-next-line();\n left: var(--mdc-ripple-left, calc(50% - #{math.div($radius, 2)}));\n width: var(--mdc-ripple-fg-size, $radius);\n height: var(--mdc-ripple-fg-size, $radius);\n }\n }\n\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-struture) {\n width: var(--mdc-ripple-fg-size, $radius);\n height: var(--mdc-ripple-fg-size, $radius);\n }\n }\n }\n}\n\n// Common styles for a ripple target element.\n// Used for components which have an inner ripple target element.\n@mixin target-common($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n // Necessary for clicks on other inner elements (e.g. close icon in chip)\n // to go through.\n pointer-events: none;\n }\n}\n\n@mixin keyframes_ {\n @keyframes mdc-ripple-fg-radius-in {\n from {\n animation-timing-function: variables2.$standard-curve-timing-function;\n // NOTE: For these keyframes, we do not need custom property fallbacks because they are only\n // used in conjunction with `.mdc-ripple-upgraded`. Since MDCRippleFoundation checks to ensure\n // that custom properties are supported within the browser before adding this class, we can\n // safely use them without a fallback.\n transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);\n }\n\n to {\n transform: translate(var(--mdc-ripple-fg-translate-end, 0))\n scale(var(--mdc-ripple-fg-scale, 1));\n }\n }\n\n @keyframes mdc-ripple-fg-opacity-in {\n from {\n animation-timing-function: linear;\n opacity: 0;\n }\n\n to {\n opacity: var(--mdc-ripple-fg-opacity, 0);\n }\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\n to {\n opacity: 0;\n }\n }\n}\n","//\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$deceleration-curve-timing-function: cubic-bezier(0, 0, 0.2, 1) !default;\n$standard-curve-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default;\n$acceleration-curve-timing-function: cubic-bezier(0.4, 0, 1, 1) !default;\n$sharp-curve-timing-function: cubic-bezier(0.4, 0, 0.6, 1) !default;\n\n@function enter($name, $duration, $delay: 0ms) {\n @return $name $duration $delay $deceleration-curve-timing-function;\n}\n\n@function exit-permanent($name, $duration, $delay: 0ms) {\n @return $name $duration $delay $acceleration-curve-timing-function;\n}\n\n@function exit-temporary($name, $duration, $delay: 0ms) {\n @return $name $duration $delay $sharp-curve-timing-function;\n}\n\n@function standard($name, $duration, $delay: 0ms) {\n @return $name $duration $delay $standard-curve-timing-function;\n}\n\n@function linear($name, $duration, $delay: 0ms) {\n @return $name $duration $delay linear;\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@use '@material/feature-targeting/feature-targeting';\n@use '@material/rtl/rtl';\n@use '@material/dom/dom';\n\n$ring-radius-default: 8px !default;\n$inner-ring-width-default: 2px !default;\n$inner-ring-color-default: transparent !default;\n$outer-ring-width-default: 2px !default;\n$outer-ring-color-default: transparent !default;\n$container-outer-padding-default: 2px !default;\n\n/// Styles applied to the component's inner focus ring element.\n///\n/// @param $ring-radius [$ring-radius-default] - Focus ring radius.\n/// @param $inner-ring-width [$inner-ring-width-default] - Inner focus ring width.\n/// @param $inner-ring-color [$inner-ring-color-default] - Inner focus ring color.\n/// @param $outer-ring-width [$outer-ring-width-default] - Outer focus ring width.\n/// @param $outer-ring-color [$outer-ring-color-default] - Outer focus ring color.\n/// @param $container-outer-padding [$container-outer-padding-default] - The\n/// distance between the focus ring and the container.\n@mixin focus-ring(\n $query: feature-targeting.all(),\n $ring-radius: $ring-radius-default,\n $inner-ring-width: $inner-ring-width-default,\n $inner-ring-color: $inner-ring-color-default,\n $outer-ring-width: $outer-ring-width-default,\n $outer-ring-color: $outer-ring-color-default,\n $container-outer-padding-vertical: $container-outer-padding-default,\n $container-outer-padding-horizontal: $container-outer-padding-default\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n $container-size-vertical: 100%;\n @if $container-outer-padding-vertical != 0 {\n $container-size-vertical: calc(\n 100% + #{$container-outer-padding-vertical * 2}\n );\n }\n $container-size-horizontal: 100%;\n @if $container-outer-padding-horizontal != 0 {\n $container-size-horizontal: calc(\n 100% + #{$container-outer-padding-horizontal * 2}\n );\n }\n $outer-ring-size: 100%;\n @if $outer-ring-width > 0 {\n $outer-ring-size: calc(100% + #{$outer-ring-width * 2});\n }\n @include feature-targeting.targets($feat-structure) {\n pointer-events: none;\n border: $inner-ring-width solid $inner-ring-color;\n border-radius: $ring-radius - $outer-ring-width;\n box-sizing: content-box;\n position: absolute;\n top: 50%;\n @include rtl.ignore-next-line();\n left: 50%;\n @include rtl.ignore-next-line();\n transform: translate(-50%, -50%);\n height: $container-size-vertical;\n width: $container-size-horizontal;\n\n @include dom.forced-colors-mode($exclude-ie11: true) {\n border-color: CanvasText;\n }\n\n &::after {\n content: '';\n border: $outer-ring-width solid $outer-ring-color;\n border-radius: $ring-radius;\n display: block;\n position: absolute;\n top: 50%;\n @include rtl.ignore-next-line();\n left: 50%;\n @include rtl.ignore-next-line();\n transform: translate(-50%, -50%);\n height: $outer-ring-size;\n width: $outer-ring-size;\n\n @include dom.forced-colors-mode($exclude-ie11: true) {\n border-color: CanvasText;\n }\n }\n }\n}\n/// Customizes the color of the button focus ring.\n///\n/// @param $inner-ring-color [$inner-ring-color-default] - Inner focus ring color.\n/// @param $outer-ring-width [$outer-ring-width-default] - Outer focus ring width.\n@mixin focus-ring-color(\n $inner-ring-color: $inner-ring-color-default,\n $outer-ring-color: $outer-ring-color-default\n) {\n border-color: $inner-ring-color;\n\n &::after {\n border-color: $outer-ring-color;\n }\n}\n\n/// Customizes the border radius of the button focus ring.\n///\n/// @param {Number} $ring-radius - The border radius of the focus ring.\n/// @param {Number} $outer-ring-width [$outer-ring-width] - Width of the outer\n/// ring, required to compute the radius for the inner ring.\n@mixin focus-ring-radius(\n $ring-radius,\n $outer-ring-width: $outer-ring-width-default,\n $query: feature-targeting.all()\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n border-radius: $ring-radius - $outer-ring-width;\n\n &::after {\n border-radius: $ring-radius;\n }\n }\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/dom/dom';\n@use './switch-theme';\n@use './switch';\n\n@include switch.static-styles();\n\n.mdc-switch {\n @include switch-theme.theme-styles(switch-theme.$light-theme);\n}\n\n@include dom.forced-colors-mode {\n .mdc-switch {\n @include switch-theme.theme-styles(switch-theme.$forced-colors-theme);\n }\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 'sass:color';\n@use 'sass:map';\n@use 'sass:meta';\n@use '@material/density/density';\n@use '@material/dom/dom';\n@use '@material/elevation/elevation-theme';\n@use '@material/ripple/ripple-theme';\n@use '@material/theme/color-palette';\n@use '@material/theme/custom-properties';\n@use '@material/theme/keys';\n@use '@material/theme/shadow-dom';\n@use '@material/theme/state';\n@use '@material/theme/theme-color';\n@use '@material/theme/theme';\n@use '@material/tokens/resolvers';\n@use '@material/shape/shape';\n@use './switch';\n\n$_density-config: (\n size: (\n minimum: 28px,\n default: 48px,\n maximum: 48px,\n ),\n);\n$_hairline: color-palette.$grey-300;\n$_inverse-primary: color.scale(\n theme-color.prop-value(primary),\n $lightness: 75%\n);\n\n$_on-surface: color-palette.$grey-800;\n$_on-surface-variant: color-palette.$grey-700;\n$_on-surface-state-content: color-palette.$grey-900;\n$_primary-state-content: color.scale(\n theme-color.prop-value(primary),\n $blackness: 50%\n);\n\n/// TODO: Change to private when MWC has better access\n/// @access private\n$selectors: (\n disabled: ':disabled',\n focus: ':focus',\n hover: ':hover',\n pressed: ':active',\n selected: '.mdc-switch--selected',\n unselected: '.mdc-switch--unselected',\n);\n\n$light-theme: (\n disabled-handle-elevation: 0,\n disabled-handle-opacity: 0.38,\n disabled-selected-handle-color: $_on-surface,\n disabled-selected-icon-color: on-primary,\n disabled-selected-icon-opacity: 0.38,\n disabled-selected-track-color: $_on-surface,\n disabled-track-opacity: 0.12,\n disabled-unselected-handle-color: $_on-surface,\n disabled-unselected-icon-color: on-primary,\n disabled-unselected-icon-opacity: 0.38,\n disabled-unselected-track-color: $_on-surface,\n handle-elevation: 1,\n handle-height: 20px,\n handle-shadow-color: elevation-theme.$baseline-color,\n handle-shape: 10px,\n handle-surface-color: surface,\n handle-width: 20px,\n selected-focus-handle-color: $_primary-state-content,\n selected-focus-state-layer-color: primary,\n selected-focus-state-layer-opacity: 0.12,\n selected-focus-track-color: $_inverse-primary,\n selected-handle-color: primary,\n selected-hover-handle-color: $_primary-state-content,\n selected-hover-state-layer-color: primary,\n selected-hover-state-layer-opacity: 0.04,\n selected-hover-track-color: $_inverse-primary,\n selected-icon-color: on-primary,\n selected-icon-size: 18px,\n selected-pressed-handle-color: $_primary-state-content,\n selected-pressed-state-layer-color: primary,\n selected-pressed-state-layer-opacity: 0.1,\n selected-pressed-track-color: $_inverse-primary,\n selected-track-color: $_inverse-primary,\n state-layer-size: 48px,\n track-height: 14px,\n track-shape: 7px,\n track-width: 36px,\n unselected-focus-handle-color: $_on-surface-state-content,\n unselected-focus-state-layer-color: $_on-surface,\n unselected-focus-state-layer-opacity: 0.12,\n unselected-focus-track-color: $_hairline,\n unselected-handle-color: $_on-surface-variant,\n unselected-hover-handle-color: $_on-surface-state-content,\n unselected-hover-state-layer-color: $_on-surface,\n unselected-hover-state-layer-opacity: 0.04,\n unselected-hover-track-color: $_hairline,\n unselected-icon-color: on-primary,\n unselected-icon-size: 18px,\n unselected-pressed-handle-color: $_on-surface-state-content,\n unselected-pressed-state-layer-color: $_on-surface,\n unselected-pressed-state-layer-opacity: 0.1,\n unselected-pressed-track-color: $_hairline,\n unselected-track-color: $_hairline,\n);\n\n$forced-colors-theme: (\n disabled-handle-opacity: 1,\n disabled-selected-icon-color: GrayText,\n disabled-selected-icon-opacity: 1,\n disabled-track-opacity: 1,\n disabled-unselected-icon-color: GrayText,\n disabled-unselected-icon-opacity: 1,\n selected-icon-color: ButtonText,\n unselected-icon-color: ButtonText,\n);\n\n@function density($density-scale) {\n $size: density.prop-value(\n $density-config: $_density-config,\n $density-scale: $density-scale,\n $property-name: size,\n );\n\n @return (state-layer-size: $size);\n}\n\n@mixin theme($theme, $resolvers: resolvers.$material) {\n @include theme.validate-theme($light-theme, $theme);\n\n // TODO(b/185172301): replace with improved feature targeting\n // IE11 Fallback\n @if shadow-dom.$css-selector-fallback-declarations {\n @include custom-properties.configure($emit-custom-properties: false) {\n @include dom.ie11-support {\n @include theme-styles($theme, $resolvers: $resolvers);\n }\n }\n }\n\n $theme: _resolve-theme($theme, $resolvers);\n @include keys.declare-custom-properties($theme, switch);\n}\n\n@function _resolve-theme($theme, $resolvers) {\n @return map.merge(\n $theme,\n _resolve-theme-handle-elevation(\n $theme,\n map.get($resolvers, elevation),\n disabled-handle-elevation,\n handle-elevation\n )\n );\n}\n\n@function _resolve-theme-handle-elevation($theme, $resolver, $keys...) {\n @if $resolver == null {\n @return $theme;\n }\n\n @each $key in $keys {\n // Resolve the value for each state key.\n $resolved-value: meta.call(\n $resolver,\n $elevation: map.get($theme, $key),\n $shadow-color: map.get($theme, handle-shadow-color)\n );\n\n // Update the theme with the resolved value.\n $theme: map.set($theme, $key, $resolved-value);\n }\n\n @return $theme;\n}\n\n@mixin theme-styles($theme, $resolvers: resolvers.$material) {\n @include theme.validate-theme-keys($light-theme, $theme);\n\n $theme: keys.create-theme-properties($theme, switch);\n\n @include _selected-handle-color(\n (\n default: map.get($theme, selected-handle-color),\n disabled: map.get($theme, disabled-selected-handle-color),\n focus: map.get($theme, selected-focus-handle-color),\n hover: map.get($theme, selected-hover-handle-color),\n pressed: map.get($theme, selected-pressed-handle-color),\n )\n );\n\n @include _unselected-handle-color(\n (\n default: map.get($theme, unselected-handle-color),\n disabled: map.get($theme, disabled-unselected-handle-color),\n focus: map.get($theme, unselected-focus-handle-color),\n hover: map.get($theme, unselected-hover-handle-color),\n pressed: map.get($theme, unselected-pressed-handle-color),\n )\n );\n\n @include _handle-surface-color(map.get($theme, handle-surface-color));\n\n @include _handle-elevation(\n map.get($resolvers, elevation),\n map.get($theme, handle-shadow-color),\n (\n default: map.get($theme, handle-elevation),\n disabled: map.get($theme, disabled-handle-elevation),\n )\n );\n\n @include _handle-height(map.get($theme, handle-height));\n @include _handle-opacity(\n (\n disabled: map.get($theme, disabled-handle-opacity),\n )\n );\n\n @include _handle-shape(map.get($theme, handle-shape));\n @include _handle-width(map.get($theme, handle-width));\n\n @include _selected-icon-color(\n (\n default: map.get($theme, selected-icon-color),\n disabled: map.get($theme, disabled-selected-icon-color),\n )\n );\n\n @include _unselected-icon-color(\n (\n default: map.get($theme, unselected-icon-color),\n disabled: map.get($theme, disabled-unselected-icon-color),\n )\n );\n\n @include _selected-icon-opacity(\n (\n disabled: map.get($theme, disabled-selected-icon-opacity),\n )\n );\n\n @include _unselected-icon-opacity(\n (\n disabled: map.get($theme, disabled-unselected-icon-opacity),\n )\n );\n\n @include _selected-icon-size(map.get($theme, selected-icon-size));\n @include _unselected-icon-size(map.get($theme, unselected-icon-size));\n\n @include _selected-ripple-color(\n (\n focus: map.get($theme, selected-focus-state-layer-color),\n hover: map.get($theme, selected-hover-state-layer-color),\n pressed: map.get($theme, selected-pressed-state-layer-color),\n )\n );\n\n @include _unselected-ripple-color(\n (\n focus: map.get($theme, unselected-focus-state-layer-color),\n hover: map.get($theme, unselected-hover-state-layer-color),\n pressed: map.get($theme, unselected-pressed-state-layer-color),\n )\n );\n\n @include _selected-ripple-opacity(\n (\n focus: map.get($theme, selected-focus-state-layer-opacity),\n hover: map.get($theme, selected-hover-state-layer-opacity),\n pressed: map.get($theme, selected-pressed-state-layer-opacity),\n )\n );\n\n @include _unselected-ripple-opacity(\n (\n focus: map.get($theme, unselected-focus-state-layer-opacity),\n hover: map.get($theme, unselected-hover-state-layer-opacity),\n pressed: map.get($theme, unselected-pressed-state-layer-opacity),\n )\n );\n\n @include _state-layer-size(map.get($theme, state-layer-size));\n @include _track-height(map.get($theme, track-height));\n @include _track-opacity(\n (\n disabled: map.get($theme, disabled-track-opacity),\n )\n );\n\n @include _track-selected-color(\n (\n default: map.get($theme, selected-track-color),\n disabled: map.get($theme, disabled-selected-track-color),\n focus: map.get($theme, selected-focus-track-color),\n hover: map.get($theme, selected-hover-track-color),\n pressed: map.get($theme, selected-pressed-track-color),\n )\n );\n\n @include _track-unselected-color(\n (\n default: map.get($theme, unselected-track-color),\n disabled: map.get($theme, disabled-unselected-track-color),\n focus: map.get($theme, unselected-focus-track-color),\n hover: map.get($theme, unselected-hover-track-color),\n pressed: map.get($theme, unselected-pressed-track-color),\n )\n );\n\n @include _track-shape(map.get($theme, track-shape));\n @include _track-width(map.get($theme, track-width));\n}\n\n@mixin _handle-color($colors) {\n @include state.default($selectors) {\n @include _set-handle-color(state.get-default-state($colors));\n }\n\n @include state.hover($selectors) {\n @include _set-handle-color(state.get-hover-state($colors));\n }\n\n @include state.focus($selectors) {\n @include _set-handle-color(state.get-focus-state($colors));\n }\n\n @include state.pressed($selectors) {\n @include _set-handle-color(state.get-pressed-state($colors));\n }\n\n @include state.disabled($selectors) {\n @include _set-handle-color(state.get-disabled-state($colors));\n }\n}\n\n@mixin _set-handle-color($color) {\n .mdc-switch__handle {\n &::after {\n @include theme.property(background, $color);\n }\n }\n}\n\n@mixin _selected-handle-color($colors) {\n @include state.selected($selectors) {\n @include _handle-color($colors);\n }\n}\n\n@mixin _unselected-handle-color($colors) {\n @include state.unselected($selectors) {\n @include _handle-color($colors);\n }\n}\n\n@mixin _handle-surface-color($color) {\n .mdc-switch__handle {\n // Sets the surface color for the handle. This is used so that when an\n // opacity is applied to the \"main\" handle color, it will not bleed through\n // and appear transparent on top of the track.\n &::before {\n @include theme.property(background, $color);\n }\n }\n}\n\n@mixin _handle-elevation($resolver, $shadow-color, $elevations) {\n @include state.default($selectors) {\n @include _set-handle-elevation(\n $resolver,\n $elevation: state.get-default-state($elevations),\n $shadow-color: $shadow-color\n );\n }\n\n @include state.disabled($selectors) {\n @include _set-handle-elevation(\n $resolver,\n $elevation: state.get-disabled-state($elevations),\n $shadow-color: $shadow-color\n );\n }\n}\n\n@mixin _set-handle-elevation($resolver, $args...) {\n .mdc-switch__shadow {\n @include elevation-theme.with-resolver($resolver, $args...);\n }\n}\n\n@mixin _handle-height($height) {\n .mdc-switch__focus-ring-wrapper,\n .mdc-switch__handle {\n @include theme.property(height, $height);\n }\n}\n\n@mixin _handle-opacity($opacities) {\n @include state.disabled($selectors) {\n @include _set-handle-opacity(state.get-disabled-state($opacities));\n }\n}\n\n@mixin _set-handle-opacity($opacity) {\n .mdc-switch__handle {\n // Only apply to the ::after pseudo element, which is the handle's \"main\"\n // color. The ::before pseudo element is the surface color, which prevents\n // the handle from bleeding through on the track.\n &::after {\n @include theme.property(opacity, $opacity);\n }\n }\n}\n\n@mixin _handle-shape($shape) {\n .mdc-switch__handle {\n @include shape.radius($shape);\n }\n}\n\n@mixin _handle-width($width) {\n .mdc-switch__handle {\n @include theme.property(width, $width);\n }\n\n .mdc-switch__handle-track {\n @include theme.property(\n width,\n 'calc(100% - width)',\n $replace: (width: $width)\n );\n }\n}\n\n@mixin _icon-color($colors) {\n @include state.default($selectors) {\n @include _set-icon-color(state.get-default-state($colors));\n }\n\n @include state.disabled($selectors) {\n @include _set-icon-color(state.get-disabled-state($colors));\n }\n}\n\n@mixin _set-icon-color($color) {\n .mdc-switch__icon {\n @include theme.property(fill, $color);\n }\n}\n\n@mixin _selected-icon-color($colors) {\n @include state.selected($selectors) {\n @include _icon-color($colors);\n }\n}\n\n@mixin _unselected-icon-color($colors) {\n @include state.unselected($selectors) {\n @include _icon-color($colors);\n }\n}\n\n@mixin _icon-opacity($opacities) {\n @include state.disabled($selectors) {\n @include _set-icon-opacity(state.get-disabled-state($opacities));\n }\n}\n\n@mixin _set-icon-opacity($opacity) {\n .mdc-switch__icons {\n @include theme.property(opacity, $opacity);\n }\n}\n\n@mixin _selected-icon-opacity($opacities) {\n @include state.selected($selectors) {\n @include _icon-opacity($opacities);\n }\n}\n\n@mixin _unselected-icon-opacity($opacities) {\n @include state.unselected($selectors) {\n @include _icon-opacity($opacities);\n }\n}\n\n@mixin _icon-size($size) {\n .mdc-switch__icon {\n @include theme.property(width, $size);\n @include theme.property(height, $size);\n }\n}\n\n@mixin _selected-icon-size($size) {\n @include state.selected($selectors) {\n @include _icon-size($size);\n }\n}\n\n@mixin _unselected-icon-size($size) {\n @include state.unselected($selectors) {\n @include _icon-size($size);\n }\n}\n\n@mixin _ripple-color($colors) {\n @include state.independent-elements(pressed) {\n @include state.hover($selectors) {\n @include ripple-theme.states-base-color(\n state.get-hover-state($colors),\n $ripple-target: switch.$ripple-target\n );\n }\n\n @include state.focus($selectors) {\n @include ripple-theme.states-base-color(\n state.get-focus-state($colors),\n $ripple-target: switch.$ripple-target\n );\n }\n\n @include state.pressed($selectors) {\n @include ripple-theme.states-base-color(\n state.get-pressed-state($colors),\n $ripple-target: switch.$ripple-target\n );\n }\n }\n}\n\n@mixin _selected-ripple-color($colors) {\n @include state.selected($selectors) {\n @include _ripple-color($colors);\n }\n}\n\n@mixin _unselected-ripple-color($colors) {\n @include state.unselected($selectors) {\n @include _ripple-color($colors);\n }\n}\n\n@mixin _ripple-opacity($opacities) {\n @include state.independent-elements(pressed) {\n @include state.hover($selectors) {\n @include ripple-theme.states-hover-opacity(\n state.get-hover-state($opacities),\n $ripple-target: switch.$ripple-target\n );\n }\n\n @include state.focus($selectors) {\n @include ripple-theme.states-focus-opacity(\n state.get-focus-state($opacities),\n $ripple-target: switch.$ripple-target\n );\n }\n\n @include state.pressed($selectors) {\n @include ripple-theme.states-press-opacity(\n state.get-pressed-state($opacities),\n $ripple-target: switch.$ripple-target\n );\n }\n }\n}\n\n@mixin _selected-ripple-opacity($opacities) {\n @include state.selected($selectors) {\n @include _ripple-opacity($opacities);\n }\n}\n\n@mixin _unselected-ripple-opacity($opacities) {\n @include state.unselected($selectors) {\n @include _ripple-opacity($opacities);\n }\n}\n\n@mixin _state-layer-size($size) {\n .mdc-switch__ripple {\n @include theme.property(height, $size);\n @include theme.property(width, $size);\n }\n}\n\n@mixin _track-height($height) {\n .mdc-switch__track {\n @include theme.property(height, $height);\n }\n}\n\n@mixin _track-opacity($opacities) {\n @include state.disabled($selectors) {\n @include _set-track-opacity(state.get-disabled-state($opacities));\n }\n}\n\n@mixin _set-track-opacity($opacity) {\n .mdc-switch__track {\n @include theme.property(opacity, $opacity);\n }\n}\n\n@mixin _track-selected-color($colors) {\n @include state.default($selectors) {\n @include _set-track-selected-color(state.get-default-state($colors));\n }\n\n @include state.hover($selectors) {\n @include _set-track-selected-color(state.get-hover-state($colors));\n }\n\n @include state.focus($selectors) {\n @include _set-track-selected-color(state.get-focus-state($colors));\n }\n\n @include state.pressed($selectors) {\n @include _set-track-selected-color(state.get-pressed-state($colors));\n }\n\n @include state.disabled($selectors) {\n @include _set-track-selected-color(state.get-disabled-state($colors));\n }\n}\n\n@mixin _set-track-selected-color($color) {\n .mdc-switch__track::after {\n @include theme.property(background, $color);\n }\n}\n\n@mixin _track-unselected-color($colors) {\n @include state.default($selectors) {\n @include _set-track-unselected-color(state.get-default-state($colors));\n }\n\n @include state.hover($selectors) {\n @include _set-track-unselected-color(state.get-hover-state($colors));\n }\n\n @include state.focus($selectors) {\n @include _set-track-unselected-color(state.get-focus-state($colors));\n }\n\n @include state.pressed($selectors) {\n @include _set-track-unselected-color(state.get-pressed-state($colors));\n }\n\n @include state.disabled($selectors) {\n @include _set-track-unselected-color(state.get-disabled-state($colors));\n }\n}\n\n@mixin _set-track-unselected-color($color) {\n .mdc-switch__track::before {\n @include theme.property(background, $color);\n }\n}\n\n@mixin _track-shape($shape) {\n .mdc-switch__track {\n @include shape.radius($shape);\n }\n}\n\n@mixin _track-width($width) {\n @include theme.property(width, $width);\n}\n","//\n// Copyright 2016 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 'sass:color';\n@use 'sass:map';\n@use '@material/animation/functions' as functions2;\n@use '@material/animation/variables' as variables2;\n@use '@material/base/mixins' as base-mixins;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/theme/css';\n@use '@material/theme/custom-properties';\n@use '@material/theme/theme';\n@use '@material/theme/keys';\n@use '@material/theme/shadow-dom';\n@use '@material/theme/theme-color';\n\n$custom-property-prefix: 'ripple';\n\n$fade-in-duration: 75ms !default;\n$fade-out-duration: 150ms !default;\n$translate-duration: 225ms !default;\n$states-wash-duration: 15ms !default;\n\n// Notes on states:\n// * focus takes precedence over hover (i.e. if an element is both focused and hovered, only focus value applies)\n// * press state applies to a separate pseudo-element, so it has an additive effect on top of other states\n// * selected/activated are applied additively to hover/focus via calculations at preprocessing time\n\n$dark-ink-opacities: (\n hover: 0.04,\n focus: 0.12,\n press: 0.12,\n selected: 0.08,\n activated: 0.12,\n) !default;\n\n$light-ink-opacities: (\n hover: 0.08,\n focus: 0.24,\n press: 0.24,\n selected: 0.16,\n activated: 0.24,\n) !default;\n\n// Legacy\n\n$pressed-dark-ink-opacity: 0.16 !default;\n$pressed-light-ink-opacity: 0.32 !default;\n\n// State selector variables used for state selector mixins below.\n$_hover-selector: '&:hover';\n$_focus-selector: '&.mdc-ripple-upgraded--background-focused, &:not(.mdc-ripple-upgraded):focus';\n$_active-selector: '&:not(:disabled):active';\n\n$light-theme: (\n focus-state-layer-color: theme-color.$on-surface,\n focus-state-layer-opacity: map.get($dark-ink-opacities, focus),\n hover-state-layer-color: theme-color.$on-surface,\n hover-state-layer-opacity: map.get($dark-ink-opacities, hover),\n pressed-state-layer-color: theme-color.$on-surface,\n pressed-state-layer-opacity: map.get($dark-ink-opacities, press),\n);\n\n@mixin theme($theme) {\n @include keys.declare-custom-properties(\n $theme,\n $prefix: $custom-property-prefix\n );\n\n @if shadow-dom.$css-selector-fallback-declarations {\n .mdc-ripple-surface {\n @include theme-styles($theme);\n }\n }\n}\n\n$_ripple-theme: (\n hover-state-layer-color: null,\n focus-state-layer-color: null,\n pressed-state-layer-color: null,\n hover-state-layer-opacity: null,\n focus-state-layer-opacity: null,\n pressed-state-layer-opacity: null,\n);\n\n@mixin theme-styles($theme, $ripple-target: '&') {\n $theme: keys.create-theme-properties(\n $theme,\n $prefix: $custom-property-prefix\n );\n\n // TODO(b/191298796): Support states layer color for every interactive states.\n // Use only hover state layer color, ignoring focus and pressed color.\n @include internal-theme-styles($theme, $ripple-target);\n}\n\n@mixin internal-theme-styles($theme, $ripple-target: '&') {\n @include theme.validate-theme-keys($_ripple-theme, $theme);\n\n @include states-base-color(\n map.get($theme, hover-state-layer-color),\n $ripple-target: $ripple-target\n );\n @include states-hover-opacity(\n map.get($theme, hover-state-layer-opacity),\n $ripple-target: $ripple-target\n );\n @include states-focus-opacity(\n map.get($theme, focus-state-layer-opacity),\n $ripple-target: $ripple-target\n );\n @include states-press-opacity(\n map.get($theme, pressed-state-layer-opacity),\n $ripple-target: $ripple-target\n );\n}\n\n@mixin states-base-color(\n $color,\n $query: feature-targeting.all(),\n $ripple-target: '&'\n) {\n $feat-color: feature-targeting.create-target($query, color);\n\n @if $color {\n @if not custom-properties.is-custom-prop($color) {\n $color: custom-properties.create(\n ripple-color,\n theme-color.get-custom-property($color)\n );\n }\n\n #{$ripple-target}::before,\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-color) {\n @include theme.property(background-color, $color);\n }\n }\n }\n}\n\n///\n/// Customizes ripple opacities in `hover`, `focus`, or `press` states\n/// @param {map} $opacity-map - map specifying custom opacity of zero or more states\n/// @param {bool} $has-nested-focusable-element - whether the component contains a focusable element in the root\n/// @param {string} $ripple-target - the optional selector for the ripple element\n///\n@mixin states-opacities(\n $opacity-map: (),\n $has-nested-focusable-element: false,\n $ripple-target: '&',\n $query: feature-targeting.all()\n) {\n // Ensure sufficient specificity to override base state opacities\n @if map.get($opacity-map, hover) {\n @include states-hover-opacity(\n map.get($opacity-map, hover),\n $ripple-target: $ripple-target,\n $query: $query\n );\n }\n\n @if map.get($opacity-map, focus) {\n @include states-focus-opacity(\n map.get($opacity-map, focus),\n $ripple-target: $ripple-target,\n $has-nested-focusable-element: $has-nested-focusable-element,\n $query: $query\n );\n }\n\n @if map.get($opacity-map, press) {\n @include states-press-opacity(\n map.get($opacity-map, press),\n $ripple-target: $ripple-target,\n $query: $query\n );\n }\n}\n\n@mixin states-hover-opacity(\n $opacity,\n $query: feature-targeting.all(),\n $ripple-target: '&'\n) {\n $feat-color: feature-targeting.create-target($query, color);\n\n @if $opacity and not custom-properties.is-custom-prop($opacity) {\n $opacity: custom-properties.create(ripple-hover-opacity, $opacity);\n }\n\n // Background wash styles, for both CSS-only and upgraded stateful surfaces\n &:hover,\n &.mdc-ripple-surface--hover {\n @include states-background-selector($ripple-target) {\n // Opacity falls under color because the chosen opacity is color-dependent in typical usage\n @include feature-targeting.targets($feat-color) {\n @include theme.property(opacity, $opacity);\n }\n }\n }\n}\n\n@mixin states-focus-opacity(\n $opacity,\n $has-nested-focusable-element: false,\n $query: feature-targeting.all(),\n $ripple-target: '&'\n) {\n // Focus overrides hover by reusing the ::before pseudo-element.\n // :focus-within generally works on non-MS browsers and matches when a *child* of the element has focus.\n // It is useful for cases where a component has a focusable element within the root node, e.g. text field,\n // but undesirable in general in case of nested stateful components.\n // We use a modifier class for JS-enabled surfaces to support all use cases in all browsers.\n @if $has-nested-focusable-element {\n // JS-enabled selectors.\n &.mdc-ripple-upgraded--background-focused,\n &.mdc-ripple-upgraded:focus-within,\n // CSS-only selectors.\n &:not(.mdc-ripple-upgraded):focus,\n &:not(.mdc-ripple-upgraded):focus-within {\n @include states-background-selector($ripple-target) {\n @include states-focus-opacity-properties_(\n $opacity: $opacity,\n $query: $query\n );\n }\n }\n } @else {\n // JS-enabled selectors.\n &.mdc-ripple-upgraded--background-focused,\n // CSS-only selectors.\n &:not(.mdc-ripple-upgraded):focus {\n @include states-background-selector($ripple-target) {\n @include states-focus-opacity-properties_(\n $opacity: $opacity,\n $query: $query\n );\n }\n }\n }\n}\n\n@mixin states-focus-opacity-properties_($opacity, $query) {\n $feat-animation: feature-targeting.create-target($query, animation);\n // Opacity falls under color because the chosen opacity is color-dependent in typical usage\n $feat-color: feature-targeting.create-target($query, color);\n\n @if $opacity {\n @if not custom-properties.is-custom-prop($opacity) {\n $opacity: custom-properties.create(ripple-focus-opacity, $opacity);\n }\n\n // Note that this duration is only effective on focus, not blur\n @include feature-targeting.targets($feat-animation) {\n transition-duration: 75ms;\n }\n\n @include feature-targeting.targets($feat-color) {\n @include theme.property(opacity, $opacity);\n }\n }\n}\n\n@mixin states-press-opacity(\n $opacity,\n $query: feature-targeting.all(),\n $ripple-target: '&'\n) {\n $feat-animation: feature-targeting.create-target($query, animation);\n $feat-color: feature-targeting.create-target($query, color);\n\n // Styles for non-upgraded (CSS-only) stateful surfaces\n\n @if $opacity {\n @if not custom-properties.is-custom-prop($opacity) {\n $opacity: custom-properties.create(ripple-press-opacity, $opacity);\n }\n\n &:not(.mdc-ripple-upgraded) {\n // Apply press additively by using the ::after pseudo-element\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-animation) {\n transition: opacity $fade-out-duration linear;\n }\n }\n\n &:active {\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-animation) {\n transition-duration: $fade-in-duration;\n }\n\n // Opacity falls under color because the chosen opacity is color-dependent in typical usage\n @include feature-targeting.targets($feat-color) {\n @include theme.property(opacity, $opacity);\n }\n }\n }\n }\n\n &.mdc-ripple-upgraded {\n @include feature-targeting.targets($feat-color) {\n // Upgraded ripple should always emit custom property, regardless of\n // configuration, since ripple itself feature detects custom property\n // support at runtime.\n @include custom-properties.configure($emit-custom-properties: true) {\n @include theme.property(\n custom-properties.create(ripple-fg-opacity, $opacity)\n );\n }\n }\n }\n }\n}\n\n// Simple mixin for base states which automatically selects opacity values based on whether the ink color is\n// light or dark.\n@mixin states(\n $color: theme-color.prop-value(on-surface),\n $has-nested-focusable-element: false,\n $query: feature-targeting.all(),\n $ripple-target: '&',\n $opacity-map: null\n) {\n @include states-interactions_(\n $color: $color,\n $has-nested-focusable-element: $has-nested-focusable-element,\n $query: $query,\n $ripple-target: $ripple-target,\n $opacity-map: $opacity-map\n );\n}\n\n// Simple mixin for activated states which automatically selects opacity values based on whether the ink color is\n// light or dark.\n@mixin states-activated(\n $color,\n $has-nested-focusable-element: false,\n $query: feature-targeting.all(),\n $ripple-target: '&'\n) {\n $feat-color: feature-targeting.create-target($query, color);\n $activated-opacity: states-opacity($color, activated);\n\n &--activated {\n // Stylelint seems to think that '&' qualifies as a type selector here?\n @include states-background-selector($ripple-target) {\n // Opacity falls under color because the chosen opacity is color-dependent.\n @include feature-targeting.targets($feat-color) {\n @include theme.property(\n opacity,\n custom-properties.create(\n --mdc-ripple-activated-opacity,\n $activated-opacity\n )\n );\n }\n }\n\n @include states-interactions_(\n $color: $color,\n $has-nested-focusable-element: $has-nested-focusable-element,\n $opacity-modifier: $activated-opacity,\n $query: $query,\n $ripple-target: $ripple-target\n );\n }\n}\n\n// Simple mixin for selected states which automatically selects opacity values based on whether the ink color is\n// light or dark.\n@mixin states-selected(\n $color,\n $has-nested-focusable-element: false,\n $query: feature-targeting.all(),\n $ripple-target: '&'\n) {\n $feat-color: feature-targeting.create-target($query, color);\n $selected-opacity: states-opacity($color, selected);\n\n &--selected {\n @include states-background-selector($ripple-target) {\n // Opacity falls under color because the chosen opacity is color-dependent.\n @include feature-targeting.targets($feat-color) {\n @include theme.property(\n opacity,\n custom-properties.create(\n --mdc-ripple-selected-opacity,\n $selected-opacity\n )\n );\n }\n }\n\n @include states-interactions_(\n $color: $color,\n $has-nested-focusable-element: $has-nested-focusable-element,\n $opacity-modifier: $selected-opacity,\n $query: $query,\n $ripple-target: $ripple-target\n );\n }\n}\n\n@mixin states-interactions_(\n $color,\n $has-nested-focusable-element,\n $opacity-modifier: 0,\n $query: feature-targeting.all(),\n $ripple-target: '&',\n $opacity-map: null\n) {\n @include target-selector($ripple-target) {\n @include states-base-color($color, $query);\n }\n\n @if $opacity-map == null {\n $opacity-map: (\n hover: states-opacity($color, hover) + $opacity-modifier,\n focus: states-opacity($color, focus) + $opacity-modifier,\n press: states-opacity($color, press) + $opacity-modifier,\n );\n }\n\n @include states-opacities(\n $opacity-map,\n $has-nested-focusable-element: $has-nested-focusable-element,\n $ripple-target: $ripple-target,\n $query: $query\n );\n}\n\n// Wraps content in the `ripple-target` selector if it exists.\n@mixin target-selector($ripple-target: '&') {\n @if $ripple-target == '&' {\n @content;\n } @else {\n #{$ripple-target} {\n @content;\n }\n }\n}\n\n/// Selector for hover, active and focus states.\n@mixin states-selector() {\n #{$_hover-selector},\n #{$_focus-selector},\n #{$_active-selector} {\n @content;\n }\n}\n\n@mixin hover() {\n #{$_hover-selector} {\n @content;\n }\n}\n\n// Selector for focus state. Using ':not(.mdc-ripple-upgraded)' to continue\n// applying focus styles on JS-disabled components, and control focus\n// on JS-enabled components with '.mdc-ripple-upgraded--background-focused'.\n@mixin focus() {\n #{$_focus-selector} {\n @content;\n }\n}\n\n// Selector for active state. Using `:active:active` to override focus styles.\n@mixin pressed() {\n #{$_active-selector} {\n @content;\n }\n}\n\n// @deprecated Use `pressed()` mixin - renamed for consistency.\n@mixin active() {\n @include pressed() {\n @content;\n }\n}\n\n/// Keep the ripple (State overlay) behind the content.\n@mixin behind-content(\n $ripple-target,\n $content-root-selector: '&',\n $query: feature-targeting.all()\n) {\n // Needed for IE11. Without this, IE11 renders the state layer completely\n // underneath the container, making it invisible.\n $feat-structure: feature-targeting.create-target($query, structure);\n\n #{$content-root-selector} {\n @include feature-targeting.targets($feat-structure) {\n z-index: 0;\n }\n }\n\n #{$ripple-target}::before,\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-structure) {\n @include theme.property(\n z-index,\n custom-properties.create(--mdc-ripple-z-index, -1)\n );\n }\n }\n}\n\n@function states-opacity($color, $state) {\n $color-value: theme-color.prop-value($color);\n $opacity-map: if(\n theme-color.tone($color-value) == 'light',\n $light-ink-opacities,\n $dark-ink-opacities\n );\n\n @if not map.has-key($opacity-map, $state) {\n @error \"Invalid state: '#{$state}'. Choose one of: #{map.keys($opacity-map)}\";\n }\n\n @return map.get($opacity-map, $state);\n}\n\n@mixin states-background-selector($ripple-target) {\n #{$ripple-target}::before {\n @content;\n }\n}\n"],"sourceRoot":""} |