{"version":3,"sources":["webpack:///./packages/mdc-radio/mdc-radio.scss","webpack:///./packages/material-components-web/node_modules/@material/theme/_mixins.scss","webpack:///./packages/mdc-radio/_variables.scss","webpack:///./packages/material-components-web/node_modules/@material/ripple/_keyframes.scss","webpack:///./packages/material-components-web/node_modules/@material/ripple/_mixins.scss"],"names":[],"mappings":";;;;;;;AA8CE,WAOI,qBACA,kBACA,cACA,sBACA,WACA,YACA,aACA,eAEA,iDA0MJ,4GCpLI,4BCtDsB,CFqP1B,sGC9JI,qBAoBE,iDDqJN,8FCzKI,qBAoBE,iDD+JN,0CCnLI,wBA1BM,CAkCF,oCAEE,0CAEE,sDD/DV,uBAEI,qBACA,kBACA,UACA,sBACA,UACA,UE/CW,CFkDb,+BAEI,kBACA,MACA,OACA,WACA,YACA,oDACA,kBACA,UACA,oBACA,WAIA,kYAKN,yBAEI,kBACA,MACA,OACA,sBACA,WACA,YACA,iBACA,mBACA,kBAIA,+DAIJ,yBAEI,kBACA,MACA,OACA,sBACA,WACA,YACA,oDACA,kBACA,mBACA,kBAIA,gZACE,CAKN,2BAEI,kBACA,MACA,OACA,WACA,YACA,SACA,UACA,UACA,eACA,UAOJ,qHAEI,mXACE,CAIJ,uKAEI,6DAIJ,uKAEI,kYACE,CAOV,qBAEI,eACA,oBAMA,mFAEI,kDAIA,kYACE,CASR,kIAEI,eAGF,oLAEI,4BEjLe,CFqLnB,oLAEI,4BEvLe,CF8LrB,gEAEI,oDACA,YAIA,mXACE,CGzMR,2CACE,KACE,sHAKA,oJAGF,GACE,yMAXJ,mCACE,KACE,sHAKA,oJAGF,GACE,yMAIJ,4CACE,KACE,0EACA,UAGF,GACE,yCAPJ,oCACE,KACE,0EACA,UAGF,GACE,yCAIJ,6CACE,KACE,0EACA,wCAGF,GACE,WAPJ,qCACE,KACE,0EACA,wCAGF,GACE,WC0BA,uCACE,mDAEA,kBAEA,+CACE,+CJwJR,WI5IE,wBACA,qBACA,oBACA,yBACA,iCACA,mCAEA,0CAIF,qCAGI,kBACA,kBACA,UACA,oBACA,WAIJ,mBAGI,4DAMA,UAMJ,uCAEI,sGAIJ,sCAEI,MAEA,OACA,8CACA,sEAIJ,iDAEI,6BAEA,+BAIJ,6DAEI,uLACE,CAKN,+DAEI,4FAKA,wMA0KJ,qCAGI,oBAEA,qBACA,WACA,WAVsC,CAc1C,6EAGI,2CAEA,6CACA,sCACA,uCAIJ,sCAEI,sCACA,uCA3LJ,qCHxEI,wBA1BM,CAkCF,oCAEE,qCAEE,sDG8EZ,yBAGI,WAkL8B,CA7JlC,8GAII,yBAIA,WAuJF,CA1IA,4CAEI,gCAIJ,mDAEI,yBAKA,WAiI4B,CA5HlC,+BAEI,8BJrBA,kFAEI,a","file":"mdc.radio.min.css","sourcesContent":["//\n// Copyright 2016 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@import \"@material/animation/functions\";\n@import \"@material/feature-targeting/functions\";\n@import \"@material/feature-targeting/mixins\";\n@import \"@material/ripple/mixins\";\n@import \"@material/ripple/variables\";\n@import \"@material/theme/mixins\";\n@import \"@material/theme/variables\";\n@import \"./functions\";\n@import \"./variables\";\n\n@mixin mdc-radio-core-styles($query: mdc-feature-all()) {\n  @include mdc-radio-without-ripple($query);\n  @include mdc-radio-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// radio styles. It is recommended that most users use `mdc-radio-core-styles` instead.\n@mixin mdc-radio-without-ripple($query: mdc-feature-all()) {\n  // postcss-bem-linter: define radio\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  .mdc-radio {\n    @include mdc-radio-unchecked-stroke-color($mdc-radio-unchecked-color, $query);\n    @include mdc-radio-checked-stroke-color($mdc-radio-baseline-theme-color, $query);\n    @include mdc-radio-ink-color($mdc-radio-baseline-theme-color, $query);\n    @include mdc-radio-focus-indicator-color($mdc-radio-baseline-theme-color, $query);\n\n    @include mdc-feature-targets($feat-structure) {\n      display: inline-block;\n      position: relative;\n      flex: 0 0 auto;\n      box-sizing: border-box;\n      width: $mdc-radio-touch-area;\n      height: $mdc-radio-touch-area;\n      padding: ($mdc-radio-touch-area - $mdc-radio-ui-size) / 2;\n      cursor: pointer;\n      /* @alternate */\n      will-change: opacity, transform, border-color, color;\n    }\n\n    // Container for radio circles and ripple.\n    &__background {\n      @include mdc-feature-targets($feat-structure) {\n        display: inline-block;\n        position: absolute;\n        left: ($mdc-radio-touch-area - $mdc-radio-ui-size) / 2;\n        box-sizing: border-box;\n        width: $mdc-radio-ui-pct;\n        height: $mdc-radio-ui-pct;\n      }\n\n      &::before {\n        @include mdc-feature-targets($feat-structure) {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 100%;\n          height: 100%;\n          transform: scale(0, 0);\n          border-radius: 50%;\n          opacity: 0;\n          pointer-events: none;\n          content: \"\";\n        }\n\n        @include mdc-feature-targets($feat-animation) {\n          transition: mdc-radio-exit(opacity), mdc-radio-exit(transform);\n        }\n      }\n    }\n\n    &__outer-circle {\n      @include mdc-feature-targets($feat-structure) {\n        position: absolute;\n        top: 0;\n        left: 0;\n        box-sizing: border-box;\n        width: 100%;\n        height: 100%;\n        border-width: 2px;\n        border-style: solid;\n        border-radius: 50%;\n      }\n\n      @include mdc-feature-targets($feat-animation) {\n        transition: mdc-radio-exit(border-color);\n      }\n    }\n\n    &__inner-circle {\n      @include mdc-feature-targets($feat-structure) {\n        position: absolute;\n        top: 0;\n        left: 0;\n        box-sizing: border-box;\n        width: 100%;\n        height: 100%;\n        transform: scale(0, 0);\n        border-width: 10px;\n        border-style: solid;\n        border-radius: 50%;\n      }\n\n      @include mdc-feature-targets($feat-animation) {\n        transition:\n          mdc-radio-exit(transform),\n          mdc-radio-exit(border-color);\n      }\n    }\n\n    &__native-control {\n      @include mdc-feature-targets($feat-structure) {\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        z-index: 1;\n      }\n    }\n  }\n\n  .mdc-radio__native-control:checked,\n  .mdc-radio__native-control:disabled {\n    + .mdc-radio__background {\n      @include mdc-feature-targets($feat-animation) {\n        transition:\n          mdc-radio-enter(opacity),\n          mdc-radio-enter(transform);\n      }\n\n      .mdc-radio__outer-circle {\n        @include mdc-feature-targets($feat-animation) {\n          transition: mdc-radio-enter(border-color);\n        }\n      }\n\n      .mdc-radio__inner-circle {\n        @include mdc-feature-targets($feat-animation) {\n          transition:\n            mdc-radio-enter(transform),\n            mdc-radio-enter(border-color);\n        }\n      }\n    }\n  }\n\n  .mdc-radio--disabled {\n    @include mdc-feature-targets($feat-structure) {\n      cursor: default;\n      pointer-events: none;\n    }\n  }\n\n  .mdc-radio__native-control:checked {\n    + .mdc-radio__background {\n      .mdc-radio__inner-circle {\n        @include mdc-feature-targets($feat-structure) {\n          transform: scale(.5);\n        }\n\n        @include mdc-feature-targets($feat-animation) {\n          transition:\n            mdc-radio-enter(transform),\n            mdc-radio-enter(border-color);\n        }\n      }\n    }\n  }\n\n  .mdc-radio__native-control:disabled,\n  [aria-disabled=\"true\"] .mdc-radio__native-control {\n    + .mdc-radio__background {\n      @include mdc-feature-targets($feat-structure) {\n        cursor: default;\n      }\n\n      .mdc-radio__outer-circle {\n        @include mdc-feature-targets($feat-color) {\n          border-color: $mdc-radio-circle-color;\n        }\n      }\n\n      .mdc-radio__inner-circle {\n        @include mdc-feature-targets($feat-color) {\n          border-color: $mdc-radio-circle-color;\n        }\n      }\n    }\n  }\n\n  .mdc-radio__native-control:focus {\n    + .mdc-radio__background::before {\n      @include mdc-feature-targets($feat-structure) {\n        transform: scale(2, 2);\n        opacity: map-get($mdc-ripple-dark-ink-opacities, focus);\n      }\n\n      @include mdc-feature-targets($feat-animation) {\n        transition:\n          mdc-radio-enter(opacity),\n          mdc-radio-enter(transform);\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// radio styles. It is recommended that most users use `mdc-radio-core-styles` instead.\n@mixin mdc-radio-ripple($query: mdc-feature-all()) {\n  $feat-structure: mdc-feature-create-target($query, structure);\n\n  @include mdc-ripple-common($query);\n\n  .mdc-radio {\n    @include mdc-ripple-surface($query);\n    @include mdc-ripple-radius-unbounded($query: $query);\n    @include mdc-states($mdc-radio-baseline-theme-color, $query: $query);\n\n    &.mdc-ripple-upgraded--background-focused {\n      .mdc-radio__background::before {\n        @include mdc-feature-targets($feat-structure) {\n          content: none;\n        }\n      }\n    }\n  }\n}\n\n@mixin mdc-radio-unchecked-stroke-color($color, $query: mdc-feature-all()) {\n  $feat-color: mdc-feature-create-target($query, color);\n\n  // stylelint-disable-next-line selector-max-specificity\n  .mdc-radio__native-control:enabled:not(:checked) + .mdc-radio__background .mdc-radio__outer-circle {\n    @include mdc-feature-targets($feat-color) {\n      @include mdc-theme-prop(border-color, $color);\n    }\n  }\n}\n\n@mixin mdc-radio-checked-stroke-color($color, $query: mdc-feature-all()) {\n  $feat-color: mdc-feature-create-target($query, color);\n\n  // stylelint-disable-next-line selector-max-specificity\n  .mdc-radio__native-control:enabled:checked + .mdc-radio__background .mdc-radio__outer-circle {\n    @include mdc-feature-targets($feat-color) {\n      @include mdc-theme-prop(border-color, $color);\n    }\n  }\n}\n\n@mixin mdc-radio-ink-color($color, $query: mdc-feature-all()) {\n  $feat-color: mdc-feature-create-target($query, color);\n\n  // stylelint-disable-next-line selector-max-specificity\n  .mdc-radio__native-control:enabled + .mdc-radio__background .mdc-radio__inner-circle {\n    @include mdc-feature-targets($feat-color) {\n      @include mdc-theme-prop(border-color, $color);\n    }\n  }\n}\n\n@mixin mdc-radio-focus-indicator-color($color, $query: mdc-feature-all()) {\n  $feat-color: mdc-feature-create-target($query, color);\n\n  .mdc-radio__background::before {\n    @include mdc-feature-targets($feat-color) {\n      @include mdc-theme-prop(background-color, $color, $edgeOptOut: true);\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/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/theme/variables\";\n\n$mdc-radio-touch-area: 40px !default;\n$mdc-radio-ui-size: 20px !default;\n$mdc-radio-ui-pct: percentage($mdc-radio-ui-size / $mdc-radio-touch-area) !default;\n$mdc-radio-transition-duration: 120ms !default;\n$mdc-radio-ripple-opacity: .14 !default;\n$mdc-radio-baseline-theme-color: secondary !default;\n$mdc-radio-unchecked-color: rgba(mdc-theme-prop-value(on-surface), .54) !default;\n$mdc-radio-circle-color: rgba(mdc-theme-prop-value(on-surface), .26) !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@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 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"],"sourceRoot":""}