{"version":3,"sources":["webpack:///./packages/mdc-checkbox/mdc-checkbox.scss","webpack:///./packages/mdc-checkbox/_keyframes.scss","webpack:///./packages/mdc-checkbox/_variables.scss","webpack:///./packages/material-components-web/node_modules/@material/animation/_variables.scss","webpack:///./packages/mdc-checkbox/_mixins.scss","webpack:///./packages/material-components-web/node_modules/@material/theme/_mixins.scss","webpack:///./packages/material-components-web/node_modules/@material/ripple/_mixins.scss","webpack:///./packages/material-components-web/node_modules/@material/ripple/_variables.scss","webpack:///./packages/material-components-web/node_modules/@material/touch-target/_variables.scss","webpack:///./packages/material-components-web/node_modules/@material/ripple/_keyframes.scss"],"names":[],"mappings":";;;;;;;AA+BE;EAOM;CApCP;;ACyDC;EACE;IAEE,8BCVc;GF7CjB;EC0DC;IACE,8DE5C+B;YF4C/B,sDE5C+B;GHZlC;EC2DC;IACE;GDzDH;CACF;;AC6CC;EACE;IAEE,8BCVc;GF7CjB;EC0DC;IACE,8DE5C+B;YF4C/B,sDE5C+B;GHZlC;EC2DC;IACE;GDzDH;CACF;AC4DC;EACE;IAEE;YAAA;GD3DH;EC8DC;IACE;YAAA;GD5DH;EC+DC;IACE;YAAA;GD7DH;CACF;ACiDC;EACE;IAEE;YAAA;GD3DH;EC8DC;IACE;YAAA;GD5DH;EC+DC;IACE;YAAA;GD7DH;CACF;ACgEC;EACE;IACE,8DEnE+B;YFmE/B,sDEnE+B;IFoE/B;IACA;GD9DH;ECiEC;IACE;IACA;GD/DH;CACF;ACqDC;EACE;IACE,8DEnE+B;YFmE/B,sDEnE+B;IFoE/B;IACA;GD9DH;ECiEC;IACE;IACA;GD/DH;CACF;ACkEC;EACE;IACE,8DElF+B;YFkF/B,sDElF+B;IFmF/B;YAAA;IACA;GDhEH;ECmEC;IACE;YAAA;IACA;GDjEH;CACF;ACuDC;EACE;IACE,8DElF+B;YFkF/B,sDElF+B;IFmF/B;YAAA;IACA;GDhEH;ECmEC;IACE;YAAA;IACA;GDjEH;CACF;ACoEC;EACE;IACE,+DChEmC;YDgEnC,uDChEmC;IDiEnC;YAAA;IACA;GDlEH;ECqEC;IACE;YAAA;IACA;GDnEH;CACF;ACyDC;EACE;IACE,+DChEmC;YDgEnC,uDChEmC;IDiEnC;YAAA;IACA;GDlEH;ECqEC;IACE;YAAA;IACA;GDnEH;CACF;ACsEC;EACE;IACE;YAAA;IACA;YAAA;IACA;GDpEH;ECuEC;IACE;YAAA;IACA;GDrEH;CACF;AC2DC;EACE;IACE;YAAA;IACA;YAAA;IACA;GDpEH;ECuEC;IACE;YAAA;IACA;GDrEH;CACF;ACwEC;EACE;IACE,+DC1FmC;YD0FnC,uDC1FmC;ID2FnC;YAAA;IACA;GDtEH;ECyEC;IACE;YAAA;IACA;GDvEH;CACF;AC6DC;EACE;IACE,+DC1FmC;YD0FnC,uDC1FmC;ID2FnC;YAAA;IAC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","file":"mdc.checkbox.css","sourcesContent":["//\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@use \"@material/base/mixins\" as base-mixins;\n@use \"@material/feature-targeting/functions\";\n@use \"@material/feature-targeting/mixins\" as feature-targeting-mixins;\n@use \"./variables\";\n\n/// Styles applied to the component's touch target wrapper element.\n@mixin wrapper($query: functions.all()) {\n $feat-structure: functions.create-target($query, structure);\n\n .mdc-touch-target-wrapper {\n @include feature-targeting-mixins.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@mixin touch-target($set-width: false, $query: functions.all()) {\n $feat-structure: functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n position: absolute;\n top: 50%;\n right: 0;\n height: variables.$height;\n }\n\n @if $set-width {\n @include feature-targeting-mixins.targets($feat-structure) {\n /* @noflip */\n left: 50%;\n width: variables.$width;\n transform: translate(-50%, -50%);\n }\n } @else {\n @include feature-targeting-mixins.targets($feat-structure) {\n left: 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($component-height, $component-width: null, $query: functions.all()) {\n $feat-structure: functions.create-target($query, structure);\n\n $vertical-margin-value: (variables.$height - $component-height) / 2;\n\n @include feature-targeting-mixins.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: (variables.$width - $component-width) / 2;\n\n @include feature-targeting-mixins.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@use \"@material/animation/variables\" as animation-variables;\n@use \"@material/theme/mixins\";\n@use \"./variables\";\n\n@mixin container-keyframes_(\n $from-stroke-color,\n $to-stroke-color,\n $from-fill-color,\n $to-fill-color,\n $uid) {\n @keyframes mdc-checkbox-fade-in-background-#{$uid} {\n 0% {\n @include mixins.prop(border-color, $from-stroke-color);\n @include mixins.prop(background-color, $from-fill-color);\n }\n\n 50% {\n @include mixins.prop(border-color, $to-stroke-color);\n @include mixins.prop(background-color, $to-fill-color);\n }\n }\n\n @keyframes mdc-checkbox-fade-out-background-#{$uid} {\n 0%,\n 80% {\n @include mixins.prop(border-color, $to-stroke-color);\n @include mixins.prop(background-color, $to-fill-color);\n }\n\n 100% {\n @include mixins.prop(border-color, $from-stroke-color);\n @include mixins.prop(background-color, $from-fill-color);\n }\n }\n}\n\n@mixin mark-keyframes_ {\n @keyframes mdc-checkbox-unchecked-checked-checkmark-path {\n 0%,\n 50% {\n stroke-dashoffset: variables.$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: variables.$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: variables.$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: variables.$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 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use \"sass:map\";\n@use \"@material/ripple/variables\" as ripple-variables;\n@use \"@material/theme/variables\" as theme-variables;\n@use \"@material/density/variables\" as density-variables;\n\n$mark-color: theme-variables.prop-value(on-primary) !default;\n$border-color: rgba(theme-variables.prop-value(on-surface), .54) !default;\n$disabled-color: rgba(theme-variables.prop-value(on-surface), .38) !default;\n$baseline-theme-color: secondary !default;\n\n$ripple-size: 40px !default;\n$icon-size: 18px !default;\n$mark-stroke-size: 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(ripple-variables.$dark-ink-opacities, focus) !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// Manual calculation done on SVG\n$mark-path-length_: 29.7833385 !default;\n$indeterminate-checked-easing-function_: cubic-bezier(.14, 0, 0, 1) !default;\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, .2, 1) !default;\n$standard-curve-timing-function: cubic-bezier(.4, 0, .2, 1) !default;\n$acceleration-curve-timing-function: cubic-bezier(.4, 0, 1, 1) !default;\n$sharp-curve-timing-function: cubic-bezier(.4, 0, .6, 1) !default;\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@use \"sass:math\";\n@use \"@material/animation/functions\" as functions2;\n@use \"@material/density/functions\" as density-functions;\n@use \"@material/feature-targeting/functions\" as feature-targeting-functions;\n@use \"@material/feature-targeting/mixins\" as feature-targeting-mixins;\n@use \"@material/ripple/mixins\" as ripple-mixins;\n@use \"@material/touch-target/mixins\" as touch-target-mixins;\n@use \"@material/theme/functions\" as theme-functions;\n@use \"./functions\";\n@use \"./keyframes\";\n@use \"./variables\";\n@use \"@material/theme/mixins\" as theme-mixins;\n@use \"@material/touch-target/variables\" as touch-target-variables;\n\n//\n// Public\n//\n\n$ripple-target: \".mdc-checkbox__ripple\";\n\n///\n/// Checkbox core styles.\n///\n@mixin core-styles($query: feature-targeting-functions.all()) {\n @include without-ripple($query);\n @include ripple($query);\n}\n\n// 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 without-ripple($query: feature-targeting-functions.all()) {\n // postcss-bem-linter: define checkbox\n\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n $feat-color: feature-targeting-functions.create-target($query, color);\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include touch-target-mixins.wrapper($query); // COPYBARA_COMMENT_THIS_LINE\n\n @include feature-targeting-mixins.targets($feat-animation) {\n @include keyframes.mark-keyframes_;\n }\n\n .mdc-checkbox {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include base_;\n }\n\n @include focus-indicator-color(variables.$baseline-theme-color, $query: $query);\n @include density(variables.$density-scale, $query: $query);\n }\n\n @include container-colors($query: $query);\n @include disabled-container-colors($query: $query);\n @include ink-color(variables.$mark-color, $query: $query);\n @include disabled-ink-color(variables.$mark-color, $query: $query);\n\n @media screen and (-ms-high-contrast: active) {\n @include 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 disabled-ink-color(GrayText, $query: $query);\n\n .mdc-checkbox__mixedmark {\n @include feature-targeting-mixins.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-mixins.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 // JS checkbox\n .mdc-checkbox--upgraded {\n .mdc-checkbox__background,\n .mdc-checkbox__checkmark,\n .mdc-checkbox__checkmark-path,\n .mdc-checkbox__mixedmark {\n @include feature-targeting-mixins.targets($feat-animation) {\n @include child--upgraded_;\n }\n }\n }\n\n .mdc-checkbox--anim {\n @include feature-targeting-mixins.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 @include feature-targeting-mixins.targets($feat-animation) {\n @include background--marked_;\n }\n\n .mdc-checkbox__checkmark-path {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include checkmark-path--marked_;\n }\n }\n }\n\n // The frame's ::before element is used as a focus indicator for the checkbox\n .mdc-checkbox__background::before {\n @include focus-indicator_($query);\n }\n\n .mdc-checkbox__native-control:focus ~ .mdc-checkbox__background::before {\n @include focus-indicator--focused_($query);\n }\n\n .mdc-checkbox__native-control {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include native-control_;\n }\n\n &:disabled {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include disabled_;\n }\n }\n }\n\n .mdc-checkbox--touch {\n @include touch-target-mixins.margin(\n $component-height: variables.$ripple-size,\n $component-width: variables.$ripple-size,\n $query: $query);\n @include touch-target(touch-target-variables.$height, $query: $query);\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-mixins.targets($feat-structure) {\n @include mixedmark--checked_;\n }\n }\n }\n\n .mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background {\n .mdc-checkbox__checkmark {\n @include checkmark--indeterminate_($query);\n }\n\n .mdc-checkbox__mixedmark {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include mixedmark--indeterminate_;\n }\n }\n }\n\n // postcss-bem-linter: end\n}\n\n// 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($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include ripple-mixins.common($query); // COPYBARA_COMMENT_THIS_LINE\n\n .mdc-checkbox {\n @include ripple-mixins.surface($query: $query, $ripple-target: $ripple-target);\n @include ripple-mixins.states($color: on-surface, $query: $query, $ripple-target: $ripple-target);\n @include ripple-mixins.radius-unbounded($query: $query, $ripple-target: $ripple-target);\n }\n\n #{$ripple-target} {\n @include ripple-mixins.target-common($query: $query);\n }\n\n .mdc-ripple-upgraded--background-focused .mdc-checkbox__background::before {\n @include feature-targeting-mixins.targets($feat-structure) {\n content: none;\n }\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-functions.all()) {\n $size: density-functions.prop-value(\n $density-config: variables.$density-config,\n $density-scale: $density-scale,\n $property-name: size,\n );\n\n @include ripple-size($size, $query: $query);\n\n @if $density-scale != 0 {\n @include touch-target-reset_($query: $query);\n }\n}\n\n@mixin ripple-size($ripple-size, $query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n $checkbox-padding: ($ripple-size - variables.$icon-size) / 2;\n\n @include feature-targeting-mixins.targets($feat-structure) {\n padding: $checkbox-padding;\n }\n\n .mdc-checkbox__background {\n @include feature-targeting-mixins.targets($feat-structure) {\n top: $checkbox-padding;\n left: $checkbox-padding;\n }\n }\n\n .mdc-checkbox__background::before {\n @include feature-targeting-mixins.targets($feat-structure) {\n top: -(variables.$border-width) - $checkbox-padding;\n left: -(variables.$border-width) - $checkbox-padding;\n width: $ripple-size;\n height: $ripple-size;\n }\n }\n\n @include touch-target($ripple-size, $ripple-size: $ripple-size, $query: $query);\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: variables.$border-color,\n $unmarked-fill-color: transparent,\n $marked-stroke-color: variables.$baseline-theme-color,\n $marked-fill-color: variables.$baseline-theme-color,\n $generate-keyframes: true,\n $query: feature-targeting-functions.all()\n) {\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n @include if-unmarked-enabled_ {\n @include container-colors_($unmarked-stroke-color, $unmarked-fill-color, $query: $query);\n }\n\n @include if-marked-enabled_ {\n @include container-colors_($marked-stroke-color, $marked-fill-color, $query: $query);\n }\n\n @if $generate-keyframes {\n $uid: theme-functions.color-hash($unmarked-stroke-color) +\n theme-functions.color-hash($marked-stroke-color) +\n theme-functions.color-hash($unmarked-fill-color) +\n theme-functions.color-hash($marked-fill-color);\n\n $anim-selector: if(&, \"&.mdc-checkbox--anim\", \".mdc-checkbox--anim\");\n\n @include feature-targeting-mixins.targets($feat-animation, $feat-color) {\n @include keyframes.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-mixins.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-mixins.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: variables.$disabled-color,\n $unmarked-fill-color: transparent,\n $marked-stroke-color: transparent,\n $marked-fill-color: variables.$disabled-color,\n $query: feature-targeting-functions.all()\n) {\n @include if-unmarked-disabled_ {\n @include container-colors_($unmarked-stroke-color, $unmarked-fill-color, $query: $query);\n }\n\n @include if-marked-disabled_ {\n @include container-colors_($marked-stroke-color, $marked-fill-color, $query: $query);\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-functions.all()) {\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-functions.all()) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n @include if-disabled_ {\n @include ink-color_($color, $query: $query);\n }\n}\n\n@mixin focus-indicator-color($color, $query: feature-targeting-functions.all()) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n .mdc-checkbox__native-control:checked ~ .mdc-checkbox__background::before,\n .mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background::before {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(background-color, $color);\n }\n }\n\n &.mdc-checkbox--selected {\n @include ripple-mixins.states($color: $color, $query: $query, $ripple-target: $ripple-target);\n }\n\n &.mdc-ripple-upgraded--background-focused.mdc-checkbox--selected {\n @include ripple-mixins.states-base-color($color: $color, $query: $query, $ripple-target: $ripple-target);\n }\n}\n\n///\n/// Sets checkbox touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom\n/// ripple size.\n///\n/// @param {Number} $size Size of touch target (Native input) in `px`.\n/// @param {Number} $ripple-size Size of ripple in `px`. Required only for custom ripple size.\n///\n@mixin touch-target(\n $size: variables.$ripple-size,\n $ripple-size: variables.$ripple-size,\n $query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n $offset: ($ripple-size - $size) / 2;\n\n @include feature-targeting-mixins.targets($feat-structure) {\n .mdc-checkbox__native-control {\n top: $offset;\n right: $offset;\n left: $offset;\n width: $size;\n height: $size;\n }\n }\n}\n\n//\n// Private\n//\n\n@mixin base_ {\n display: inline-block;\n position: relative;\n flex: 0 0 variables.$icon-size;\n box-sizing: content-box;\n width: variables.$icon-size;\n height: variables.$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 // Due to the myriad of selector combos used to properly style a CSS-only checkbox, all of\n // which have varying selector precedence and make use of transitions, it is cleaner and more\n // efficient here to simply use !important, since the mdc-checkbox--anim-* classes will take\n // over from here.\n transition: none !important;\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: variables.$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 variables.$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 variables.$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 variables.$transition-duration linear 0s;\n transition: none;\n }\n }\n\n &-checked-indeterminate {\n .mdc-checkbox__checkmark {\n animation: mdc-checkbox-checked-indeterminate-checkmark variables.$transition-duration linear 0s;\n transition: none;\n }\n\n .mdc-checkbox__mixedmark {\n animation: mdc-checkbox-checked-indeterminate-mixedmark variables.$transition-duration linear 0s;\n transition: none;\n }\n }\n\n &-indeterminate-checked {\n .mdc-checkbox__checkmark {\n animation: mdc-checkbox-indeterminate-checked-checkmark $mdc-checkbox-indeterminate-change-duration_ linear 0s;\n transition: none;\n }\n\n .mdc-checkbox__mixedmark {\n animation: mdc-checkbox-indeterminate-checked-mixedmark $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:\n mdc-checkbox-indeterminate-unchecked-mixedmark $mdc-checkbox-indeterminate-change-duration_ * .6 linear 0s;\n transition: none;\n }\n }\n\n // stylelint-enable selector-max-type\n}\n\n// Background\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) ~ {\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) ~ {\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 ~ {\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 ~ {\n @content;\n }\n }\n}\n\n@mixin background_($query: feature-targeting-functions.all()) {\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n @include feature-targeting-mixins.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: variables.$icon-size;\n height: variables.$icon-size;\n // border-color is overridden by the mdc-checkbox-unmarked-stroke-color() mixin\n border: variables.$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 .mdc-checkbox__background::before {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(background-color, on-surface);\n }\n }\n\n @include feature-targeting-mixins.targets($feat-animation) {\n transition:\n functions.transition-exit(background-color),\n functions.transition-exit(border-color);\n }\n}\n\n@mixin background--marked_ {\n transition:\n functions.transition-enter(border-color),\n functions.transition-enter(background-color);\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_($stroke-color, $fill-color, $query: feature-targeting-functions.all()) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n .mdc-checkbox__background {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(border-color, $stroke-color);\n @include theme-mixins.prop(background-color, $fill-color);\n }\n }\n}\n\n// Focus indicator\n\n@mixin focus-indicator_($query: feature-targeting-functions.all()) {\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n position: absolute;\n transform: scale(0, 0);\n border-radius: 50%;\n opacity: 0;\n pointer-events: none;\n content: \"\";\n will-change: opacity, transform;\n }\n\n @include feature-targeting-mixins.targets($feat-animation) {\n transition:\n functions.transition-exit(opacity),\n functions.transition-exit(transform);\n }\n}\n\n@mixin focus-indicator--focused_($query: feature-targeting-functions.all()) {\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n transform: scale(1);\n opacity: variables.$focus-indicator-opacity;\n }\n\n @include feature-targeting-mixins.targets($feat-animation) {\n transition:\n functions.transition-enter(opacity, 0ms, 80ms),\n functions.transition-enter(transform, 0ms, 80ms);\n }\n}\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-functions.all()) {\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.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-mixins.targets($feat-animation) {\n transition: functions.transition-exit(opacity, 0ms, variables.$transition-duration * 2);\n }\n\n .mdc-checkbox--upgraded & {\n @include feature-targeting-mixins.targets($feat-structure) {\n opacity: 1;\n }\n }\n}\n\n@mixin checkmark--checked_($query: feature-targeting-functions.all()) {\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-animation) {\n transition:\n functions.transition-enter(opacity, 0ms, variables.$transition-duration * 2),\n functions.transition-enter(transform, 0ms, variables.$transition-duration * 2);\n }\n\n @include feature-targeting-mixins.targets($feat-structure) {\n opacity: 1;\n }\n}\n\n@mixin checkmark--indeterminate_($query: feature-targeting-functions.all()) {\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n transform: rotate(45deg);\n opacity: 0;\n }\n\n @include feature-targeting-mixins.targets($feat-animation) {\n transition:\n functions.transition-exit(opacity, 0ms, variables.$transition-duration),\n functions.transition-exit(transform, 0ms, variables.$transition-duration);\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-functions.all()) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n .mdc-checkbox__background {\n .mdc-checkbox__checkmark {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(color, $color);\n }\n }\n\n .mdc-checkbox__mixedmark {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(border-color, $color);\n }\n }\n }\n}\n\n// Check mark path\n\n@mixin checkmark-path_($query: feature-targeting-functions.all()) {\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: functions.transition-exit(stroke-dashoffset, 0ms, variables.$transition-duration * 2);\n }\n\n @include feature-targeting-mixins.targets($feat-structure) {\n stroke: currentColor;\n stroke-width: variables.$mark-stroke-size * 1.3;\n stroke-dashoffset: variables.$mark-path-length_;\n stroke-dasharray: variables.$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-functions.all()) {\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n width: 100%;\n height: 0;\n transform: scaleX(0) rotate(0deg);\n border-width: math.floor(variables.$mark-stroke-size) / 2;\n border-style: solid;\n opacity: 0;\n }\n\n @include feature-targeting-mixins.targets($feat-animation) {\n transition:\n functions.transition-exit(opacity),\n functions.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///\n/// Resets touch target-related styles. This is called from the density mixin to\n/// automatically remove the increased touch target, since dense components\n/// don't have the same default a11y requirements.\n/// @access private\n///\n@mixin touch-target-reset_($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n margin: 0;\n }\n}\n","//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use \"sass:map\";\n@use \"@material/feature-targeting/functions\" as feature-targeting-functions;\n@use \"@material/feature-targeting/mixins\";\n@use \"./variables\";\n@use \"./functions\";\n\n@mixin core-styles($query: feature-targeting-functions.all()) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n :root {\n @include mixins.targets($feat-color) {\n @each $style in map.keys(variables.$property-values) {\n --mdc-theme-#{$style}: #{map.get(variables.$property-values, $style)};\n }\n }\n }\n\n @each $style in map.keys(variables.$property-values) {\n @if $style != \"background\" and $style != \"surface\" {\n .mdc-theme--#{$style} {\n @include mixins.targets($feat-color) {\n @include prop(color, $style, true);\n }\n }\n } @else {\n .mdc-theme--#{$style} {\n @include mixins.targets($feat-color) {\n @include prop(background-color, $style);\n }\n }\n }\n }\n\n // CSS rules for using primary and secondary (plus light/dark variants) as background colors.\n @each $style in (\"primary\", \"secondary\") {\n .mdc-theme--#{$style}-bg {\n @include mixins.targets($feat-color) {\n @include prop(background-color, $style, true);\n }\n }\n }\n}\n\n// Applies the correct theme color style to the specified property.\n// $property is typically color or background-color, but can be any CSS property that accepts color values.\n// $style should be one of the map keys in $mdc-theme-property-values (_variables.scss), or a color value.\n@mixin prop($property, $style, $important: false) {\n $important-rule: if($important, \"!important\", \"\");\n\n @if functions.is-var-with-fallback_($style) {\n #{$property}: functions.get-var-fallback_($style) #{$important-rule};\n /* @alternate */\n #{$property}: functions.var_($style) #{$important-rule};\n } @else if variables.is-valid-theme-prop-value_($style) {\n #{$property}: $style #{$important-rule};\n } @else {\n @if not map.has-key(variables.$property-values, $style) {\n @error \"Invalid style: '#{$style}'. Choose one of: #{map.keys(variables.$property-values)}\";\n }\n $value: map.get(variables.$property-values, $style);\n\n #{$property}: $value #{$important-rule};\n /* @alternate */\n #{$property}: var(--mdc-theme-#{$style}, $value) #{$important-rule};\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@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/functions\" as feature-targeting-functions;\n@use \"@material/feature-targeting/mixins\" as feature-targeting-mixins;\n@use \"@material/theme/mixins\" as theme-mixins;\n@use \"./functions\";\n@use \"./keyframes\";\n@use \"./variables\";\n@use \"@material/theme/variables\" as theme-variables;\n\n@mixin core-styles($query: feature-targeting-functions.all()) {\n // postcss-bem-linter: define ripple-surface\n\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n .mdc-ripple-surface {\n @include surface($query: $query);\n @include states($query: $query);\n @include radius-bounded($query: $query);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n position: relative;\n outline: none;\n overflow: hidden;\n }\n\n &[data-mdc-ripple-is-unbounded] {\n @include radius-unbounded($query: $query);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n overflow: visible;\n }\n }\n\n &--primary {\n @include states(primary, $query: $query);\n }\n\n &--accent {\n @include states(secondary, $query: $query);\n }\n }\n\n // postcss-bem-linter: end\n}\n\n@mixin common($query: feature-targeting-functions.all()) {\n $feat-animation: feature-targeting-functions.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-mixins.targets($feat-animation) {\n @include base-mixins.emit-once(\"mdc-ripple/common/animation\") {\n @include keyframes.keyframes_;\n }\n }\n}\n\n@mixin surface($query: feature-targeting-functions.all(), $ripple-target: \"&\") {\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.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 // !!DO NOT REMOVE!! mdc-ripple-will-change-replacer\n }\n\n #{$ripple-target}::before,\n #{$ripple-target}::after {\n @include feature-targeting-mixins.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-mixins.targets($feat-animation) {\n // Also transition background-color to avoid unnatural color flashes when toggling activated/selected state\n transition:\n opacity variables.$states-wash-duration linear,\n background-color variables.$states-wash-duration linear;\n }\n\n @include feature-targeting-mixins.targets($feat-structure) {\n z-index: 1; // Ensure that the ripple wash for hover/focus states is displayed on top of positioned child elements\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-mixins.targets($feat-structure) {\n transform: scale(var(--mdc-ripple-fg-scale, 1));\n }\n }\n\n #{$ripple-target}::after {\n @include feature-targeting-mixins.targets($feat-structure) {\n top: 0;\n /* @noflip */\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-mixins.targets($feat-structure) {\n top: var(--mdc-ripple-top, 0);\n /* @noflip */\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-mixins.targets($feat-animation) {\n animation:\n mdc-ripple-fg-radius-in variables.$translate-duration forwards,\n mdc-ripple-fg-opacity-in variables.$fade-in-duration forwards;\n }\n }\n }\n\n &.mdc-ripple-upgraded--foreground-deactivation {\n #{$ripple-target}::after {\n @include feature-targeting-mixins.targets($feat-animation) {\n animation: mdc-ripple-fg-opacity-out variables.$fade-out-duration;\n }\n\n @include feature-targeting-mixins.targets($feat-structure) {\n // Retain transform from mdc-ripple-fg-radius-in activation\n transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));\n }\n }\n }\n}\n\n@mixin states-base-color(\n $color, $query: feature-targeting-functions.all(), $ripple-target: \"&\") {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n #{$ripple-target}::before,\n #{$ripple-target}::after {\n @include feature-targeting-mixins.targets($feat-color) {\n @if color.alpha(theme-variables.prop-value($color)) > 0 {\n @include theme-mixins.prop(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/// 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///\n@mixin states-opacities($opacity-map: (), $has-nested-focusable-element: false, $query: feature-targeting-functions.all()) {\n // Ensure sufficient specificity to override base state opacities\n @if map.has-key($opacity-map, hover) {\n @include states-hover-opacity(map.get($opacity-map, hover), $query: $query);\n }\n\n @if map.has-key($opacity-map, focus) {\n @include states-focus-opacity(map.get($opacity-map, focus), $has-nested-focusable-element, $query: $query);\n }\n\n @if map.has-key($opacity-map, press) {\n @include states-press-opacity(map.get($opacity-map, press), $query: $query);\n }\n}\n\n@mixin states-hover-opacity(\n $opacity, $query: feature-targeting-functions.all(), $ripple-target: \"&\") {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n // Background wash styles, for both CSS-only and upgraded stateful surfaces\n &:hover {\n #{$ripple-target}::before {\n // Opacity falls under color because the chosen opacity is color-dependent in typical usage\n @include feature-targeting-mixins.targets($feat-color) {\n opacity: $opacity;\n }\n }\n }\n}\n\n@mixin states-focus-opacity(\n $opacity,\n $has-nested-focusable-element: false,\n $query: feature-targeting-functions.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, $query: $query);\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, $query: $query);\n }\n }\n }\n}\n\n@mixin states-focus-opacity-properties_($opacity, $query) {\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n // Opacity falls under color because the chosen opacity is color-dependent in typical usage\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n // Note that this duration is only effective on focus, not blur\n @include feature-targeting-mixins.targets($feat-animation) {\n transition-duration: 75ms;\n }\n\n @include feature-targeting-mixins.targets($feat-color) {\n opacity: $opacity;\n }\n}\n\n@mixin states-press-opacity($opacity, $query: feature-targeting-functions.all(), $ripple-target: \"&\") {\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n // Styles for non-upgraded (CSS-only) stateful surfaces\n\n &:not(.mdc-ripple-upgraded) {\n // Apply press additively by using the ::after pseudo-element\n #{$ripple-target}::after {\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: opacity variables.$fade-out-duration linear;\n }\n }\n\n &:active {\n #{$ripple-target}::after {\n @include feature-targeting-mixins.targets($feat-animation) {\n transition-duration: variables.$fade-in-duration;\n }\n\n // Opacity falls under color because the chosen opacity is color-dependent in typical usage\n @include feature-targeting-mixins.targets($feat-color) {\n opacity: $opacity;\n }\n }\n }\n }\n\n &.mdc-ripple-upgraded {\n @include feature-targeting-mixins.targets($feat-color) {\n --mdc-ripple-fg-opacity: #{$opacity};\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-variables.prop-value(on-surface),\n $has-nested-focusable-element: false,\n $query: feature-targeting-functions.all(),\n $ripple-target: \"&\",\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}\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, $has-nested-focusable-element: false, $query: feature-targeting-functions.all(), $ripple-target: \"&\") {\n $feat-color: feature-targeting-functions.create-target($query, color);\n $activated-opacity: functions.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-mixins.targets($feat-color) {\n opacity: $activated-opacity;\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// 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-functions.all(),\n $ripple-target: \"&\") {\n $feat-color: feature-targeting-functions.create-target($query, color);\n $selected-opacity: functions.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-mixins.targets($feat-color) {\n opacity: $selected-opacity;\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@mixin radius-bounded(\n $radius: 100%, $query: feature-targeting-functions.all(), $ripple-target: \"&\") {\n $feat-struture: feature-targeting-functions.create-target($query, structure);\n\n #{$ripple-target}::before,\n #{$ripple-target}::after {\n @include feature-targeting-mixins.targets($feat-struture) {\n top: calc(50% - #{$radius});\n /* @noflip */\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-mixins.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%, $query: feature-targeting-functions.all(), $ripple-target: \"&\") {\n $feat-struture: feature-targeting-functions.create-target($query, structure);\n\n #{$ripple-target}::before,\n #{$ripple-target}::after {\n @include feature-targeting-mixins.targets($feat-struture) {\n top: calc(50% - #{$radius / 2});\n /* @noflip */\n left: calc(50% - #{$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-mixins.targets($feat-struture) {\n top: var(--mdc-ripple-top, calc(50% - #{$radius / 2}));\n /* @noflip */\n left: var(--mdc-ripple-left, calc(50% - #{$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-mixins.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 states-interactions_(\n $color,\n $has-nested-focusable-element,\n $opacity-modifier: 0,\n $query: feature-targeting-functions.all(),\n $ripple-target: \"&\",\n) {\n @include target-selector($ripple-target) {\n @include states-base-color($color, $query);\n }\n\n @include states-hover-opacity(\n $opacity: functions.states-opacity($color, hover) + $opacity-modifier,\n $query: $query,\n $ripple-target: $ripple-target);\n @include states-focus-opacity(\n $opacity: functions.states-opacity($color, focus) + $opacity-modifier,\n $has-nested-focusable-element: $has-nested-focusable-element,\n $query: $query,\n $ripple-target: $ripple-target,\n );\n @include states-press-opacity(\n $opacity: functions.states-opacity($color, press) + $opacity-modifier,\n $query: $query,\n $ripple-target: $ripple-target);\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// 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-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.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// 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$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: .04,\n focus: .12,\n press: .12,\n selected: .08,\n activated: .12\n) !default;\n\n$light-ink-opacities: (\n hover: .08,\n focus: .24,\n press: .24,\n selected: .16,\n activated: .24\n) !default;\n\n// Legacy\n\n$pressed-dark-ink-opacity: .16 !default;\n$pressed-light-ink-opacity: .32 !default;\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$height: 48px !default;\n$width: $height !default;\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// MDC Ripple keyframes are split into their own file so that _mixins.scss can rely on them.\n\n@use \"@material/animation/variables\";\n@use \"./variables\" as variables2;\n\n@mixin keyframes_ {\n @keyframes mdc-ripple-fg-radius-in {\n from {\n animation-timing-function: variables.$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)) 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":""}