| 1 | {"version":3,"sources":["webpack:///./packages/mdc-checkbox/mdc-checkbox.scss","webpack:///./packages/material-components-web/node_modules/@material/theme/_css.scss","webpack:///./packages/material-components-web/node_modules/@material/theme/_gss.scss","webpack:///mdc-checkbox.scss","webpack:///./packages/material-components-web/node_modules/@material/ripple/_ripple-theme.scss","webpack:///./packages/mdc-checkbox/_checkbox-theme.scss","webpack:///./packages/material-components-web/node_modules/@material/touch-target/_touch-target.scss","webpack:///./packages/material-components-web/node_modules/@material/animation/_animation.scss","webpack:///./packages/material-components-web/node_modules/@material/dom/_dom.scss","webpack:///./packages/material-components-web/node_modules/@material/ripple/_ripple.scss"],"names":[],"mappings":";;;;;;;AAgNE;EC9II;ECZF;EDwBA;EAZE;ECZF;EDwBA;AEvEJ;ACmJI;EHxFE;ECZF;EDwBA;AElEJ;ACkNI;EH5JE;ECZF;EDwBA;AE7DJ;ACoPM;EAsBA;EHzNA;ECZF;EDwBA;AEvDJ;AC8RM;EAEI;AD7RV;ACkSQ;EAEI,yBAtRO;EH0Bb;ECZF;EDwBA;AE9CJ;ACySI;EH3PA;AE3CJ;ACuHI;EHxFE;ECZF;EDwBA;AEtCJ;ACsLI;EH5JE;ECZF;EDwBA;AEjCJ;ACwNM;EAsBA;EHzNA;ECZF;EDwBA;AE3BJ;ACkQM;EAEI;ADjQV;ACsQQ;EAEI,yBAtRO;EH0Bb;ECZF;EDwBA;AElBJ;AC6QI;EH3PA;AEfJ;AC2FI;;EHxFE;ECZF;EDwBA;AETJ;AE6QE;EJhRI;ECZF;EDwBA;EAZE;ECZF;EDwBA;AEDJ;AE6SM;EJxTA;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;AEgBJ;AE6oBE;EJzqBI;ECZF;EDwBA;EAAA;AEsBJ;AEuoBE;;;EJzqBI;ECZF;EDwBA;EAZE;ECZF;EDwBA;AEgCJ;AEoqBE;EACE;IJjtBE;ICZF;IDwBA;IAAA;EEuCF;EEmqBE;IJttBE;ICZF;IDwBA;IAZE;ICZF;IDwBA;EE+CF;AACF;AEopBE;EACE;IJjtBE;ICZF;IDwBA;IAAA;EEuCF;EEmqBE;IJttBE;ICZF;IDwBA;IAZE;ICZF;IDwBA;EE+CF;AACF;AEgqBE;EACE;IJ7tBE;ICZF;IDwBA;IAZE;ICZF;IDwBA;EEyDF;EE8pBE;IJnuBE;ICZF;IDwBA;IAAA;EE+DF;AACF;AEgpBE;EACE;IJ7tBE;ICZF;IDwBA;IAZE;ICZF;IDwBA;EEyDF;EE8pBE;IJnuBE;ICZF;IDwBA;IAAA;EE+DF;AACF;AEwWQ;EAEI;UAAA;AFvWZ;AE8WQ;EAEI;UAAA;AF7WZ;AEulBE;EJzqBI;ECZF;EDwBA;EAAA;AE4EJ;AEilBE;;;EJ7pBE;EAZE;ECZF;EDwBA;AEoFJ;AE2lBI;EJ3rBE;ECZF;EDwBA;AEyFJ;AE4lBI;EJjsBE;ECZF;EDwBA;AE8FJ;AEilBI;EJ3rBE;ECZF;EDwBA;AEmGJ;AEklBI;EJjsBE;ECZF;EDwBA;AEwGJ;;AGjJE;EAOM;AH8IR;;AHoWE;EACE;IAEE,6BAPc;EG3VlB;EHqWE;IACE,6DO/gB+B;YP+gB/B,qDO/gB+B;EJ4KnC;EHsWE;IACE;EGpWJ;AACF;;AHwVE;EACE;IAEE,6BAPc;EG3VlB;EHqWE;IACE,6DO/gB+B;YP+gB/B,qDO/gB+B;EJ4KnC;EHsWE;IACE;EGpWJ;AACF;AHuWE;EACE;IAEE;YAAA;EGtWJ;EHyWE;IACE;YAAA;EGvWJ;EH0WE;IACE;YAAA;EGxWJ;AACF;AH4VE;EACE;IAEE;YAAA;EGtWJ;EHyWE;IACE;YAAA;EGvWJ;EH0WE;IACE;YAAA;EGxWJ;AACF;AH2WE;EACE;IACE,6DOtiB+B;YPsiB/B,qDOtiB+B;IPuiB/B;IACA;EGzWJ;EH4WE;IACE;IACA;EG1WJ;AACF;AHgWE;EACE;IACE,6DOtiB+B;YPsiB/B,qDOtiB+B;IPuiB/B;IACA;EGzWJ;EH4WE;IACE;IACA;EG1WJ;AACF;AH6WE;EACE;IACE,6DOrjB+B;YPqjB/B,qDOrjB+B;IPsjB/B;YAAA;IACA;EG3WJ;EH8WE;IACE;YAAA;IACA;EG5WJ;AACF;AHkWE;EACE;IACE,6DOrjB+B;YPqjB/B,qDOrjB+B;IPsjB/B;YAAA;IACA;EG3WJ;EH8WE;IACE;YAAA;IACA;EG5WJ;AACF;AH+WE;EACE;IACE,8DA7DmC;YA6DnC,sDA7DmC;IA8DnC;YAAA;IACA;EG7WJ;EHgXE;IACE;YAAA;IACA;EG9WJ;AACF;AHoWE;EACE;IACE,8DA7DmC;YA6DnC,sDA7DmC;IA8DnC;YAAA;IACA;EG7WJ;EHgXE;IACE;YAAA;IACA;EG9WJ;AACF;AHiXE;EACE;IACE;YAAA;IACA;YAAA;IACA;EG/WJ;EHkXE;IACE;YAAA;IACA;EGhXJ;AACF;AHsWE;EACE;IACE;YAAA;IACA;YAAA;IACA;EG/WJ;EHkXE;IACE;YAAA;IACA;EGhXJ;AACF;AHmXE;EACE;IACE,8DAvFmC;YAuFnC,sDAvFmC;IAwFnC;YAAA;IACA;EGjXJ;EHoXE;IACE;YAAA;IACA;EGlXJ;AACF;AHwWE;EACE;IACE,8DAvFmC;YAuFnC,sDAvFmC;IAwFnC;YAAA;IACA;EGjXJ;EHoXE;IACE;YAAA;IACA;EGlXJ;AACF;AHqXE;EACE;IACE;YAAA;IACA;YAAA;IACA;EGnXJ;EHsXE;IAEE;YAAA;IACA;EGrXJ;AACF;AH0WE;EACE;IACE;YAAA;IACA;YAAA;IACA;EGnXJ;EHsXE;IAEE;YAAA;IACA;EGrXJ;AACF;AHzME;EA4KA;EACA;EACA;EACA;EACA,WK1MU;EL2MV,YK3MU;EL4MV;EACA;EACA;EACA;AGgCF;;AKpMI;EHgpBF;IJzqBI;ICZF;IDwBA;IAAA;EEyNF;;EEocA;;;IJ7pBE;IAZE;ICZF;IDwBA;EEkOF;;EE6cE;IJ3rBE;ICZF;IDwBA;EEwOF;EE6cE;IJjsBE;ICZF;IDwBA;EE6OF;;EHjOE;IAEI;EGmON;AACF;AH9NE;EAiKA;EACA;AGgEF;;AH5NE;EA6PE;EACA;EACA;EACA;EACA;EACA,WK1TQ;EL2TR,YK3TQ;EL6TR;EACA;EACA;EACA;EACA;EAIA;AGjCJ;;AHxOE;EAySE;EACA;EACA;EACA;EACA;EACA;EACA;EAIA;AGhEJ;AHuEE;EAEI;AGtEN;;AHlPE;EAyWE;EAQA;EACA;EACA,6BAuDgB;EAtDhB,4BAsDgB;AGhLpB;;AHtPE;EA+XE;EACA;EACA;UAAA;EACA;EACA;EACA;EAIA;EAAA;EAAA;AGxIJ;;AH9FI;EACE;UAAA;EACA;UAAA;AGiGN;AH5FI;EAIE;UAAA;EAEA;AG0FN;AHrFI;EACE;UAAA;EAEA;AGsFN;AHjFI;EACE;UAAA;EAEA;AGkFN;AH7EI;EACE;UAAA;EAEA;AG8EN;AH3EI;EACE;UAAA;EAEA;AG4EN;AHvEI;EACE;UAAA;EAEA;AGwEN;AHrEI;EACE;UAAA;EAEA;AGsEN;AHjEI;EAEE;UAAA;EAEA;AGiEN;;AH3RE;;;EA4PA;AGqCF;AHzRI;;;EAmWF;AGrEF;;AHvRE;EA0PA;EACA;EACA;EACA;EACA;AGiCF;AH1RI;EAiHF;EACA;AG4KF;;AHvRE;ECvFI;ECZF;EDwBA;AEwWJ;AE5DM;EJxTA;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;AEyXJ;;AH/RI;EA0QA;EAAA;EAAA;EASA;AGiBJ;AHhSI;EAqVF;UAAA;AGlDF;;AH1RI;;EA+QA;UAAA;EACA;EAIA;EAAA;EAAA;AGaJ;AH7RI;;EA4UF;UAAA;EACA;AG3CF;;AHzRI;;;;EAsEF;AG0NF;;AMlLE;EACE;IACE,+DF3R2B;YE2R3B,uDF3R2B;IEgS3B;YAAA;ENiLJ;EM9KE;IACE;YAAA;ENgLJ;AACF;;AM5LE;EACE;IACE,+DF3R2B;YE2R3B,uDF3R2B;IEgS3B;YAAA;ENiLJ;EM9KE;IACE;YAAA;ENgLJ;AACF;AM5KE;EACE;IACE;YAAA;IACA;EN8KJ;EM3KE;IACE;EN6KJ;AACF;AMrLE;EACE;IACE;YAAA;IACA;EN8KJ;EM3KE;IACE;EN6KJ;AACF;AM1KE;EACE;IACE;YAAA;IACA;EN4KJ;EMzKE;IACE;EN2KJ;AACF;AMnLE;EACE;IACE;YAAA;IACA;EN4KJ;EMzKE;IACE;EN2KJ;AACF;AH7RE;ES/GE;EACA;EACA;EACA;EACA;EACA;EAEA;EAGE;AN4YN;AMxYE;;EAGI;EACA;EACA;EACA;EACA;ANyYN;AMrYE;EAGI;ER5EA;ECZF;EDwBA;AEwcJ;AM3XE;ERzFI;ECZF;EDwBA;AE6cJ;AMpXI;EAEI;UAAA;ANqXR;AMjXI;EAEI;EPpHJ;EAAc;EOsHV;EACA;UAAA;EACA;UAAA;ANmXR;AM7WI;EAEI;EPhIJ;EAAc;EOkIV;AN+WR;AMzWI;EAEI;UAAA;AN0WR;AMlWI;EAEI;UAAA;EAKA;UAAA;AN+VR;AMrTE;;EAGI;EPtMF;EAAc;EOwMZ;EACA,WAZK;EAaL,YAbK;ANoUX;AMlTI;;EAGI;EPlNJ;EAAc;EOoNV;EACA;EACA;ANoTR;AMhTI;EAEI;EACA;ANiTR;AC/DE;EAEI;ADgEN;AC5DE;;EH9cI;ECZF;EDwBA;AEogBJ;;AHlWE;ESoDE;EACA;EACA;EACA;EACA;EAGA;ANgTJ,C","file":"mdc.checkbox.css","sourcesContent":["//\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// Selector '.mdc-*' should only be used in this project.\n// stylelint-disable selector-class-pattern\n\n@use 'sass:map';\n@use 'sass:math';\n@use '@material/animation/functions' as functions2;\n@use '@material/animation/variables' as animation-variables;\n@use '@material/density/functions' as density-functions;\n@use '@material/dom/dom';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/ripple/ripple';\n@use '@material/ripple/ripple-theme';\n@use '@material/touch-target/mixins' as touch-target-mixins;\n@use '@material/theme/theme-color';\n@use './checkbox-custom-properties';\n@use '@material/theme/theme';\n@use '@material/theme/color-custom-properties';\n@use '@material/theme/custom-properties';\n@use '@material/touch-target/variables' as touch-target-variables;\n@use './checkbox-theme';\n\n///\n/// Checkbox and ripple styles.\n///\n@mixin core-styles($query: feature-targeting.all()) {\n @include without-ripple($query);\n @include ripple-styles($query);\n}\n\n/// Checkbox styles (Excluding ripple styles).\n///\n/// NOTE: This API is intended for use by frameworks that may want to separate the ripple-related styles from the other\n/// checkbox styles. It is recommended that most users use `mdc-checkbox-core-styles` instead.\n// TODO(b/162887560): Rename to `checkbox-without-ripple-styles()`\n@mixin without-ripple($query: feature-targeting.all()) {\n // TODO(b/165005345): Include theme-styles() after static-styles().\n @include theme-styles($query: $query);\n @include static-styles($query: $query);\n}\n\n/// Checkbox static styles.\n/// Checkbox styles that are not customizable should go here.\n@mixin static-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 @include touch-target-mixins.wrapper($query); // COPYBARA_COMMENT_THIS_LINE\n\n @include feature-targeting.targets($feat-animation) {\n @include mark-keyframes_;\n }\n\n .mdc-checkbox {\n @include feature-targeting.targets($feat-structure) {\n @include base_;\n }\n }\n\n @include dom.forced-colors-mode {\n @include checkbox-theme.disabled-container-colors(\n $unmarked-stroke-color: GrayText,\n $unmarked-fill-color: transparent,\n $marked-stroke-color: GrayText,\n $marked-fill-color: transparent,\n $query: $query\n );\n @include checkbox-theme.disabled-ink-color(GrayText, $query: $query);\n\n .mdc-checkbox__mixedmark {\n @include feature-targeting.targets($feat-structure) {\n margin: 0 1px; // Extra horizontal space around mixedmark symbol.\n }\n }\n }\n\n // Needed to disable hover effects on CSS-only (non-JS) checkboxes\n .mdc-checkbox--disabled {\n @include feature-targeting.targets($feat-structure) {\n @include disabled_;\n }\n }\n\n .mdc-checkbox__background {\n @include background_($query);\n }\n\n .mdc-checkbox__checkmark {\n @include checkmark_($query);\n }\n\n .mdc-checkbox__checkmark-path {\n @include checkmark-path_($query);\n }\n\n .mdc-checkbox__mixedmark {\n @include mixedmark_($query);\n }\n\n .mdc-checkbox--anim {\n @include feature-targeting.targets($feat-animation) {\n @include anim_;\n }\n }\n\n .mdc-checkbox__native-control:checked ~ .mdc-checkbox__background,\n .mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background,\n .mdc-checkbox__native-control[data-indeterminate='true']\n ~ .mdc-checkbox__background {\n @include feature-targeting.targets($feat-animation) {\n @include background--marked_;\n }\n\n .mdc-checkbox__checkmark-path {\n @include feature-targeting.targets($feat-structure) {\n @include checkmark-path--marked_;\n }\n }\n }\n\n .mdc-checkbox__native-control {\n @include feature-targeting.targets($feat-structure) {\n @include native-control_;\n }\n\n &:disabled {\n @include feature-targeting.targets($feat-structure) {\n @include disabled_;\n }\n }\n }\n\n .mdc-checkbox--touch {\n @include checkbox-theme.touch-target(\n custom-properties.create(\n checkbox-state-layer-size,\n touch-target-variables.$height\n ),\n custom-properties.create(\n checkbox-state-layer-size,\n checkbox-theme.$ripple-size\n ),\n $query: $query\n );\n }\n\n .mdc-checkbox__native-control:checked ~ .mdc-checkbox__background {\n .mdc-checkbox__checkmark {\n @include checkmark--checked_($query);\n }\n\n .mdc-checkbox__mixedmark {\n @include feature-targeting.targets($feat-structure) {\n @include mixedmark--checked_;\n }\n }\n }\n .mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background,\n .mdc-checkbox__native-control[data-indeterminate='true']\n ~ .mdc-checkbox__background {\n .mdc-checkbox__checkmark {\n @include checkmark--indeterminate_($query);\n }\n\n .mdc-checkbox__mixedmark {\n @include feature-targeting.targets($feat-structure) {\n @include mixedmark--indeterminate_;\n }\n }\n }\n\n // JS checkbox\n .mdc-checkbox.mdc-checkbox--upgraded {\n .mdc-checkbox__background,\n .mdc-checkbox__checkmark,\n .mdc-checkbox__checkmark-path,\n .mdc-checkbox__mixedmark {\n @include feature-targeting.targets($feat-animation) {\n @include child--upgraded_;\n }\n }\n }\n}\n\n/// Checkbox theme styles.\n/// Checkbox styles that are customizable should go here.\n@mixin theme-styles($query: feature-targeting.all()) {\n .mdc-checkbox {\n @include checkbox-theme.theme-deprecated(\n checkbox-theme.$light-theme-deprecated,\n $query: $query\n );\n }\n}\n\n/// Checkbox's ripple styles.\n///\n/// NOTE: This API is intended for use by frameworks that may want to separate the ripple-related styles from the other\n/// checkbox styles. It is recommended that most users use `mdc-checkbox-core-styles` instead.\n@mixin ripple-styles($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include ripple.common($query); // COPYBARA_COMMENT_THIS_LINE\n\n .mdc-checkbox {\n @include ripple.surface(\n $query: $query,\n $ripple-target: checkbox-theme.$ripple-target\n );\n @include ripple.radius-unbounded(\n $query: $query,\n $ripple-target: checkbox-theme.$ripple-target\n );\n @include ripple-theme.behind-content(\n checkbox-theme.$ripple-target,\n $query: $query\n );\n }\n\n #{checkbox-theme.$ripple-target} {\n @include ripple.target-common($query: $query);\n }\n}\n\n@mixin base_ {\n display: inline-block;\n position: relative;\n flex: 0 0 checkbox-theme.$icon-size;\n box-sizing: content-box;\n width: checkbox-theme.$icon-size;\n height: checkbox-theme.$icon-size;\n line-height: 0;\n white-space: nowrap;\n cursor: pointer;\n vertical-align: bottom;\n}\n\n@mixin disabled_ {\n cursor: default;\n pointer-events: none;\n}\n\n@mixin child--upgraded_ {\n transition: none;\n}\n\n// Animation\n\n@mixin anim_ {\n $mdc-checkbox-indeterminate-change-duration_: 500ms;\n\n // stylelint-disable selector-max-type\n\n &-unchecked-checked,\n &-unchecked-indeterminate,\n &-checked-unchecked,\n &-indeterminate-unchecked {\n .mdc-checkbox__background {\n animation-duration: checkbox-theme.$transition-duration * 2;\n animation-timing-function: linear;\n }\n }\n\n &-unchecked-checked {\n .mdc-checkbox__checkmark-path {\n // Instead of delaying the animation, we simply multiply its length by 2 and begin the\n // animation at 50% in order to prevent a flash of styles applied to a checked checkmark\n // as the background is fading in before the animation begins.\n animation: mdc-checkbox-unchecked-checked-checkmark-path\n checkbox-theme.$transition-duration * 2 linear 0s;\n transition: none;\n }\n }\n\n &-unchecked-indeterminate {\n .mdc-checkbox__mixedmark {\n animation: mdc-checkbox-unchecked-indeterminate-mixedmark\n checkbox-theme.$transition-duration linear 0s;\n transition: none;\n }\n }\n\n &-checked-unchecked {\n .mdc-checkbox__checkmark-path {\n animation: mdc-checkbox-checked-unchecked-checkmark-path\n checkbox-theme.$transition-duration linear 0s;\n transition: none;\n }\n }\n\n &-checked-indeterminate {\n .mdc-checkbox__checkmark {\n animation: mdc-checkbox-checked-indeterminate-checkmark\n checkbox-theme.$transition-duration linear 0s;\n transition: none;\n }\n\n .mdc-checkbox__mixedmark {\n animation: mdc-checkbox-checked-indeterminate-mixedmark\n checkbox-theme.$transition-duration linear 0s;\n transition: none;\n }\n }\n\n &-indeterminate-checked {\n .mdc-checkbox__checkmark {\n animation: mdc-checkbox-indeterminate-checked-checkmark\n $mdc-checkbox-indeterminate-change-duration_ linear 0s;\n transition: none;\n }\n\n .mdc-checkbox__mixedmark {\n animation: mdc-checkbox-indeterminate-checked-mixedmark\n $mdc-checkbox-indeterminate-change-duration_ linear 0s;\n transition: none;\n }\n }\n\n &-indeterminate-unchecked {\n .mdc-checkbox__mixedmark {\n // stylelint-disable-next-line declaration-colon-space-after\n animation: mdc-checkbox-indeterminate-unchecked-mixedmark\n $mdc-checkbox-indeterminate-change-duration_ * 0.6 linear 0s;\n transition: none;\n }\n }\n\n // stylelint-enable selector-max-type\n}\n\n@mixin background_($query: feature-targeting.all()) {\n $feat-animation: feature-targeting.create-target($query, animation);\n $feat-structure: feature-targeting.create-target($query, structure);\n $feat-color: feature-targeting.create-target($query, color);\n\n @include feature-targeting.targets($feat-structure) {\n display: inline-flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: checkbox-theme.$icon-size;\n height: checkbox-theme.$icon-size;\n // border-color is overridden by the mdc-checkbox-unmarked-stroke-color() mixin\n border: checkbox-theme.$border-width solid currentColor;\n border-radius: 2px;\n background-color: transparent;\n pointer-events: none;\n will-change: background-color, border-color;\n }\n\n @include feature-targeting.targets($feat-animation) {\n transition: transition-exit(background-color), transition-exit(border-color);\n }\n}\n\n@mixin background--marked_ {\n transition: transition-enter(border-color), transition-enter(background-color);\n}\n\n// stylelint-disable block-no-empty -- For backward compatibility.\n@mixin focus-indicator_($query: feature-targeting.all()) {\n}\n@mixin focus-indicator--focused_($query: feature-targeting.all()) {\n}\n// stylelint-enable block-no-empty\n\n// Native input\n\n@mixin native-control_ {\n position: absolute;\n margin: 0;\n padding: 0;\n opacity: 0;\n cursor: inherit;\n}\n\n// Check mark\n\n@mixin checkmark_($query: feature-targeting.all()) {\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 position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n opacity: 0;\n }\n\n @include feature-targeting.targets($feat-animation) {\n transition: transition-exit(\n opacity,\n 0ms,\n checkbox-theme.$transition-duration * 2\n );\n }\n\n .mdc-checkbox--upgraded & {\n @include feature-targeting.targets($feat-structure) {\n opacity: 1;\n }\n }\n}\n\n@mixin checkmark--checked_($query: feature-targeting.all()) {\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-animation) {\n transition: transition-enter(\n opacity,\n 0ms,\n checkbox-theme.$transition-duration * 2\n ),\n transition-enter(transform, 0ms, checkbox-theme.$transition-duration * 2);\n }\n\n @include feature-targeting.targets($feat-structure) {\n opacity: 1;\n }\n}\n\n@mixin checkmark--indeterminate_($query: feature-targeting.all()) {\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 transform: rotate(45deg);\n opacity: 0;\n }\n\n @include feature-targeting.targets($feat-animation) {\n transition: transition-exit(\n opacity,\n 0ms,\n checkbox-theme.$transition-duration\n ),\n transition-exit(transform, 0ms, checkbox-theme.$transition-duration);\n }\n}\n\n// Check mark path\n\n@mixin checkmark-path_($query: feature-targeting.all()) {\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-animation) {\n transition: transition-exit(\n stroke-dashoffset,\n 0ms,\n checkbox-theme.$transition-duration * 2\n );\n }\n\n @include feature-targeting.targets($feat-structure) {\n stroke: currentColor;\n stroke-width: checkbox-theme.$mark-stroke-size * 1.3;\n stroke-dashoffset: $mark-path-length_;\n stroke-dasharray: $mark-path-length_;\n }\n}\n\n@mixin checkmark-path--marked_ {\n stroke-dashoffset: 0;\n}\n\n// Mixed mark\n\n@mixin mixedmark_($query: feature-targeting.all()) {\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 width: 100%;\n height: 0;\n transform: scaleX(0) rotate(0deg);\n border-width: math.div(math.floor(checkbox-theme.$mark-stroke-size), 2);\n border-style: solid;\n opacity: 0;\n }\n\n @include feature-targeting.targets($feat-animation) {\n transition: transition-exit(opacity), transition-exit(transform);\n }\n}\n\n@mixin mixedmark--checked_ {\n transform: scaleX(1) rotate(-45deg);\n}\n\n@mixin mixedmark--indeterminate_ {\n transform: scaleX(1) rotate(0deg);\n opacity: 1;\n}\n\n@function transition-enter(\n $property,\n $delay: 0ms,\n $duration: checkbox-theme.$transition-duration\n) {\n @return functions2.enter($property, $duration, $delay);\n}\n\n@function transition-exit(\n $property,\n $delay: 0ms,\n $duration: checkbox-theme.$transition-duration\n) {\n @return functions2.exit-temporary($property, $duration, $delay);\n}\n\n// Manual calculation done on SVG\n$mark-path-length_: 29.7833385 !default;\n$indeterminate-checked-easing-function_: cubic-bezier(0.14, 0, 0, 1) !default;\n\n@mixin mark-keyframes_ {\n @keyframes mdc-checkbox-unchecked-checked-checkmark-path {\n 0%,\n 50% {\n stroke-dashoffset: $mark-path-length_;\n }\n\n 50% {\n animation-timing-function: animation-variables.$deceleration-curve-timing-function;\n }\n\n 100% {\n stroke-dashoffset: 0;\n }\n }\n\n @keyframes mdc-checkbox-unchecked-indeterminate-mixedmark {\n 0%,\n 68.2% {\n transform: scaleX(0);\n }\n\n 68.2% {\n animation-timing-function: cubic-bezier(0, 0, 0, 1);\n }\n\n 100% {\n transform: scaleX(1);\n }\n }\n\n @keyframes mdc-checkbox-checked-unchecked-checkmark-path {\n from {\n animation-timing-function: animation-variables.$acceleration-curve-timing-function;\n opacity: 1;\n stroke-dashoffset: 0;\n }\n\n to {\n opacity: 0;\n stroke-dashoffset: $mark-path-length_ * -1;\n }\n }\n\n @keyframes mdc-checkbox-checked-indeterminate-checkmark {\n from {\n animation-timing-function: animation-variables.$deceleration-curve-timing-function;\n transform: rotate(0deg);\n opacity: 1;\n }\n\n to {\n transform: rotate(45deg);\n opacity: 0;\n }\n }\n\n @keyframes mdc-checkbox-indeterminate-checked-checkmark {\n from {\n animation-timing-function: $indeterminate-checked-easing-function_;\n transform: rotate(45deg);\n opacity: 0;\n }\n\n to {\n transform: rotate(360deg);\n opacity: 1;\n }\n }\n\n @keyframes mdc-checkbox-checked-indeterminate-mixedmark {\n from {\n animation-timing-function: mdc-animation-deceleration-curve-timing-function;\n transform: rotate(-45deg);\n opacity: 0;\n }\n\n to {\n transform: rotate(0deg);\n opacity: 1;\n }\n }\n\n @keyframes mdc-checkbox-indeterminate-checked-mixedmark {\n from {\n animation-timing-function: $indeterminate-checked-easing-function_;\n transform: rotate(0deg);\n opacity: 1;\n }\n\n to {\n transform: rotate(315deg);\n opacity: 0;\n }\n }\n\n @keyframes mdc-checkbox-indeterminate-unchecked-mixedmark {\n 0% {\n animation-timing-function: linear;\n transform: scaleX(1);\n opacity: 1;\n }\n\n 32.8%,\n 100% {\n transform: scaleX(0);\n opacity: 0;\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-checkbox {\n padding: calc((40px - 18px) / 2);\n /* @alternate */\n padding: calc((var(--mdc-checkbox-ripple-size, 40px) - 18px) / 2);\n margin: calc((40px - 40px) / 2);\n /* @alternate */\n margin: calc((var(--mdc-checkbox-touch-target-size, 40px) - 40px) / 2);\n}\n.mdc-checkbox .mdc-checkbox__ripple::before, .mdc-checkbox .mdc-checkbox__ripple::after {\n background-color: #000;\n /* @alternate */\n background-color: var(--mdc-ripple-color, #000);\n}\n.mdc-checkbox:hover .mdc-checkbox__ripple::before, .mdc-checkbox.mdc-ripple-surface--hover .mdc-checkbox__ripple::before {\n opacity: 0.04;\n /* @alternate */\n opacity: var(--mdc-ripple-hover-opacity, 0.04);\n}\n.mdc-checkbox.mdc-ripple-upgraded--background-focused .mdc-checkbox__ripple::before, .mdc-checkbox:not(.mdc-ripple-upgraded):focus .mdc-checkbox__ripple::before {\n transition-duration: 75ms;\n opacity: 0.12;\n /* @alternate */\n opacity: var(--mdc-ripple-focus-opacity, 0.12);\n}\n.mdc-checkbox:not(.mdc-ripple-upgraded) .mdc-checkbox__ripple::after {\n transition: opacity 150ms linear;\n}\n.mdc-checkbox:not(.mdc-ripple-upgraded):active .mdc-checkbox__ripple::after {\n transition-duration: 75ms;\n opacity: 0.12;\n /* @alternate */\n opacity: var(--mdc-ripple-press-opacity, 0.12);\n}\n.mdc-checkbox.mdc-ripple-upgraded {\n --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12);\n}\n.mdc-checkbox.mdc-checkbox--selected .mdc-checkbox__ripple::before, .mdc-checkbox.mdc-checkbox--selected .mdc-checkbox__ripple::after {\n background-color: #018786;\n /* @alternate */\n background-color: var(--mdc-ripple-color, var(--mdc-theme-secondary, #018786));\n}\n.mdc-checkbox.mdc-checkbox--selected:hover .mdc-checkbox__ripple::before, .mdc-checkbox.mdc-checkbox--selected.mdc-ripple-surface--hover .mdc-checkbox__ripple::before {\n opacity: 0.04;\n /* @alternate */\n opacity: var(--mdc-ripple-hover-opacity, 0.04);\n}\n.mdc-checkbox.mdc-checkbox--selected.mdc-ripple-upgraded--background-focused .mdc-checkbox__ripple::before, .mdc-checkbox.mdc-checkbox--selected:not(.mdc-ripple-upgraded):focus .mdc-checkbox__ripple::before {\n transition-duration: 75ms;\n opacity: 0.12;\n /* @alternate */\n opacity: var(--mdc-ripple-focus-opacity, 0.12);\n}\n.mdc-checkbox.mdc-checkbox--selected:not(.mdc-ripple-upgraded) .mdc-checkbox__ripple::after {\n transition: opacity 150ms linear;\n}\n.mdc-checkbox.mdc-checkbox--selected:not(.mdc-ripple-upgraded):active .mdc-checkbox__ripple::after {\n transition-duration: 75ms;\n opacity: 0.12;\n /* @alternate */\n opacity: var(--mdc-ripple-press-opacity, 0.12);\n}\n.mdc-checkbox.mdc-checkbox--selected.mdc-ripple-upgraded {\n --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12);\n}\n.mdc-checkbox.mdc-ripple-upgraded--background-focused.mdc-checkbox--selected .mdc-checkbox__ripple::before,\n.mdc-checkbox.mdc-ripple-upgraded--background-focused.mdc-checkbox--selected .mdc-checkbox__ripple::after {\n background-color: #018786;\n /* @alternate */\n background-color: var(--mdc-ripple-color, var(--mdc-theme-secondary, #018786));\n}\n.mdc-checkbox .mdc-checkbox__background {\n top: calc((40px - 18px) / 2);\n /* @alternate */\n top: calc((var(--mdc-checkbox-ripple-size, 40px) - 18px) / 2);\n left: calc((40px - 18px) / 2);\n /* @alternate */\n left: calc((var(--mdc-checkbox-ripple-size, 40px) - 18px) / 2);\n}\n.mdc-checkbox .mdc-checkbox__native-control {\n top: calc((40px - 40px) / 2);\n /* @alternate */\n top: calc((40px - var(--mdc-checkbox-touch-target-size, 40px)) / 2);\n right: calc((40px - 40px) / 2);\n /* @alternate */\n right: calc((40px - var(--mdc-checkbox-touch-target-size, 40px)) / 2);\n left: calc((40px - 40px) / 2);\n /* @alternate */\n left: calc((40px - var(--mdc-checkbox-touch-target-size, 40px)) / 2);\n width: 40px;\n /* @alternate */\n width: var(--mdc-checkbox-touch-target-size, 40px);\n height: 40px;\n /* @alternate */\n height: var(--mdc-checkbox-touch-target-size, 40px);\n}\n.mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true]) ~ .mdc-checkbox__background {\n border-color: rgba(0, 0, 0, 0.54);\n /* @alternate */\n border-color: var(--mdc-checkbox-unchecked-color, rgba(0, 0, 0, 0.54));\n background-color: transparent;\n}\n.mdc-checkbox .mdc-checkbox__native-control:enabled:checked ~ .mdc-checkbox__background,\n.mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate ~ .mdc-checkbox__background,\n.mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true]:enabled ~ .mdc-checkbox__background {\n border-color: #018786;\n /* @alternate */\n border-color: var(--mdc-checkbox-checked-color, var(--mdc-theme-secondary, #018786));\n background-color: #018786;\n /* @alternate */\n background-color: var(--mdc-checkbox-checked-color, var(--mdc-theme-secondary, #018786));\n}\n@keyframes mdc-checkbox-fade-in-background-8A000000FF01878600000000FF018786 {\n 0% {\n border-color: rgba(0, 0, 0, 0.54);\n /* @alternate */\n border-color: var(--mdc-checkbox-unchecked-color, rgba(0, 0, 0, 0.54));\n background-color: transparent;\n }\n 50% {\n border-color: #018786;\n /* @alternate */\n border-color: var(--mdc-checkbox-checked-color, var(--mdc-theme-secondary, #018786));\n background-color: #018786;\n /* @alternate */\n background-color: var(--mdc-checkbox-checked-color, var(--mdc-theme-secondary, #018786));\n }\n}\n@keyframes mdc-checkbox-fade-out-background-8A000000FF01878600000000FF018786 {\n 0%, 80% {\n border-color: #018786;\n /* @alternate */\n border-color: var(--mdc-checkbox-checked-color, var(--mdc-theme-secondary, #018786));\n background-color: #018786;\n /* @alternate */\n background-color: var(--mdc-checkbox-checked-color, var(--mdc-theme-secondary, #018786));\n }\n 100% {\n border-color: rgba(0, 0, 0, 0.54);\n /* @alternate */\n border-color: var(--mdc-checkbox-unchecked-color, rgba(0, 0, 0, 0.54));\n background-color: transparent;\n }\n}\n.mdc-checkbox.mdc-checkbox--anim-unchecked-checked .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background, .mdc-checkbox.mdc-checkbox--anim-unchecked-indeterminate .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background {\n animation-name: mdc-checkbox-fade-in-background-8A000000FF01878600000000FF018786;\n}\n.mdc-checkbox.mdc-checkbox--anim-checked-unchecked .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background, .mdc-checkbox.mdc-checkbox--anim-indeterminate-unchecked .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background {\n animation-name: mdc-checkbox-fade-out-background-8A000000FF01878600000000FF018786;\n}\n.mdc-checkbox .mdc-checkbox__native-control[disabled]:not(:checked):not(:indeterminate):not([data-indeterminate=true]) ~ .mdc-checkbox__background {\n border-color: rgba(0, 0, 0, 0.38);\n /* @alternate */\n border-color: var(--mdc-checkbox-disabled-color, rgba(0, 0, 0, 0.38));\n background-color: transparent;\n}\n.mdc-checkbox .mdc-checkbox__native-control[disabled]:checked ~ .mdc-checkbox__background,\n.mdc-checkbox .mdc-checkbox__native-control[disabled]:indeterminate ~ .mdc-checkbox__background,\n.mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true][disabled] ~ .mdc-checkbox__background {\n border-color: transparent;\n background-color: rgba(0, 0, 0, 0.38);\n /* @alternate */\n background-color: var(--mdc-checkbox-disabled-color, rgba(0, 0, 0, 0.38));\n}\n.mdc-checkbox .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background .mdc-checkbox__checkmark {\n color: #fff;\n /* @alternate */\n color: var(--mdc-checkbox-ink-color, #fff);\n}\n.mdc-checkbox .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background .mdc-checkbox__mixedmark {\n border-color: #fff;\n /* @alternate */\n border-color: var(--mdc-checkbox-ink-color, #fff);\n}\n.mdc-checkbox .mdc-checkbox__native-control:disabled ~ .mdc-checkbox__background .mdc-checkbox__checkmark {\n color: #fff;\n /* @alternate */\n color: var(--mdc-checkbox-ink-color, #fff);\n}\n.mdc-checkbox .mdc-checkbox__native-control:disabled ~ .mdc-checkbox__background .mdc-checkbox__mixedmark {\n border-color: #fff;\n /* @alternate */\n border-color: var(--mdc-checkbox-ink-color, #fff);\n}\n\n.mdc-touch-target-wrapper {\n display: inline;\n}\n\n@keyframes mdc-checkbox-unchecked-checked-checkmark-path {\n 0%, 50% {\n stroke-dashoffset: 29.7833385;\n }\n 50% {\n animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n }\n 100% {\n stroke-dashoffset: 0;\n }\n}\n@keyframes mdc-checkbox-unchecked-indeterminate-mixedmark {\n 0%, 68.2% {\n transform: scaleX(0);\n }\n 68.2% {\n animation-timing-function: cubic-bezier(0, 0, 0, 1);\n }\n 100% {\n transform: scaleX(1);\n }\n}\n@keyframes mdc-checkbox-checked-unchecked-checkmark-path {\n from {\n animation-timing-function: cubic-bezier(0.4, 0, 1, 1);\n opacity: 1;\n stroke-dashoffset: 0;\n }\n to {\n opacity: 0;\n stroke-dashoffset: -29.7833385;\n }\n}\n@keyframes mdc-checkbox-checked-indeterminate-checkmark {\n from {\n animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n transform: rotate(0deg);\n opacity: 1;\n }\n to {\n transform: rotate(45deg);\n opacity: 0;\n }\n}\n@keyframes mdc-checkbox-indeterminate-checked-checkmark {\n from {\n animation-timing-function: cubic-bezier(0.14, 0, 0, 1);\n transform: rotate(45deg);\n opacity: 0;\n }\n to {\n transform: rotate(360deg);\n opacity: 1;\n }\n}\n@keyframes mdc-checkbox-checked-indeterminate-mixedmark {\n from {\n animation-timing-function: mdc-animation-deceleration-curve-timing-function;\n transform: rotate(-45deg);\n opacity: 0;\n }\n to {\n transform: rotate(0deg);\n opacity: 1;\n }\n}\n@keyframes mdc-checkbox-indeterminate-checked-mixedmark {\n from {\n animation-timing-function: cubic-bezier(0.14, 0, 0, 1);\n transform: rotate(0deg);\n opacity: 1;\n }\n to {\n transform: rotate(315deg);\n opacity: 0;\n }\n}\n@keyframes mdc-checkbox-indeterminate-unchecked-mixedmark {\n 0% {\n animation-timing-function: linear;\n transform: scaleX(1);\n opacity: 1;\n }\n 32.8%, 100% {\n transform: scaleX(0);\n opacity: 0;\n }\n}\n.mdc-checkbox {\n display: inline-block;\n position: relative;\n flex: 0 0 18px;\n box-sizing: content-box;\n width: 18px;\n height: 18px;\n line-height: 0;\n white-space: nowrap;\n cursor: pointer;\n vertical-align: bottom;\n}\n\n@media screen and (forced-colors: active), (-ms-high-contrast: active) {\n .mdc-checkbox__native-control[disabled]:not(:checked):not(:indeterminate):not([data-indeterminate=true]) ~ .mdc-checkbox__background {\n border-color: GrayText;\n /* @alternate */\n border-color: var(--mdc-checkbox-disabled-color, GrayText);\n background-color: transparent;\n }\n\n .mdc-checkbox__native-control[disabled]:checked ~ .mdc-checkbox__background,\n.mdc-checkbox__native-control[disabled]:indeterminate ~ .mdc-checkbox__background,\n.mdc-checkbox__native-control[data-indeterminate=true][disabled] ~ .mdc-checkbox__background {\n border-color: GrayText;\n background-color: transparent;\n /* @alternate */\n background-color: var(--mdc-checkbox-disabled-color, transparent);\n }\n\n .mdc-checkbox__native-control:disabled ~ .mdc-checkbox__background .mdc-checkbox__checkmark {\n color: GrayText;\n /* @alternate */\n color: var(--mdc-checkbox-ink-color, GrayText);\n }\n .mdc-checkbox__native-control:disabled ~ .mdc-checkbox__background .mdc-checkbox__mixedmark {\n border-color: GrayText;\n /* @alternate */\n border-color: var(--mdc-checkbox-ink-color, GrayText);\n }\n\n .mdc-checkbox__mixedmark {\n margin: 0 1px;\n }\n}\n.mdc-checkbox--disabled {\n cursor: default;\n pointer-events: none;\n}\n\n.mdc-checkbox__background {\n display: inline-flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: 18px;\n height: 18px;\n border: 2px solid currentColor;\n border-radius: 2px;\n background-color: transparent;\n pointer-events: none;\n will-change: background-color, border-color;\n transition: background-color 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1), border-color 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1);\n}\n\n.mdc-checkbox__checkmark {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n opacity: 0;\n transition: opacity 180ms 0ms cubic-bezier(0.4, 0, 0.6, 1);\n}\n.mdc-checkbox--upgraded .mdc-checkbox__checkmark {\n opacity: 1;\n}\n\n.mdc-checkbox__checkmark-path {\n transition: stroke-dashoffset 180ms 0ms cubic-bezier(0.4, 0, 0.6, 1);\n stroke: currentColor;\n stroke-width: 3.12px;\n stroke-dashoffset: 29.7833385;\n stroke-dasharray: 29.7833385;\n}\n\n.mdc-checkbox__mixedmark {\n width: 100%;\n height: 0;\n transform: scaleX(0) rotate(0deg);\n border-width: 1px;\n border-style: solid;\n opacity: 0;\n transition: opacity 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1), transform 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1);\n}\n\n.mdc-checkbox--anim-unchecked-checked .mdc-checkbox__background, .mdc-checkbox--anim-unchecked-indeterminate .mdc-checkbox__background, .mdc-checkbox--anim-checked-unchecked .mdc-checkbox__background, .mdc-checkbox--anim-indeterminate-unchecked .mdc-checkbox__background {\n animation-duration: 180ms;\n animation-timing-function: linear;\n}\n.mdc-checkbox--anim-unchecked-checked .mdc-checkbox__checkmark-path {\n animation: mdc-checkbox-unchecked-checked-checkmark-path 180ms linear 0s;\n transition: none;\n}\n.mdc-checkbox--anim-unchecked-indeterminate .mdc-checkbox__mixedmark {\n animation: mdc-checkbox-unchecked-indeterminate-mixedmark 90ms linear 0s;\n transition: none;\n}\n.mdc-checkbox--anim-checked-unchecked .mdc-checkbox__checkmark-path {\n animation: mdc-checkbox-checked-unchecked-checkmark-path 90ms linear 0s;\n transition: none;\n}\n.mdc-checkbox--anim-checked-indeterminate .mdc-checkbox__checkmark {\n animation: mdc-checkbox-checked-indeterminate-checkmark 90ms linear 0s;\n transition: none;\n}\n.mdc-checkbox--anim-checked-indeterminate .mdc-checkbox__mixedmark {\n animation: mdc-checkbox-checked-indeterminate-mixedmark 90ms linear 0s;\n transition: none;\n}\n.mdc-checkbox--anim-indeterminate-checked .mdc-checkbox__checkmark {\n animation: mdc-checkbox-indeterminate-checked-checkmark 500ms linear 0s;\n transition: none;\n}\n.mdc-checkbox--anim-indeterminate-checked .mdc-checkbox__mixedmark {\n animation: mdc-checkbox-indeterminate-checked-mixedmark 500ms linear 0s;\n transition: none;\n}\n.mdc-checkbox--anim-indeterminate-unchecked .mdc-checkbox__mixedmark {\n animation: mdc-checkbox-indeterminate-unchecked-mixedmark 300ms linear 0s;\n transition: none;\n}\n\n.mdc-checkbox__native-control:checked ~ .mdc-checkbox__background,\n.mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background,\n.mdc-checkbox__native-control[data-indeterminate=true] ~ .mdc-checkbox__background {\n transition: border-color 90ms 0ms cubic-bezier(0, 0, 0.2, 1), background-color 90ms 0ms cubic-bezier(0, 0, 0.2, 1);\n}\n.mdc-checkbox__native-control:checked ~ .mdc-checkbox__background .mdc-checkbox__checkmark-path,\n.mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background .mdc-checkbox__checkmark-path,\n.mdc-checkbox__native-control[data-indeterminate=true] ~ .mdc-checkbox__background .mdc-checkbox__checkmark-path {\n stroke-dashoffset: 0;\n}\n\n.mdc-checkbox__native-control {\n position: absolute;\n margin: 0;\n padding: 0;\n opacity: 0;\n cursor: inherit;\n}\n.mdc-checkbox__native-control:disabled {\n cursor: default;\n pointer-events: none;\n}\n\n.mdc-checkbox--touch {\n margin: calc((48px - 40px) / 2);\n /* @alternate */\n margin: calc((var(--mdc-checkbox-state-layer-size, 48px) - var(--mdc-checkbox-state-layer-size, 40px)) / 2);\n}\n.mdc-checkbox--touch .mdc-checkbox__native-control {\n top: calc((40px - 48px) / 2);\n /* @alternate */\n top: calc((var(--mdc-checkbox-state-layer-size, 40px) - var(--mdc-checkbox-state-layer-size, 48px)) / 2);\n right: calc((40px - 48px) / 2);\n /* @alternate */\n right: calc((var(--mdc-checkbox-state-layer-size, 40px) - var(--mdc-checkbox-state-layer-size, 48px)) / 2);\n left: calc((40px - 48px) / 2);\n /* @alternate */\n left: calc((var(--mdc-checkbox-state-layer-size, 40px) - var(--mdc-checkbox-state-layer-size, 48px)) / 2);\n width: 48px;\n /* @alternate */\n width: var(--mdc-checkbox-state-layer-size, 48px);\n height: 48px;\n /* @alternate */\n height: var(--mdc-checkbox-state-layer-size, 48px);\n}\n\n.mdc-checkbox__native-control:checked ~ .mdc-checkbox__background .mdc-checkbox__checkmark {\n transition: opacity 180ms 0ms cubic-bezier(0, 0, 0.2, 1), transform 180ms 0ms cubic-bezier(0, 0, 0.2, 1);\n opacity: 1;\n}\n.mdc-checkbox__native-control:checked ~ .mdc-checkbox__background .mdc-checkbox__mixedmark {\n transform: scaleX(1) rotate(-45deg);\n}\n\n.mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background .mdc-checkbox__checkmark,\n.mdc-checkbox__native-control[data-indeterminate=true] ~ .mdc-checkbox__background .mdc-checkbox__checkmark {\n transform: rotate(45deg);\n opacity: 0;\n transition: opacity 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1), transform 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1);\n}\n.mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background .mdc-checkbox__mixedmark,\n.mdc-checkbox__native-control[data-indeterminate=true] ~ .mdc-checkbox__background .mdc-checkbox__mixedmark {\n transform: scaleX(1) rotate(0deg);\n opacity: 1;\n}\n\n.mdc-checkbox.mdc-checkbox--upgraded .mdc-checkbox__background,\n.mdc-checkbox.mdc-checkbox--upgraded .mdc-checkbox__checkmark,\n.mdc-checkbox.mdc-checkbox--upgraded .mdc-checkbox__checkmark-path,\n.mdc-checkbox.mdc-checkbox--upgraded .mdc-checkbox__mixedmark {\n transition: none;\n}\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-checkbox {\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.mdc-checkbox .mdc-checkbox__ripple::before,\n.mdc-checkbox .mdc-checkbox__ripple::after {\n position: absolute;\n border-radius: 50%;\n opacity: 0;\n pointer-events: none;\n content: \"\";\n}\n.mdc-checkbox .mdc-checkbox__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-checkbox .mdc-checkbox__ripple::after {\n z-index: 0;\n /* @alternate */\n z-index: var(--mdc-ripple-z-index, 0);\n}\n.mdc-checkbox.mdc-ripple-upgraded .mdc-checkbox__ripple::before {\n transform: scale(var(--mdc-ripple-fg-scale, 1));\n}\n.mdc-checkbox.mdc-ripple-upgraded .mdc-checkbox__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-checkbox.mdc-ripple-upgraded--unbounded .mdc-checkbox__ripple::after {\n top: var(--mdc-ripple-top, 0);\n /* @noflip */\n /*rtl:ignore*/\n left: var(--mdc-ripple-left, 0);\n}\n.mdc-checkbox.mdc-ripple-upgraded--foreground-activation .mdc-checkbox__ripple::after {\n animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;\n}\n.mdc-checkbox.mdc-ripple-upgraded--foreground-deactivation .mdc-checkbox__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-checkbox .mdc-checkbox__ripple::before,\n.mdc-checkbox .mdc-checkbox__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-checkbox.mdc-ripple-upgraded .mdc-checkbox__ripple::before,\n.mdc-checkbox.mdc-ripple-upgraded .mdc-checkbox__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-checkbox.mdc-ripple-upgraded .mdc-checkbox__ripple::after {\n width: var(--mdc-ripple-fg-size, 100%);\n height: var(--mdc-ripple-fg-size, 100%);\n}\n.mdc-checkbox {\n z-index: 0;\n}\n.mdc-checkbox .mdc-checkbox__ripple::before,\n.mdc-checkbox .mdc-checkbox__ripple::after {\n z-index: -1;\n /* @alternate */\n z-index: var(--mdc-ripple-z-index, -1);\n}\n\n.mdc-checkbox__ripple {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\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// Selector '.mdc-*' should only be used in this project.\n// stylelint-disable selector-class-pattern\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 @if color.alpha(theme-color.prop-value($color)) > 0 {\n @include theme.property(background-color, $color);\n } @else {\n // If a color with 0 alpha is specified, don't render the ripple pseudo-elements at all.\n // This avoids unnecessary transitions and overflow.\n content: none;\n }\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 #{$ripple-target}::before {\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 #{$ripple-target}::before {\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 #{$ripple-target}::before {\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 // stylelint-disable-next-line selector-max-type\n #{$ripple-target}::before {\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 // stylelint-disable-next-line selector-max-type\n #{$ripple-target}::before {\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// 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// Selector '.mdc-*' should only be used in this project.\n// stylelint-disable selector-class-pattern\n\n@use 'sass:map';\n@use 'sass:math';\n@use '@material/animation/functions' as functions2;\n@use '@material/density/functions' as density-functions;\n@use '@material/density/variables' as density-variables;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/ripple/ripple';\n@use '@material/ripple/ripple-theme';\n@use '@material/theme/color-custom-properties';\n@use '@material/theme/custom-properties';\n@use '@material/theme/keys';\n@use '@material/theme/theme';\n@use '@material/theme/theme-color';\n@use '@material/theme/shadow-dom';\n@use '@material/touch-target/touch-target';\n@use './checkbox-custom-properties';\n\n$baseline-theme-color: secondary !default;\n$mark-color: theme-color.prop-value(on-secondary) !default;\n$border-color: rgba(theme-color.prop-value(on-surface), 0.54) !default;\n$disabled-color: rgba(theme-color.prop-value(on-surface), 0.38) !default;\n\n$ripple-size: 40px !default;\n$icon-size: 18px !default;\n$mark-stroke-size: math.div(2, 15) * $icon-size !default;\n$border-width: 2px !default;\n$transition-duration: 90ms !default;\n$item-spacing: 4px !default;\n$focus-indicator-opacity: map.get(\n ripple-theme.$dark-ink-opacities,\n focus\n) !default;\n\n$minimum-size: 28px !default;\n$maximum-size: $ripple-size !default;\n$density-scale: density-variables.$default-scale !default;\n$density-config: (\n size: (\n minimum: $minimum-size,\n default: $ripple-size,\n maximum: $maximum-size,\n ),\n) !default;\n\n$ripple-target: '.mdc-checkbox__ripple';\n$custom-property-prefix: 'checkbox';\n\n// TODO(b/188417756): State layer (ripple) size token is missing including\n// `state-layer-size`.\n// TODO(b/187852988): `selected-checkmark-color` does not exist in tokens.\n$light-theme: (\n disabled-selected-icon-color: $disabled-color,\n disabled-selected-icon-opacity: null,\n disabled-unselected-icon-color: $disabled-color,\n disabled-unselected-icon-opacity: null,\n selected-checkmark-color: $mark-color,\n selected-focus-icon-color: $baseline-theme-color,\n selected-focus-state-layer-color: theme-color.$on-surface,\n selected-focus-state-layer-opacity: 0.12,\n selected-hover-icon-color: $baseline-theme-color,\n selected-hover-state-layer-color: $baseline-theme-color,\n selected-hover-state-layer-opacity:\n map.get(ripple-theme.$dark-ink-opacities, hover),\n selected-icon-color: $baseline-theme-color,\n selected-pressed-icon-color: $baseline-theme-color,\n selected-pressed-state-layer-color: theme-color.$on-surface,\n selected-pressed-state-layer-opacity:\n map.get(ripple-theme.$dark-ink-opacities, pressed),\n state-layer-size: $ripple-size,\n unselected-focus-icon-color: $baseline-theme-color,\n unselected-focus-state-layer-color: theme-color.$on-surface,\n unselected-focus-state-layer-opacity:\n map.get(ripple-theme.$dark-ink-opacities, focus),\n unselected-hover-icon-color: $baseline-theme-color,\n unselected-hover-state-layer-color: theme-color.$on-surface,\n unselected-hover-state-layer-opacity:\n map.get(ripple-theme.$dark-ink-opacities, hover),\n unselected-icon-color: $border-color,\n unselected-pressed-icon-color: $border-color,\n unselected-pressed-state-layer-color: theme-color.$on-surface,\n unselected-pressed-state-layer-opacity:\n map.get(ripple-theme.$dark-ink-opacities, pressed),\n);\n\n@mixin theme($theme) {\n @include theme.validate-theme($light-theme, $theme);\n @include keys.declare-custom-properties(\n $theme,\n $prefix: $custom-property-prefix\n );\n}\n\n@mixin theme-styles($theme) {\n @include theme.validate-theme($light-theme, $theme);\n $theme: keys.create-theme-properties(\n $theme,\n $prefix: $custom-property-prefix\n );\n\n @include disabled-container-colors(\n $unmarked-stroke-color: map.get($theme, disabled-unselected-icon-color),\n $marked-fill-color: map.get($theme, disabled-selected-icon-color)\n );\n\n @include ink-color(map.get($theme, selected-checkmark-color));\n @include disabled-ink-color(map.get($theme, selected-checkmark-color));\n\n @include _icon-color(\n map.get($theme, unselected-icon-color),\n map.get($theme, selected-icon-color)\n );\n\n &:hover {\n @include _icon-color(\n map.get($theme, unselected-hover-icon-color),\n map.get($theme, selected-hover-icon-color)\n );\n }\n\n @include ripple-theme.focus() {\n @include _icon-color(\n map.get($theme, unselected-focus-icon-color),\n map.get($theme, selected-focus-icon-color)\n );\n }\n\n @include ripple-theme.active() {\n @include _icon-color(\n map.get($theme, unselected-pressed-icon-color),\n map.get($theme, selected-pressed-icon-color)\n );\n }\n\n @include ripple-color(\n $color: map.get($theme, unselected-hover-state-layer-color),\n $opacity-map: (\n hover: map.get($theme, unselected-hover-state-layer-opacity),\n focus: map.get($theme, unselected-focus-state-layer-opacity),\n press: map.get($theme, unselected-pressed-state-layer-opacity),\n )\n );\n\n @include focus-indicator-color(\n $color: map.get($theme, selected-hover-state-layer-color),\n $opacity-map: (\n hover: map.get($theme, selected-hover-state-layer-opacity),\n focus: map.get($theme, selected-focus-state-layer-opacity),\n press: map.get($theme, selected-pressed-state-layer-opacity),\n )\n );\n\n @include ripple-size(map.get($theme, state-layer-size));\n // Set touch target to ripple size.\n @include touch-target(\n map.get($theme, state-layer-size),\n map.get($theme, state-layer-size)\n );\n}\n\n$light-theme-deprecated: (\n density-scale: 0,\n checkmark-color: $mark-color,\n container-checked-color: $baseline-theme-color,\n container-checked-hover-color: null,\n container-disabled-color: $disabled-color,\n outline-color: $border-color,\n outline-hover-color: null,\n ripple-color: theme-color.$on-surface,\n ripple-opacity: ripple-theme.$dark-ink-opacities,\n ripple-checked-color: $baseline-theme-color,\n ripple-checked-opacity: ripple-theme.$dark-ink-opacities,\n);\n\n/// Sets theme to checkbox based on provided theme configuration.\n/// Only emits theme related styles.\n/// @param {Map} $theme - Theme configuration to use for theming checkbox.\n@mixin theme-deprecated($theme, $query: feature-targeting.all()) {\n @include theme.validate-theme($light-theme-deprecated, $theme);\n\n $ripple-color: map.get($theme, ripple-color);\n $ripple-opacity: map.get($theme, ripple-opacity);\n @if $ripple-opacity == null {\n $ripple-opacity: ();\n }\n @if $ripple-color {\n @include ripple-color(\n $color: $ripple-color,\n $opacity-map: $ripple-opacity,\n $query: $query\n );\n }\n\n $ripple-checked-color: map.get($theme, ripple-checked-color);\n $ripple-checked-opacity: map.get($theme, ripple-checked-opacity);\n @if $ripple-checked-opacity == null {\n $ripple-checked-opacity: ();\n }\n @if $ripple-checked-color {\n @include focus-indicator-color(\n $color: $ripple-checked-color,\n $opacity-map: $ripple-checked-opacity,\n $query: $query\n );\n }\n\n $density-scale: map.get($theme, density-scale);\n @if $density-scale != null {\n @include density($density-scale: $density-scale, $query: $query);\n }\n\n $outline-color: map.get($theme, outline-color);\n $container-checked-color: map.get($theme, container-checked-color);\n @if (\n ($outline-color and not $container-checked-color) or\n (not $outline-color and $container-checked-color)\n ) {\n @error 'Both `outline-color` and `container-checked-color` keys should be provided.';\n }\n @if ($outline-color and $container-checked-color) {\n @include container-colors(\n $unmarked-stroke-color: $outline-color,\n $marked-stroke-color: $container-checked-color,\n $marked-fill-color: $container-checked-color,\n $query: $query\n );\n }\n\n $outline-hover-color: map.get($theme, outline-hover-color);\n $container-checked-hover-color: map.get(\n $theme,\n container-checked-hover-color\n );\n @if (\n ($outline-hover-color and not $container-checked-hover-color) or\n (not $outline-hover-color and $container-checked-hover-color)\n ) {\n @error 'Both `outline-hover-color` and `container-checked-hover-color` keys should be provided.';\n }\n @if ($outline-hover-color and $container-checked-hover-color) {\n @include ripple-theme.states-selector() {\n @include container-colors(\n $unmarked-stroke-color: $outline-hover-color,\n $marked-stroke-color: $container-checked-hover-color,\n $marked-fill-color: $container-checked-hover-color,\n $query: $query\n );\n }\n }\n\n $container-disabled-color: map.get($theme, container-disabled-color);\n @if $container-disabled-color {\n @include disabled-container-colors(\n $unmarked-stroke-color: $container-disabled-color,\n $marked-fill-color: $container-disabled-color,\n $query: $query\n );\n }\n\n $checkmark-color: map.get($theme, checkmark-color);\n @if $checkmark-color {\n @include ink-color($checkmark-color, $query: $query);\n @include disabled-ink-color($checkmark-color, $query: $query);\n }\n}\n\n///\n/// @param {Number | String} $density-scale - Density scale value for component.\n/// Supported density scale values `-3`, `-2`, `-1`, `0`.\n/// @return Returns ripple size of checkbox for given density scale.\n///\n@function get-ripple-size($density-scale) {\n @return density-functions.prop-value(\n $density-config: $density-config,\n $density-scale: $density-scale,\n $property-name: size\n );\n}\n\n///\n/// Sets density scale for checkbox.\n///\n/// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values\n/// `-3`, `-2`, `-1`, `0`.\n///\n@mixin density($density-scale, $query: feature-targeting.all()) {\n $size: get-ripple-size($density-scale);\n\n @include ripple-size($size, $query: $query);\n @include touch-target($size, $ripple-size: $size, $query: $query);\n}\n\n/// Sets ripple size of checkbox and optionally set touch target size which can\n/// be more than the size of ripple.\n/// @param {Number} $ripple-size - Visual ripple size of checkbox.\n@mixin ripple-size($ripple-size, $query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @if $ripple-size and not custom-properties.is-custom-prop($ripple-size) {\n $ripple-size: custom-properties.create(\n checkbox-custom-properties.$ripple-size,\n $ripple-size\n );\n }\n $checkbox-padding: 'calc((_ripple-size - _icon-size) / 2)';\n $replace: (\n _ripple-size: $ripple-size,\n _icon-size: $icon-size,\n );\n\n @include feature-targeting.targets($feat-structure) {\n @include theme.property(padding, $checkbox-padding, $replace: $replace);\n }\n\n .mdc-checkbox__background {\n @include feature-targeting.targets($feat-structure) {\n @include theme.property(top, $checkbox-padding, $replace: $replace);\n @include theme.property(left, $checkbox-padding, $replace: $replace);\n }\n }\n}\n\n/// Sets the touch target size and appropriate margin to accommodate the\n/// touch target.\n/// @param {Number} $touch-target-size Size of touch target (Native input) in `px`.\n/// @param {Number} $ripple-size Size of ripple in `px`.\n@mixin touch-target(\n $touch-target-size,\n $ripple-size,\n $query: feature-targeting.all()\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @if $touch-target-size {\n @if not custom-properties.is-custom-prop($touch-target-size) {\n $touch-target-size: custom-properties.create(\n checkbox-custom-properties.$touch-target-size,\n $touch-target-size\n );\n }\n\n $margin: 'calc((_touch-target-size - _ripple-size) / 2)';\n $replace: (\n _touch-target-size: $touch-target-size,\n _ripple-size: $ripple-size,\n );\n\n @include feature-targeting.targets($feat-structure) {\n @include theme.property(margin, $margin, $replace: $replace);\n }\n\n $offset: 'calc((_ripple-size - _touch-target-size) / 2)';\n\n @include feature-targeting.targets($feat-structure) {\n .mdc-checkbox__native-control {\n @include theme.property(top, $offset, $replace: $replace);\n @include theme.property(right, $offset, $replace: $replace);\n @include theme.property(left, $offset, $replace: $replace);\n @include theme.property(width, $touch-target-size);\n @include theme.property(height, $touch-target-size);\n }\n }\n }\n}\n\n@mixin _icon-color($unselected-color, $selected-color) {\n @if $unselected-color and $selected-color {\n @include container-colors(\n $unmarked-stroke-color: $unselected-color,\n $marked-stroke-color: $selected-color,\n $marked-fill-color: $selected-color\n );\n } @else if $unselected-color or $selected-color {\n @error 'Both unselected and selected icon colors should be provided.';\n }\n}\n\n///\n/// Sets stroke & fill colors for both marked and unmarked state of enabled checkbox.\n/// Set $generate-keyframes to false to prevent the mixin from generating @keyframes\n/// @param {Color} $unmarked-stroke-color - The desired stroke color for the unmarked state\n/// @param {Color} $unmarked-fill-color - The desired fill color for the unmarked state\n/// @param {Color} $marked-stroke-color - The desired stroke color for the marked state\n/// @param {Color} $marked-fill-color - The desired fill color for the marked state\n/// @param {Boolean} $generate-keyframes [true] - Whether animation keyframes should be generated\n///\n@mixin container-colors(\n $unmarked-stroke-color: $border-color,\n $unmarked-fill-color: transparent,\n $marked-stroke-color: $baseline-theme-color,\n $marked-fill-color: $baseline-theme-color,\n $generate-keyframes: true,\n $query: feature-targeting.all()\n) {\n $feat-animation: feature-targeting.create-target($query, animation);\n $feat-color: feature-targeting.create-target($query, color);\n\n // Unchecked colors\n @if (\n $unmarked-stroke-color and not\n custom-properties.is-custom-prop($unmarked-stroke-color)\n ) {\n $unmarked-stroke-color: custom-properties.create(\n checkbox-custom-properties.$unchecked-color,\n theme-color.prop-value($unmarked-stroke-color)\n );\n }\n\n @include if-unmarked-enabled_ {\n @include container-colors_(\n $unmarked-stroke-color,\n $unmarked-fill-color,\n $query: $query\n );\n }\n\n // Checked colors\n @if (\n $marked-stroke-color and not\n custom-properties.is-custom-prop($marked-stroke-color)\n ) {\n $marked-stroke-color: custom-properties.create(\n checkbox-custom-properties.$checked-color,\n custom-properties.create(\n color-custom-properties.$secondary,\n theme-color.prop-value($marked-stroke-color)\n )\n );\n }\n @if (\n $marked-fill-color and not\n custom-properties.is-custom-prop($marked-fill-color)\n ) {\n $marked-fill-color: custom-properties.create(\n checkbox-custom-properties.$checked-color,\n custom-properties.create(\n color-custom-properties.$secondary,\n theme-color.prop-value($marked-fill-color)\n )\n );\n }\n\n @include if-marked-enabled_ {\n @include container-colors_(\n $marked-stroke-color,\n $marked-fill-color,\n $query: $query\n );\n }\n\n @if $generate-keyframes and\n $unmarked-stroke-color and\n $marked-stroke-color and\n $unmarked-fill-color and\n $marked-fill-color\n {\n $uid: theme-color.color-hash($unmarked-stroke-color) +\n theme-color.color-hash($marked-stroke-color) +\n theme-color.color-hash($unmarked-fill-color) +\n theme-color.color-hash($marked-fill-color);\n\n $anim-selector: if(&, '&.mdc-checkbox--anim', '.mdc-checkbox--anim');\n\n @include feature-targeting.targets($feat-animation, $feat-color) {\n @include container-keyframes_(\n $from-stroke-color: $unmarked-stroke-color,\n $to-stroke-color: $marked-stroke-color,\n $from-fill-color: $unmarked-fill-color,\n $to-fill-color: $marked-fill-color,\n $uid: #{$uid}\n );\n }\n\n // stylelint-disable max-nesting-depth\n\n #{$anim-selector} {\n &-unchecked-checked,\n &-unchecked-indeterminate {\n .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background {\n @include feature-targeting.targets($feat-animation) {\n animation-name: mdc-checkbox-fade-in-background-#{$uid};\n }\n }\n }\n\n &-checked-unchecked,\n &-indeterminate-unchecked {\n .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background {\n @include feature-targeting.targets($feat-animation) {\n animation-name: mdc-checkbox-fade-out-background-#{$uid};\n }\n }\n }\n }\n\n // stylelint-enable max-nesting-depth\n }\n}\n\n///\n/// Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n/// @param {Color} $unmarked-stroke-color - The desired stroke color for the unmarked state\n/// @param {Color} $unmarked-fill-color - The desired fill color for the unmarked state\n/// @param {Color} $marked-stroke-color - The desired stroke color for the marked state\n/// @param {Color} $marked-fill-color - The desired fill color for the marked state\n///\n@mixin disabled-container-colors(\n $unmarked-stroke-color: $disabled-color,\n $unmarked-fill-color: transparent,\n $marked-stroke-color: transparent,\n $marked-fill-color: $disabled-color,\n $query: feature-targeting.all()\n) {\n @if (\n $unmarked-stroke-color and not\n custom-properties.is-custom-prop($unmarked-stroke-color)\n ) {\n $unmarked-stroke-color: custom-properties.create(\n checkbox-custom-properties.$disabled-color,\n theme-color.prop-value($unmarked-stroke-color)\n );\n }\n\n @include if-unmarked-disabled_ {\n @include container-colors_(\n $unmarked-stroke-color,\n $unmarked-fill-color,\n $query: $query\n );\n }\n\n @if (\n $marked-fill-color and not\n custom-properties.is-custom-prop($marked-fill-color)\n ) {\n $marked-fill-color: custom-properties.create(\n checkbox-custom-properties.$disabled-color,\n theme-color.prop-value($marked-fill-color)\n );\n }\n\n @include if-marked-disabled_ {\n @include container-colors_(\n $marked-stroke-color,\n $marked-fill-color,\n $query: $query\n );\n }\n}\n\n///\n/// Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n/// @param {Color} $color - The desired ink color in enabled state\n///\n@mixin ink-color($color, $query: feature-targeting.all()) {\n @if ($color and not custom-properties.is-custom-prop($color)) {\n $color: custom-properties.create(\n checkbox-custom-properties.$ink-color,\n $color\n );\n }\n\n @include if-enabled_ {\n @include ink-color_($color, $query: $query);\n }\n}\n\n///\n/// Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n/// @param {Color} $color - The desired ink color in disabled state\n///\n@mixin disabled-ink-color($color, $query: feature-targeting.all()) {\n @if ($color and not custom-properties.is-custom-prop($color)) {\n $color: custom-properties.create(\n checkbox-custom-properties.$ink-color,\n $color\n );\n }\n\n @include if-disabled_ {\n @include ink-color_($color, $query: $query);\n }\n}\n\n/// Sets ripple color when checkbox is not in checked state.\n@mixin ripple-color(\n $color,\n $opacity-map: null,\n $query: feature-targeting.all()\n) {\n @include ripple-theme.states(\n $color: $color,\n $opacity-map: $opacity-map,\n $query: $query,\n $ripple-target: $ripple-target\n );\n}\n\n/// Sets focus indicator color when checkbox is in checked state.\n@mixin focus-indicator-color(\n $color,\n $opacity-map: null,\n $query: feature-targeting.all()\n) {\n $feat-color: feature-targeting.create-target($query, color);\n\n &.mdc-checkbox--selected {\n @include ripple-theme.states(\n $color: $color,\n $opacity-map: $opacity-map,\n $query: $query,\n $ripple-target: $ripple-target\n );\n }\n\n &.mdc-ripple-upgraded--background-focused.mdc-checkbox--selected {\n @include ripple-theme.states-base-color(\n $color: $color,\n $query: $query,\n $ripple-target: $ripple-target\n );\n }\n}\n\n//\n// Private\n//\n\n///\n/// Helps select the checkbox background only when its native control is in\n/// enabled state.\n/// @access private\n///\n@mixin if-enabled_ {\n .mdc-checkbox__native-control:enabled ~ {\n @content;\n }\n}\n\n///\n/// Helps select the checkbox background only when its native control is in\n/// disabled state.\n/// @access private\n///\n@mixin if-disabled_ {\n .mdc-checkbox__native-control:disabled ~ {\n @content;\n }\n}\n\n///\n/// Helps select the checkbox background only when its native control is in\n/// unmarked & enabled state.\n/// @access private\n///\n@mixin if-unmarked-enabled_ {\n .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate='true'])\n ~ {\n @content;\n }\n}\n\n///\n/// Helps select the checkbox background only when its native control is in\n/// unmarked & disabled state.\n/// @access private\n///\n@mixin if-unmarked-disabled_ {\n // Note: we must use `[disabled]` instead of `:disabled` below because Edge does not always recalculate the style\n // property when the `:disabled` pseudo-class is followed by a sibling combinator. See:\n // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11295231/\n .mdc-checkbox__native-control[disabled]:not(:checked):not(:indeterminate):not([data-indeterminate='true'])\n ~ {\n @content;\n }\n}\n\n///\n/// Helps select the checkbox background only when its native control is in\n/// marked & enabled state.\n/// @access private\n///\n@mixin if-marked-enabled_ {\n .mdc-checkbox__native-control:enabled:checked,\n .mdc-checkbox__native-control:enabled:indeterminate,\n .mdc-checkbox__native-control[data-indeterminate='true']:enabled {\n ~ {\n @content;\n }\n }\n}\n\n///\n/// Helps select the checkbox background only when its native control is in\n/// marked & disabled state.\n/// @access private\n///\n@mixin if-marked-disabled_ {\n // Note: we must use `[disabled]` instead of `:disabled` below because Edge does not always recalculate the style\n // property when the `:disabled` pseudo-class is followed by a sibling combinator. See:\n // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11295231/\n .mdc-checkbox__native-control[disabled]:checked,\n .mdc-checkbox__native-control[disabled]:indeterminate,\n .mdc-checkbox__native-control[data-indeterminate='true'][disabled] {\n ~ {\n @content;\n }\n }\n}\n\n///\n/// Sets the stroke & fill colors for the checkbox.\n/// This mixin should be wrapped in a mixin that qualifies state such as\n/// `mdc-checkbox-if-unmarked-enabled_`.\n/// @access private\n///\n@mixin container-colors_(\n $stroke-color,\n $fill-color,\n $query: feature-targeting.all()\n) {\n $feat-color: feature-targeting.create-target($query, color);\n\n .mdc-checkbox__background {\n @include feature-targeting.targets($feat-color) {\n @include theme.property(border-color, $stroke-color);\n @include theme.property(background-color, $fill-color);\n }\n }\n}\n\n///\n/// Sets the ink color of the checked and indeterminate icons for a checkbox.\n/// This mixin should be wrapped in a mixin that qualifies state such as\n/// `mdc-checkbox-if-unmarked_`.\n/// @access private\n///\n@mixin ink-color_($color, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n\n .mdc-checkbox__background {\n .mdc-checkbox__checkmark {\n @include feature-targeting.targets($feat-color) {\n @include theme.property(color, $color);\n }\n }\n\n .mdc-checkbox__mixedmark {\n @include feature-targeting.targets($feat-color) {\n @include theme.property(border-color, $color);\n }\n }\n }\n}\n\n@mixin container-keyframes_(\n $from-stroke-color,\n $to-stroke-color,\n $from-fill-color,\n $to-fill-color,\n $uid\n) {\n @keyframes mdc-checkbox-fade-in-background-#{$uid} {\n 0% {\n @include theme.property(border-color, $from-stroke-color);\n @include theme.property(background-color, $from-fill-color);\n }\n\n 50% {\n @include theme.property(border-color, $to-stroke-color);\n @include theme.property(background-color, $to-fill-color);\n }\n }\n\n @keyframes mdc-checkbox-fade-out-background-#{$uid} {\n 0%,\n 80% {\n @include theme.property(border-color, $to-stroke-color);\n @include theme.property(background-color, $to-fill-color);\n }\n\n 100% {\n @include theme.property(border-color, $from-stroke-color);\n @include theme.property(background-color, $from-fill-color);\n }\n }\n}\n","//\n// Copyright 2019 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// Selector '.mdc-*' should only be used in this project.\n// stylelint-disable selector-class-pattern\n\n@use 'sass:math';\n@use '@material/base/mixins' as base-mixins;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/rtl/rtl';\n\n$height: 48px !default;\n$width: $height !default;\n\n/// Styles applied to the component's touch target wrapper element.\n@mixin wrapper($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-touch-target-wrapper {\n @include feature-targeting.targets($feat-structure) {\n // Ensure that styles are only emitted once across all components that\n // have increased touch targets.\n @include base-mixins.emit-once('mdc-touch-target/wrapper') {\n // NOTE: Will change to `inline-block` in the future, but keeping as is\n // temporarily for backwards-compatibility.\n display: inline;\n }\n }\n }\n}\n\n/// Styles applied to the component's inner touch target element.\n/// By default, only sets the inner element height to the minimum touch target\n/// height ($mdc-touch-target-height).\n/// @param {Boolean} $set-width [false] - Sets the inner element width to the\n/// minimum touch target width ($mdc-touch-target-width).\n/// @param $height [$mdc-touch-target-height] - Touch target height.\n/// @param $width [$mdc-touch-target-width] - Touch target width.\n@mixin touch-target(\n $set-width: false,\n $query: feature-targeting.all(),\n $height: $height,\n $width: $width\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n position: absolute;\n top: 50%;\n height: $height;\n }\n\n @if $set-width {\n @include feature-targeting.targets($feat-structure) {\n @include rtl.ignore-next-line();\n left: 50%;\n width: $width;\n transform: translate(-50%, -50%);\n }\n } @else {\n @include feature-targeting.targets($feat-structure) {\n left: 0;\n right: 0;\n transform: translateY(-50%);\n }\n }\n}\n\n/// Applies margin to the component with the increased touch target,\n/// to compensate for the touch target.\n@mixin margin(\n $component-height,\n $component-width: null,\n $touch-target-height: $height,\n $touch-target-width: $width,\n $query: feature-targeting.all()\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n $vertical-margin-value: math.div($touch-target-height - $component-height, 2);\n\n @include feature-targeting.targets($feat-structure) {\n margin-top: $vertical-margin-value;\n margin-bottom: $vertical-margin-value;\n }\n\n @if $component-width {\n $horizontal-margin-value: math.div(\n $touch-target-width - $component-width,\n 2\n );\n\n @include feature-targeting.targets($feat-structure) {\n margin-right: $horizontal-margin-value;\n margin-left: $horizontal-margin-value;\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","// 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\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 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// Selector '.mdc-*' should only be used in this project.\n// stylelint-disable selector-class-pattern\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"],"sourceRoot":""} |