{"version":3,"sources":["webpack:///./packages/mdc-checkbox/mdc-checkbox.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/_keyframes.scss","webpack:///./packages/material-components-web/node_modules/@material/rtl/_mixins.scss"],"names":[],"mappings":"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","file":"mdc.checkbox.min.css","sourcesContent":["//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@import \"@material/animation/variables\";\n@import \"@material/theme/mixins\";\n@import \"./variables\";\n\n@mixin mdc-checkbox-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 mdc-theme-prop(border-color, $from-stroke-color);\n      @include mdc-theme-prop(background-color, $from-fill-color);\n    }\n\n    50% {\n      @include mdc-theme-prop(border-color, $to-stroke-color);\n      @include mdc-theme-prop(background-color, $to-fill-color);\n    }\n  }\n\n  @keyframes mdc-checkbox-fade-out-background-#{$uid} {\n    0%,\n    80% {\n      @include mdc-theme-prop(border-color, $to-stroke-color);\n      @include mdc-theme-prop(background-color, $to-fill-color);\n    }\n\n    100% {\n      @include mdc-theme-prop(border-color, $from-stroke-color);\n      @include mdc-theme-prop(background-color, $from-fill-color);\n    }\n  }\n}\n\n@mixin mdc-checkbox-mark-keyframes_ {\n  @keyframes mdc-checkbox-unchecked-checked-checkmark-path {\n    0%,\n    50% {\n      stroke-dashoffset: $mdc-checkbox-mark-path-length_;\n    }\n\n    50% {\n      animation-timing-function: $mdc-animation-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: $mdc-animation-acceleration-curve-timing-function;\n      opacity: 1;\n      stroke-dashoffset: 0;\n    }\n\n    to {\n      opacity: 0;\n      stroke-dashoffset: $mdc-checkbox-mark-path-length_ * -1;\n    }\n  }\n\n  @keyframes mdc-checkbox-checked-indeterminate-checkmark {\n    from {\n      animation-timing-function: $mdc-animation-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: $mdc-checkbox-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: $mdc-checkbox-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@import \"@material/ripple/variables\";\n@import \"@material/theme/variables\";\n\n$mdc-checkbox-mark-color: mdc-theme-prop-value(on-primary) !default;\n$mdc-checkbox-border-color: rgba(mdc-theme-prop-value(on-surface), .54) !default;\n$mdc-checkbox-disabled-color: rgba(mdc-theme-prop-value(on-surface), .26) !default;\n$mdc-checkbox-baseline-theme-color: secondary !default;\n\n$mdc-checkbox-touch-area: 40px !default;\n$mdc-checkbox-size: 18px !default;\n$mdc-checkbox-mark-stroke-size: 2/15 * $mdc-checkbox-size !default;\n$mdc-checkbox-border-width: 2px !default;\n$mdc-checkbox-transition-duration: 90ms !default;\n$mdc-checkbox-item-spacing: 4px !default;\n$mdc-checkbox-focus-indicator-opacity: map-get($mdc-ripple-dark-ink-opacities, focus) !default;\n\n// Manual calculation done on SVG\n$mdc-checkbox-mark-path-length_: 29.7833385 !default;\n$mdc-checkbox-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$mdc-animation-deceleration-curve-timing-function: cubic-bezier(0, 0, .2, 1) !default;\n$mdc-animation-standard-curve-timing-function: cubic-bezier(.4, 0, .2, 1) !default;\n$mdc-animation-acceleration-curve-timing-function: cubic-bezier(.4, 0, 1, 1) !default;\n$mdc-animation-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@import \"@material/animation/functions\";\n@import \"@material/feature-targeting/functions\";\n@import \"@material/feature-targeting/mixins\";\n@import \"@material/ripple/mixins\";\n@import \"@material/rtl/mixins\";\n@import \"./functions\";\n@import \"./keyframes\";\n@import \"./variables\";\n\n//\n// Public\n//\n\n@mixin mdc-checkbox-core-styles($query: mdc-feature-all()) {\n  @include mdc-checkbox-without-ripple($query);\n  @include mdc-checkbox-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 mdc-checkbox-without-ripple($query: mdc-feature-all()) {\n  // postcss-bem-linter: define checkbox\n\n  $feat-animation: mdc-feature-create-target($query, animation);\n  $feat-color: mdc-feature-create-target($query, color);\n  $feat-structure: mdc-feature-create-target($query, structure);\n\n  @include mdc-feature-targets($feat-animation) {\n    @include mdc-checkbox-mark-keyframes_;\n  }\n\n  .mdc-checkbox {\n    @include mdc-feature-targets($feat-structure) {\n      @include mdc-checkbox-base_;\n    }\n\n    @include mdc-checkbox-focus-indicator-color($mdc-checkbox-baseline-theme-color, $query: $query);\n  }\n\n  @include mdc-checkbox-container-colors($query: $query);\n  @include mdc-checkbox-ink-color($mdc-checkbox-mark-color, $query);\n\n  @include mdc-feature-targets($feat-color) {\n    @include mdc-checkbox-disabled-container-color_;\n  }\n\n  @media screen and (-ms-high-contrast: active) {\n    .mdc-checkbox__mixedmark {\n      @include mdc-feature-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 mdc-feature-targets($feat-structure) {\n      @include mdc-checkbox--disabled_;\n    }\n  }\n\n  .mdc-checkbox__background {\n    @include mdc-checkbox__background_($query);\n  }\n\n  .mdc-checkbox__checkmark {\n    @include mdc-checkbox__checkmark_($query);\n  }\n\n  .mdc-checkbox__checkmark-path {\n    @include mdc-checkbox__checkmark-path_($query);\n  }\n\n  .mdc-checkbox__mixedmark {\n    @include mdc-checkbox__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 mdc-feature-targets($feat-animation) {\n        @include mdc-checkbox__child--upgraded_;\n      }\n    }\n  }\n\n  .mdc-checkbox--anim {\n    @include mdc-feature-targets($feat-animation) {\n      @include mdc-checkbox--anim_;\n    }\n  }\n\n  .mdc-checkbox__native-control:checked ~ .mdc-checkbox__background,\n  .mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background {\n    @include mdc-feature-targets($feat-animation) {\n      @include mdc-checkbox__background--marked_;\n    }\n\n    .mdc-checkbox__checkmark-path {\n      @include mdc-feature-targets($feat-structure) {\n        @include mdc-checkbox__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 mdc-checkbox__focus-indicator_($query);\n  }\n\n  .mdc-checkbox__native-control:focus ~ .mdc-checkbox__background::before {\n    @include mdc-checkbox__focus-indicator--focused_($query);\n  }\n\n  .mdc-checkbox__native-control {\n    @include mdc-feature-targets($feat-structure) {\n      @include mdc-checkbox__native-control_;\n    }\n\n    &:disabled {\n      @include mdc-feature-targets($feat-structure) {\n        @include mdc-checkbox--disabled_;\n      }\n    }\n  }\n\n  .mdc-checkbox__native-control:checked ~ .mdc-checkbox__background {\n    .mdc-checkbox__checkmark {\n      @include mdc-checkbox__checkmark--checked_($query);\n    }\n\n    .mdc-checkbox__mixedmark {\n      @include mdc-feature-targets($feat-structure) {\n        @include mdc-checkbox__mixedmark--checked_;\n      }\n    }\n  }\n\n  .mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background {\n    .mdc-checkbox__checkmark {\n      @include mdc-checkbox__checkmark--indeterminate_($query);\n    }\n\n    .mdc-checkbox__mixedmark {\n      @include mdc-feature-targets($feat-structure) {\n        @include mdc-checkbox__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 mdc-checkbox-ripple($query: mdc-feature-all()) {\n  $feat-structure: mdc-feature-create-target($query, structure);\n\n  @include mdc-ripple-common($query);\n\n  .mdc-checkbox {\n    @include mdc-ripple-surface($query);\n    @include mdc-states(on-surface, $query: $query);\n    @include mdc-ripple-radius-unbounded($query: $query);\n    @include mdc-checkbox-touch-dimension($mdc-checkbox-touch-area, $query: $query);\n  }\n\n  .mdc-ripple-upgraded--background-focused .mdc-checkbox__background::before {\n    @include mdc-feature-targets($feat-structure) {\n      content: none;\n    }\n  }\n}\n\n@mixin mdc-checkbox-touch-dimension($touch-dimension, $query: mdc-feature-all()) {\n  $feat-structure: mdc-feature-create-target($query, structure);\n  $checkbox-padding: ($touch-dimension - $mdc-checkbox-size) / 2;\n\n  @include mdc-feature-targets($feat-structure) {\n    padding: $checkbox-padding;\n  }\n\n  .mdc-checkbox__background {\n    @include mdc-feature-targets($feat-structure) {\n      @include mdc-rtl-reflexive-position(left, $checkbox-padding, \".mdc-checkbox\");\n\n      top: $checkbox-padding;\n    }\n  }\n\n  .mdc-checkbox__background::before {\n    @include mdc-feature-targets($feat-structure) {\n      top: -$mdc-checkbox-border-width - $checkbox-padding;\n      left: -$mdc-checkbox-border-width - $checkbox-padding;\n      width: $touch-dimension;\n      height: $touch-dimension;\n    }\n  }\n}\n\n@mixin mdc-checkbox-container-colors(\n  $unmarked-stroke-color: $mdc-checkbox-border-color,\n  $unmarked-fill-color: transparent,\n  $marked-stroke-color: $mdc-checkbox-baseline-theme-color,\n  $marked-fill-color: $mdc-checkbox-baseline-theme-color,\n  $generate-keyframes: true,\n  $query: mdc-feature-all()\n) {\n  $feat-animation: mdc-feature-create-target($query, animation);\n  $feat-color: mdc-feature-create-target($query, color);\n\n  @include mdc-checkbox-unmarked-background-selector-enabled_ {\n    @include mdc-feature-targets($feat-color) {\n      @include mdc-theme-prop(border-color, $unmarked-stroke-color);\n      @include mdc-theme-prop(background-color, $unmarked-fill-color);\n    }\n  }\n\n  @include mdc-checkbox-marked-background-selector-enabled_ {\n    @include mdc-feature-targets($feat-color) {\n      @include mdc-theme-prop(border-color, $marked-stroke-color);\n      @include mdc-theme-prop(background-color, $marked-fill-color);\n    }\n  }\n\n  @if $generate-keyframes {\n    $uid: unique-id();\n    $anim-selector: if(&, \"&.mdc-checkbox--anim\", \".mdc-checkbox--anim\");\n\n    @include mdc-feature-targets($feat-animation, $feat-color) {\n      @include mdc-checkbox-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 mdc-feature-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 mdc-feature-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@mixin mdc-checkbox-ink-color($color, $query: mdc-feature-all()) {\n  $feat-color: mdc-feature-create-target($query, color);\n\n  .mdc-checkbox__checkmark {\n    @include mdc-feature-targets($feat-color) {\n      @include mdc-theme-prop(color, $color);\n    }\n  }\n\n  .mdc-checkbox__mixedmark {\n    @include mdc-feature-targets($feat-color) {\n      @include mdc-theme-prop(border-color, $color);\n    }\n  }\n}\n\n@mixin mdc-checkbox-focus-indicator-color($color, $query: mdc-feature-all()) {\n  $feat-color: mdc-feature-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 mdc-feature-targets($feat-color) {\n      @include mdc-theme-prop(background-color, $color, $edgeOptOut: true);\n    }\n  }\n\n  &.mdc-checkbox--selected {\n    @include mdc-states($color, $query: $query);\n  }\n\n  &.mdc-ripple-upgraded--background-focused.mdc-checkbox--selected {\n    @include mdc-states-base-color($color, $query: $query);\n  }\n}\n\n//\n// Private\n//\n\n@mixin mdc-checkbox-base_ {\n  display: inline-block;\n  position: relative;\n  flex: 0 0 $mdc-checkbox-size;\n  box-sizing: content-box;\n  width: $mdc-checkbox-size;\n  height: $mdc-checkbox-size;\n  line-height: 0;\n  white-space: nowrap;\n  cursor: pointer;\n  vertical-align: bottom;\n}\n\n@mixin mdc-checkbox-disabled-container-color_ {\n  @include mdc-checkbox-unmarked-background-selector-disabled_ {\n    @include mdc-theme-prop(border-color, $mdc-checkbox-disabled-color);\n  }\n\n  @include mdc-checkbox-marked-background-selector-disabled_ {\n    @include mdc-theme-prop(border-color, transparent);\n    @include mdc-theme-prop(background-color, $mdc-checkbox-disabled-color);\n  }\n}\n\n@mixin mdc-checkbox--disabled_ {\n  cursor: default;\n  pointer-events: none;\n}\n\n@mixin mdc-checkbox__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 mdc-checkbox--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: $mdc-checkbox-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 $mdc-checkbox-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 $mdc-checkbox-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 $mdc-checkbox-transition-duration linear 0s;\n      transition: none;\n    }\n  }\n\n  &-checked-indeterminate {\n    .mdc-checkbox__checkmark {\n      animation: mdc-checkbox-checked-indeterminate-checkmark $mdc-checkbox-transition-duration linear 0s;\n      transition: none;\n    }\n\n    .mdc-checkbox__mixedmark {\n      animation: mdc-checkbox-checked-indeterminate-mixedmark $mdc-checkbox-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@mixin mdc-checkbox-unmarked-background-selector-enabled_ {\n  // stylelint-disable-next-line selector-max-specificity\n  .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background {\n    @content;\n  }\n}\n\n@mixin mdc-checkbox-unmarked-background-selector-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  // stylelint-disable-next-line selector-max-specificity\n  .mdc-checkbox__native-control[disabled]:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background {\n    @content;\n  }\n}\n\n@mixin mdc-checkbox-marked-background-selector-enabled_ {\n  .mdc-checkbox__native-control:enabled:checked ~ .mdc-checkbox__background,\n  .mdc-checkbox__native-control:enabled:indeterminate ~ .mdc-checkbox__background {\n    @content;\n  }\n}\n\n@mixin mdc-checkbox-marked-background-selector-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 ~ .mdc-checkbox__background,\n  .mdc-checkbox__native-control[disabled]:indeterminate ~ .mdc-checkbox__background {\n    @content;\n  }\n}\n\n@mixin mdc-checkbox__background_($query: mdc-feature-all()) {\n  $feat-animation: mdc-feature-create-target($query, animation);\n  $feat-structure: mdc-feature-create-target($query, structure);\n  $feat-color: mdc-feature-create-target($query, color);\n\n  @include mdc-feature-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: $mdc-checkbox-size;\n    height: $mdc-checkbox-size;\n    // border-color is overridden by the mdc-checkbox-unmarked-stroke-color() mixin\n    border: $mdc-checkbox-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 mdc-feature-targets($feat-color) {\n      @include mdc-theme-prop(background-color, on-surface, $edgeOptOut: true);\n    }\n  }\n\n  @include mdc-feature-targets($feat-animation) {\n    transition:\n      mdc-checkbox-transition-exit(background-color),\n      mdc-checkbox-transition-exit(border-color);\n  }\n}\n\n@mixin mdc-checkbox__background--marked_ {\n  transition:\n    mdc-checkbox-transition-enter(border-color),\n    mdc-checkbox-transition-enter(background-color);\n}\n\n// Focus indicator\n\n@mixin mdc-checkbox__focus-indicator_($query: mdc-feature-all()) {\n  $feat-animation: mdc-feature-create-target($query, animation);\n  $feat-structure: mdc-feature-create-target($query, structure);\n\n  @include mdc-feature-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 mdc-feature-targets($feat-animation) {\n    transition:\n      mdc-checkbox-transition-exit(opacity),\n      mdc-checkbox-transition-exit(transform);\n  }\n}\n\n@mixin mdc-checkbox__focus-indicator--focused_($query: mdc-feature-all()) {\n  $feat-animation: mdc-feature-create-target($query, animation);\n  $feat-structure: mdc-feature-create-target($query, structure);\n\n  @include mdc-feature-targets($feat-structure) {\n    transform: scale(1);\n    opacity: $mdc-checkbox-focus-indicator-opacity;\n  }\n\n  @include mdc-feature-targets($feat-animation) {\n    transition:\n      mdc-checkbox-transition-enter(opacity, 0ms, 80ms),\n      mdc-checkbox-transition-enter(transform, 0ms, 80ms);\n  }\n}\n\n// Native input\n\n@mixin mdc-checkbox__native-control_ {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  opacity: 0;\n  cursor: inherit;\n}\n\n// Check mark\n\n@mixin mdc-checkbox__checkmark_($query: mdc-feature-all()) {\n  $feat-animation: mdc-feature-create-target($query, animation);\n  $feat-structure: mdc-feature-create-target($query, structure);\n\n  @include mdc-feature-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 mdc-feature-targets($feat-animation) {\n    transition: mdc-checkbox-transition-exit(opacity, 0ms, $mdc-checkbox-transition-duration * 2);\n  }\n\n  .mdc-checkbox--upgraded & {\n    @include mdc-feature-targets($feat-structure) {\n      opacity: 1;\n    }\n  }\n}\n\n@mixin mdc-checkbox__checkmark--checked_($query: mdc-feature-all()) {\n  $feat-animation: mdc-feature-create-target($query, animation);\n  $feat-structure: mdc-feature-create-target($query, structure);\n\n  @include mdc-feature-targets($feat-animation) {\n    transition:\n      mdc-checkbox-transition-enter(opacity, 0ms, $mdc-checkbox-transition-duration * 2),\n      mdc-checkbox-transition-enter(transform, 0ms, $mdc-checkbox-transition-duration * 2);\n  }\n\n  @include mdc-feature-targets($feat-structure) {\n    opacity: 1;\n  }\n}\n\n@mixin mdc-checkbox__checkmark--indeterminate_($query: mdc-feature-all()) {\n  $feat-animation: mdc-feature-create-target($query, animation);\n  $feat-structure: mdc-feature-create-target($query, structure);\n\n  @include mdc-feature-targets($feat-structure) {\n    transform: rotate(45deg);\n    opacity: 0;\n  }\n\n  @include mdc-feature-targets($feat-animation) {\n    transition:\n      mdc-checkbox-transition-exit(opacity, 0ms, $mdc-checkbox-transition-duration),\n      mdc-checkbox-transition-exit(transform, 0ms, $mdc-checkbox-transition-duration);\n  }\n}\n\n// Check mark path\n\n@mixin mdc-checkbox__checkmark-path_($query: mdc-feature-all()) {\n  $feat-animation: mdc-feature-create-target($query, animation);\n  $feat-structure: mdc-feature-create-target($query, structure);\n\n  @include mdc-feature-targets($feat-animation) {\n    transition: mdc-checkbox-transition-exit(stroke-dashoffset, 0ms, $mdc-checkbox-transition-duration * 2);\n  }\n\n  @include mdc-feature-targets($feat-structure) {\n    stroke: currentColor;\n    stroke-width: $mdc-checkbox-mark-stroke-size * 1.3;\n    stroke-dashoffset: $mdc-checkbox-mark-path-length_;\n    stroke-dasharray: $mdc-checkbox-mark-path-length_;\n  }\n}\n\n@mixin mdc-checkbox__checkmark-path--marked_ {\n  stroke-dashoffset: 0;\n}\n\n// Mixed mark\n\n@mixin mdc-checkbox__mixedmark_($query: mdc-feature-all()) {\n  $feat-animation: mdc-feature-create-target($query, animation);\n  $feat-structure: mdc-feature-create-target($query, structure);\n\n  @include mdc-feature-targets($feat-structure) {\n    width: 100%;\n    height: 0;\n    transform: scaleX(0) rotate(0deg);\n    border-width: floor($mdc-checkbox-mark-stroke-size) / 2;\n    border-style: solid;\n    opacity: 0;\n  }\n\n  @include mdc-feature-targets($feat-animation) {\n    transition:\n      mdc-checkbox-transition-exit(opacity),\n      mdc-checkbox-transition-exit(transform);\n  }\n}\n\n@mixin mdc-checkbox__mixedmark--checked_ {\n  transform: scaleX(1) rotate(-45deg);\n}\n\n@mixin mdc-checkbox__mixedmark--indeterminate_ {\n  transform: scaleX(1) rotate(0deg);\n  opacity: 1;\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@import \"@material/feature-targeting/functions\";\n@import \"@material/feature-targeting/mixins\";\n@import \"./variables\";\n@import \"./functions\";\n\n@mixin mdc-theme-core-styles($query: mdc-feature-all()) {\n  $feat-color: mdc-feature-create-target($query, color);\n\n  :root {\n    @include mdc-feature-targets($feat-color) {\n      @each $style in map-keys($mdc-theme-property-values) {\n        --mdc-theme-#{$style}: #{map-get($mdc-theme-property-values, $style)};\n      }\n    }\n  }\n\n  @each $style in map-keys($mdc-theme-property-values) {\n    @if $style != \"background\" and $style != \"surface\" {\n      .mdc-theme--#{$style} {\n        @include mdc-feature-targets($feat-color) {\n          @include mdc-theme-prop(color, $style, true);\n        }\n      }\n    } @else {\n      .mdc-theme--#{$style} {\n        @include mdc-feature-targets($feat-color) {\n          @include mdc-theme-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 mdc-feature-targets($feat-color) {\n        @include mdc-theme-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// $edgeOptOut controls whether to feature-detect around Edge to avoid emitting CSS variables for it,\n// intended for use in cases where interactions with pseudo-element styles cause problems due to Edge bugs.\n@mixin mdc-theme-prop($property, $style, $important: false, $edgeOptOut: false) {\n  @if mdc-theme-is-var-with-fallback_($style) {\n    @if $important {\n      #{$property}: mdc-theme-get-var-fallback_($style) !important;\n      /* @alternate */\n      #{$property}: mdc-theme-var_($style) !important;\n    } @else {\n      #{$property}: mdc-theme-get-var-fallback_($style);\n      /* @alternate */\n      #{$property}: mdc-theme-var_($style);\n    }\n  } @else if mdc-theme-is-valid-theme-prop-value_($style) {\n    @if $important {\n      #{$property}: $style !important;\n    } @else {\n      #{$property}: $style;\n    }\n  } @else {\n    @if not map-has-key($mdc-theme-property-values, $style) {\n      @error \"Invalid style: '#{$style}'. Choose one of: #{map-keys($mdc-theme-property-values)}\";\n    }\n\n    $value: map-get($mdc-theme-property-values, $style);\n\n    @if $important {\n      #{$property}: $value !important;\n\n      @if $edgeOptOut {\n        // stylelint-disable max-nesting-depth\n        @at-root {\n          // IE 11 doesn't understand this syntax and ignores the entire block.\n          // Edge understands this syntax and skips the entire block to avoid a nasty :before/:after pseudo-element bug.\n          // All other browsers apply the styles within the block.\n          @supports not (-ms-ime-align: auto) {\n            // stylelint-disable scss/selector-no-redundant-nesting-selector\n            & {\n              /* @alternate */\n              #{$property}: var(--mdc-theme-#{$style}, $value) !important;\n            }\n            // stylelint-enable scss/selector-no-redundant-nesting-selector\n          }\n        }\n        // stylelint-enable max-nesting-depth\n      } @else {\n        /* @alternate */\n        #{$property}: var(--mdc-theme-#{$style}, $value) !important;\n      }\n    } @else {\n      #{$property}: $value;\n\n      @if $edgeOptOut {\n        // stylelint-disable max-nesting-depth\n        @at-root {\n          // IE 11 doesn't understand this syntax and ignores the entire block.\n          // Edge understands this syntax and skips the entire block to avoid a nasty :before/:after pseudo-element bug.\n          // All other browsers apply the styles within the block.\n          @supports not (-ms-ime-align: auto) {\n            // stylelint-disable scss/selector-no-redundant-nesting-selector\n            & {\n              /* @alternate */\n              #{$property}: var(--mdc-theme-#{$style}, $value);\n            }\n            // stylelint-enable scss/selector-no-redundant-nesting-selector\n          }\n        }\n        // stylelint-enable max-nesting-depth\n      } @else {\n        /* @alternate */\n        #{$property}: var(--mdc-theme-#{$style}, $value);\n      }\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@import \"@material/animation/functions\";\n@import \"@material/animation/variables\";\n@import \"@material/base/mixins\";\n@import \"@material/feature-targeting/functions\";\n@import \"@material/feature-targeting/mixins\";\n@import \"@material/theme/mixins\";\n@import \"./functions\";\n@import \"./keyframes\";\n@import \"./variables\";\n\n@mixin mdc-ripple-core-styles($query: mdc-feature-all()) {\n  // postcss-bem-linter: define ripple-surface\n\n  $feat-structure: mdc-feature-create-target($query, structure);\n\n  .mdc-ripple-surface {\n    @include mdc-ripple-surface($query: $query);\n    @include mdc-states($query: $query);\n    @include mdc-ripple-radius-bounded($query: $query);\n\n    @include mdc-feature-targets($feat-structure) {\n      position: relative;\n      outline: none;\n      overflow: hidden;\n    }\n\n    &[data-mdc-ripple-is-unbounded] {\n      @include mdc-ripple-radius-unbounded($query: $query);\n\n      @include mdc-feature-targets($feat-structure) {\n        overflow: visible;\n      }\n    }\n\n    &--primary {\n      @include mdc-states(primary, $query: $query);\n    }\n\n    &--accent {\n      @include mdc-states(secondary, $query: $query);\n    }\n  }\n\n  // postcss-bem-linter: end\n}\n\n@mixin mdc-ripple-common($query: mdc-feature-all()) {\n  $feat-animation: mdc-feature-create-target($query, animation);\n  $feat-structure: mdc-feature-create-target($query, structure);\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 mdc-feature-targets($feat-animation) {\n    @include mdc-base-emit-once(\"mdc-ripple/common/animation\") {\n      @include mdc-ripple-keyframes_;\n    }\n  }\n\n  @include mdc-feature-targets($feat-structure) {\n    @include mdc-base-emit-once(\"mdc-ripple/common/structure\") {\n      // Styles used to detect buggy behavior of CSS custom properties in Edge.\n      // See: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11495448/\n      // This is included in _mixins.scss rather than mdc-ripple.scss so that it will be\n      // present for other components which rely on ripple as well as mdc-ripple itself.\n      .mdc-ripple-surface--test-edge-var-bug {\n        --mdc-ripple-surface-test-edge-var: 1px solid #000;\n\n        visibility: hidden;\n\n        &::before {\n          border: var(--mdc-ripple-surface-test-edge-var);\n        }\n      }\n    }\n  }\n}\n\n@mixin mdc-ripple-surface($query: mdc-feature-all()) {\n  $feat-animation: mdc-feature-create-target($query, animation);\n  $feat-structure: mdc-feature-create-target($query, structure);\n\n  @include mdc-feature-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  &::before,\n  &::after {\n    @include mdc-feature-targets($feat-structure) {\n      position: absolute;\n      border-radius: 50%;\n      opacity: 0;\n      pointer-events: none;\n      content: \"\";\n    }\n  }\n\n  &::before {\n    @include mdc-feature-targets($feat-animation) {\n      // Also transition background-color to avoid unnatural color flashes when toggling activated/selected state\n      transition:\n        opacity $mdc-states-wash-duration linear,\n        background-color $mdc-states-wash-duration linear;\n    }\n\n    @include mdc-feature-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::before {\n    @include mdc-feature-targets($feat-structure) {\n      transform: scale(var(--mdc-ripple-fg-scale, 1));\n    }\n  }\n\n  &.mdc-ripple-upgraded::after {\n    @include mdc-feature-targets($feat-structure) {\n      top: 0;\n      /* @noflip */\n      left: 0;\n      transform: scale(0);\n      transform-origin: center center;\n    }\n  }\n\n  &.mdc-ripple-upgraded--unbounded::after {\n    @include mdc-feature-targets($feat-structure) {\n      top: var(--mdc-ripple-top, 0);\n      /* @noflip */\n      left: var(--mdc-ripple-left, 0);\n    }\n  }\n\n  &.mdc-ripple-upgraded--foreground-activation::after {\n    @include mdc-feature-targets($feat-animation) {\n      animation:\n        mdc-ripple-fg-radius-in $mdc-ripple-translate-duration forwards,\n        mdc-ripple-fg-opacity-in $mdc-ripple-fade-in-duration forwards;\n    }\n  }\n\n  &.mdc-ripple-upgraded--foreground-deactivation::after {\n    @include mdc-feature-targets($feat-animation) {\n      animation: mdc-ripple-fg-opacity-out $mdc-ripple-fade-out-duration;\n    }\n\n    @include mdc-feature-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@mixin mdc-states-base-color($color, $query: mdc-feature-all()) {\n  $feat-color: mdc-feature-create-target($query, color);\n\n  &::before,\n  &::after {\n    @include mdc-feature-targets($feat-color) {\n      @if alpha(mdc-theme-prop-value($color)) > 0 {\n        @include mdc-theme-prop(background-color, $color, $edgeOptOut: true);\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@mixin mdc-states-hover-opacity($opacity, $query: mdc-feature-all()) {\n  $feat-color: mdc-feature-create-target($query, color);\n\n  // Background wash styles, for both CSS-only and upgraded stateful surfaces\n  &:hover::before {\n    // Opacity falls under color because the chosen opacity is color-dependent in typical usage\n    @include mdc-feature-targets($feat-color) {\n      opacity: $opacity;\n    }\n  }\n}\n\n@mixin mdc-states-focus-opacity($opacity, $has-nested-focusable-element: false, $query: mdc-feature-all()) {\n  $feat-animation: mdc-feature-create-target($query, animation);\n  // Opacity falls under color because the chosen opacity is color-dependent in typical usage\n  $feat-color: mdc-feature-create-target($query, color);\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  $cssOnlyFocusSelector: if(\n    $has-nested-focusable-element,\n    \"&:not(.mdc-ripple-upgraded):focus::before, &:not(.mdc-ripple-upgraded):focus-within::before\",\n    \"&:not(.mdc-ripple-upgraded):focus::before\"\n  );\n\n  #{$cssOnlyFocusSelector},\n  &.mdc-ripple-upgraded--background-focused::before {\n    // Note that this duration is only effective on focus, not blur\n    @include mdc-feature-targets($feat-animation) {\n      transition-duration: 75ms;\n    }\n\n    @include mdc-feature-targets($feat-color) {\n      opacity: $opacity;\n    }\n  }\n}\n\n@mixin mdc-states-press-opacity($opacity, $query: mdc-feature-all()) {\n  $feat-animation: mdc-feature-create-target($query, animation);\n  $feat-color: mdc-feature-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    &::after {\n      @include mdc-feature-targets($feat-animation) {\n        transition: opacity $mdc-ripple-fade-out-duration linear;\n      }\n    }\n\n    &:active::after {\n      @include mdc-feature-targets($feat-animation) {\n        transition-duration: $mdc-ripple-fade-in-duration;\n      }\n\n      // Opacity falls under color because the chosen opacity is color-dependent in typical usage\n      @include mdc-feature-targets($feat-color) {\n        opacity: $opacity;\n      }\n    }\n  }\n\n  &.mdc-ripple-upgraded {\n    @include mdc-feature-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 mdc-states(\n  $color: mdc-theme-prop-value(on-surface),\n  $has-nested-focusable-element: false,\n  $query: mdc-feature-all()\n) {\n  @include mdc-states-interactions_($color, $has-nested-focusable-element, 0, $query);\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 mdc-states-activated($color, $has-nested-focusable-element: false, $query: mdc-feature-all()) {\n  $feat-color: mdc-feature-create-target($query, color);\n  $activated-opacity: mdc-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    &::before {\n      // Opacity falls under color because the chosen opacity is color-dependent.\n      @include mdc-feature-targets($feat-color) {\n        opacity: $activated-opacity;\n      }\n    }\n\n    @include mdc-states-interactions_($color, $has-nested-focusable-element, $activated-opacity, $query);\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 mdc-states-selected($color, $has-nested-focusable-element: false, $query: mdc-feature-all()) {\n  $feat-color: mdc-feature-create-target($query, color);\n  $selected-opacity: mdc-states-opacity($color, selected);\n\n  &--selected {\n    // stylelint-disable-next-line selector-max-type\n    &::before {\n      // Opacity falls under color because the chosen opacity is color-dependent.\n      @include mdc-feature-targets($feat-color) {\n        opacity: $selected-opacity;\n      }\n    }\n\n    @include mdc-states-interactions_($color, $has-nested-focusable-element, $selected-opacity, $query);\n  }\n}\n\n@mixin mdc-ripple-radius-bounded($radius: 100%, $query: mdc-feature-all()) {\n  $feat-struture: mdc-feature-create-target($query, structure);\n\n  &::before,\n  &::after {\n    @include mdc-feature-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::after {\n    @include mdc-feature-targets($feat-struture) {\n      width: var(--mdc-ripple-fg-size, $radius);\n      height: var(--mdc-ripple-fg-size, $radius);\n    }\n  }\n}\n\n@mixin mdc-ripple-radius-unbounded($radius: 100%, $query: mdc-feature-all()) {\n  $feat-struture: mdc-feature-create-target($query, structure);\n\n  &::before,\n  &::after {\n    @include mdc-feature-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::before,\n  &.mdc-ripple-upgraded::after {\n    @include mdc-feature-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  &.mdc-ripple-upgraded::after {\n    @include mdc-feature-targets($feat-struture) {\n      width: var(--mdc-ripple-fg-size, $radius);\n      height: var(--mdc-ripple-fg-size, $radius);\n    }\n  }\n}\n\n@mixin mdc-states-interactions_(\n  $color,\n  $has-nested-focusable-element,\n  $opacity-modifier: 0,\n  $query: mdc-feature-all()\n) {\n  @include mdc-states-base-color($color, $query);\n  @include mdc-states-hover-opacity(mdc-states-opacity($color, hover) + $opacity-modifier, $query);\n  @include mdc-states-focus-opacity(\n    mdc-states-opacity($color, focus) + $opacity-modifier,\n    $has-nested-focusable-element,\n    $query\n  );\n  @include mdc-states-press-opacity(mdc-states-opacity($color, press) + $opacity-modifier, $query);\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// MDC Ripple keyframes are split into their own file so that _mixins.scss can rely on them.\n\n@import \"@material/animation/variables\";\n@import \"./variables\";\n\n@mixin mdc-ripple-keyframes_ {\n  @keyframes mdc-ripple-fg-radius-in {\n    from {\n      animation-timing-function: $mdc-animation-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","//\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@import \"./variables\";\n\n// Creates a rule that will be applied when an MDC Web component is within the context of an RTL layout.\n//\n// Usage Example:\n//\n// ```scss\n// .mdc-foo {\n//   position: absolute;\n//   left: 0;\n//\n//   @include mdc-rtl {\n//     left: auto;\n//     right: 0;\n//   }\n//\n//   &__bar {\n//     margin-left: 4px;\n//     @include mdc-rtl(\".mdc-foo\") {\n//       margin-left: auto;\n//       margin-right: 4px;\n//     }\n//   }\n// }\n//\n// .mdc-foo--mod {\n//   padding-left: 4px;\n//\n//   @include mdc-rtl {\n//     padding-left: auto;\n//     padding-right: 4px;\n//   }\n// }\n// ```\n//\n// Note that this mixin works by checking for an ancestor element with `[dir=\"rtl\"]`.\n// As a result, nested `dir` values are not supported:\n//\n// ```html\n// <html dir=\"rtl\">\n//   <!-- ... -->\n//   <div dir=\"ltr\">\n//     <div class=\"mdc-foo\">Styled incorrectly as RTL!</div>\n//   </div>\n// </html>\n// ```\n//\n// In the future, selectors such as the `:dir` pseudo-class (http://mdn.io/css/:dir) will help us mitigate this.\n@mixin mdc-rtl($root-selector: null) {\n  @if ($mdc-rtl-include) {\n    @if ($root-selector) {\n      @at-root {\n        #{$root-selector}[dir=\"rtl\"] &,\n        [dir=\"rtl\"] #{$root-selector} & {\n          @content;\n        }\n      }\n    } @else {\n      [dir=\"rtl\"] &,\n      &[dir=\"rtl\"] {\n        @content;\n      }\n    }\n  }\n}\n\n// Takes a base box-model property name (`margin`, `border`, `padding`, etc.) along with a\n// default direction (`left` or `right`) and value, and emits rules which apply the given value to the\n// specified direction by default and the opposite direction in RTL.\n//\n// For example:\n//\n// ```scss\n// .mdc-foo {\n//   @include mdc-rtl-reflexive-box(margin, left, 8px);\n// }\n// ```\n//\n// is equivalent to:\n//\n// ```scss\n// .mdc-foo {\n//   margin-left: 8px;\n//   margin-right: 0;\n//\n//   @include mdc-rtl {\n//     margin-left: 0;\n//     margin-right: 8px;\n//   }\n// }\n// ```\n//\n// whereas:\n//\n// ```scss\n// .mdc-foo {\n//   @include mdc-rtl-reflexive-box(margin, right, 8px);\n// }\n// ```\n//\n// is equivalent to:\n//\n// ```scss\n// .mdc-foo {\n//   margin-left: 0;\n//   margin-right: 8px;\n//\n//   @include mdc-rtl {\n//     margin-left: 8px;\n//     margin-right: 0;\n//   }\n// }\n// ```\n//\n// You can also pass an optional 4th `$root-selector` argument which will be forwarded to `mdc-rtl`,\n// e.g. `@include mdc-rtl-reflexive-box(margin, left, 8px, \".mdc-component\")`.\n//\n// Note that this function will always zero out the original value in an RTL context.\n// If you're trying to flip the values, use `mdc-rtl-reflexive-property()` instead.\n@mixin mdc-rtl-reflexive-box($base-property, $default-direction, $value, $root-selector: null) {\n  @if (index((right, left), $default-direction) == null) {\n    @error \"Invalid default direction: '#{$default-direction}'. Please specifiy either 'right' or 'left'.\";\n  }\n\n  $left-value: $value;\n  $right-value: 0;\n\n  @if ($default-direction == right) {\n    $left-value: 0;\n    $right-value: $value;\n  }\n\n  @include mdc-rtl-reflexive-property($base-property, $left-value, $right-value, $root-selector);\n}\n\n// Takes a base property and emits rules that assign <base-property>-left to <left-value> and\n// <base-property>-right to <right-value> in a LTR context, and vice versa in a RTL context.\n// For example:\n//\n// ```scss\n// .mdc-foo {\n//   @include mdc-rtl-reflexive-property(margin, auto, 12px);\n// }\n// ```\n//\n// is equivalent to:\n//\n// ```scss\n// .mdc-foo {\n//   margin-left: auto;\n//   margin-right: 12px;\n//\n//   @include mdc-rtl {\n//     margin-left: 12px;\n//     margin-right: auto;\n//   }\n// }\n// ```\n//\n// An optional 4th `$root-selector` argument can be given, which will be passed to `mdc-rtl`.\n@mixin mdc-rtl-reflexive-property($base-property, $left-value, $right-value, $root-selector: null) {\n  $prop-left: #{$base-property}-left;\n  $prop-right: #{$base-property}-right;\n\n  @include mdc-rtl-reflexive($prop-left, $left-value, $prop-right, $right-value, $root-selector);\n}\n\n// Takes an argument specifying a horizontal position property (either \"left\" or \"right\") as well\n// as a value, and applies that value to the specified position in a LTR context, and flips it in a\n// RTL context. For example:\n//\n// ```scss\n// .mdc-foo {\n//   @include mdc-rtl-reflexive-position(left, 0);\n// }\n// ```\n//\n// is equivalent to:\n//\n// ```scss\n// .mdc-foo {\n//   left: 0;\n//   right: initial;\n//\n//   @include mdc-rtl {\n//     left: initial;\n//     right: 0;\n//   }\n// }\n// ```\n//\n// An optional third $root-selector argument may also be given, which is passed to `mdc-rtl`.\n@mixin mdc-rtl-reflexive-position($position-property, $value, $root-selector: null) {\n  @if (index((right, left), $position-property) == null) {\n    @error \"Invalid position #{position-property}. Please specifiy either right or left\";\n  }\n\n  // TODO: \"initial\" is not supported in IE 11. https://caniuse.com/#feat=css-initial-value\n  $left-value: $value;\n  $right-value: initial;\n\n  @if ($position-property == right) {\n    $right-value: $value;\n    $left-value: initial;\n  }\n\n  @include mdc-rtl-reflexive(left, $left-value, right, $right-value, $root-selector);\n}\n\n// Takes pair of properties with values as arguments and flips it in RTL context.\n// For example:\n//\n// ```scss\n// .mdc-foo {\n//   @include mdc-rtl-reflexive(left, 2px, right, 5px);\n// }\n// ```\n//\n// is equivalent to:\n//\n// ```scss\n// .mdc-foo {\n//   left: 2px;\n//   right: 5px;\n//\n//   @include mdc-rtl {\n//     right: 2px;\n//     left: 5px;\n//   }\n// }\n// ```\n//\n// An optional fifth `$root-selector` argument may also be given, which is passed to `mdc-rtl`.\n@mixin mdc-rtl-reflexive(\n  $left-property,\n  $left-value,\n  $right-property,\n  $right-value,\n  $root-selector: null\n) {\n  @include mdc-rtl-property_($left-property, $left-value);\n  @include mdc-rtl-property_($right-property, $right-value);\n\n  @include mdc-rtl($root-selector) {\n    @include mdc-rtl-property_($left-property, $right-value);\n    @include mdc-rtl-property_($right-property, $left-value);\n  }\n}\n\n///\n/// Adds `@noflip` annotation when `$mdc-rtl-include` is true.\n///\n/// @param {String} $property\n/// @param {String} $value\n/// @access private\n///\n@mixin mdc-rtl-property_($property, $value) {\n  @if $mdc-rtl-include {\n    /* @noflip */\n  }\n\n  #{$property}: #{$value};\n}\n"],"sourceRoot":""}