{"version":3,"sources":["webpack:///./packages/mdc-banner/styles.scss","webpack:///./packages/material-components-web/node_modules/@material/theme/_css.scss","webpack:///./packages/mdc-banner/_banner.scss","webpack:///./packages/material-components-web/node_modules/@material/rtl/_rtl.scss","webpack:///./packages/material-components-web/node_modules/@material/button/_button-shared-theme.scss","webpack:///./packages/material-components-web/node_modules/@material/ripple/_ripple-theme.scss"],"names":[],"mappings":";;;;;;;AA+QE,qBC7MI,WAYF,qCDgNF,qBC5NI,yBAYF,mDD4OF,wCAGI,eE1RO,CFgSP,4CATJ,wCAUM,gBAaN,qBAEI,eE/SO,CA2CX,YFyTE,SAvVM,CE+CJ,0BACA,sBACA,aACA,cACA,SACA,kBACA,WAlBA,yBAEE,+BACE,OACA,QAGF,8BDbJ,mCEEE,+EFFF,oCC4BE,yBFqQF,4DACE,eAGF,4DACE,mBAGF,yDCzSA,kCD2SE,mBGzSA,qIFFF,kCD8SA,4DACE,kBE7QJ,4DAII,aAIJ,kBAEI,6BAGF,uCAEI,sIAIA,wDAKN,qBAEI,6BAGF,0CAEI,sIF+MN,2CAEI,OACA,iBACA,kBACA,QE3MJ,mBAEI,0BACA,sBACA,eACA,eACA,WAIJ,qBAEI,aACA,gBACA,kBACA,gEACA,WAIJ,kCAEI,aACA,WAIJ,qBDrGE,gCCyGE,cACA,gBACA,mBACA,kBC1GA,6DFFF,gCCgHF,kBAEI,kBACA,QACA,8DAIJ,kBDxHE,mCC4HE,kBACA,YAEA,gBAtKqB,CAuKrB,mBAvKqB,CCyCrB,uDFFF,mCCoIF,qBDpIE,iCCwIE,oBACA,aACA,cACA,mBACA,gBC1IA,6DFFF,iCCgJF,8BDhJE,+BEEE,+EFFF,+BCjBF,YDKI,sBAYF,yDAZE,wCAYF,yEAZE,wBAYF,0DAZE,gBAYF,mDDiJF,8BC7JI,WAYF,oDDuVF,8BCnWI,8BAYF,0EAZE,mBAYF,2DAZE,+BAYF,uEAZE,gBAYF,0DAZE,oBAYF,mED4NF,iCCxOI,kBAYF,4DDwXF,iCCpYI,YAYF,qDAZE,WAYF,oDDkIF,+BC9II,sBAYF,yDDoKF,+BChLI,wCAYF,yEDkLF,+BC9LI,wBAYF,0DGuSF,uCHnTI,cAYF,kGI4EA,uGJxFE,yBAYF,2HIodF,wIJheI,aAYF,mHIodF,gLA9QI,yBJlNA,aAYF,mHIgOE,6EAEI,gCAKF,oFAEI,wBA/QO,CJ0Bb,YAYF,sHIoPA,4CJpPA,sICVF,8BDUE,+BEEE,+EFFF,+B","file":"mdc.banner.min.css","sourcesContent":["//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// Selector '.mdc-*' should only be used in this project.\n// stylelint-disable selector-class-pattern --\n// Internal styling for Tooltip MDC component.\n\n@use 'sass:map';\n@use 'sass:meta';\n@use '@material/elevation/elevation-theme';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/rtl/rtl';\n@use '@material/shape/mixins' as shape-mixins;\n@use '@material/button/button-text-theme';\n@use '@material/theme/theme';\n@use '@material/theme/theme-color';\n@use '@material/theme/keys';\n@use '@material/typography/typography';\n@use '@material/tokens/resolvers';\n\n$fill-color: surface;\n$text-color: on-surface;\n$divider-color: rgba(theme-color.prop-value(on-surface), 0.12);\n$graphic-background-color: primary;\n$graphic-color: surface;\n$graphic-shape-radius: 50%;\n$primary-action-text-color: primary;\n$secondary-action-text-color: primary;\n\n$mobile-breakpoint: 480px;\n$z-index: 1;\n$custom-property-prefix: 'banner';\n\n$light-theme: (\n  action-focus-state-layer-color: theme-color.$primary,\n  action-focus-state-layer-opacity: 0.12,\n  action-focus-label-text-color: null,\n  action-hover-state-layer-color: theme-color.$primary,\n  action-hover-state-layer-opacity: 0.04,\n  action-hover-label-text-color: null,\n  action-label-text-color: theme-color.$primary,\n  // TODO(b/197004146): Support action label typography.\n  action-label-text-font: null,\n  action-label-text-size: null,\n  action-label-text-tracking: null,\n  action-label-text-weight: null,\n  action-pressed-state-layer-color: theme-color.$primary,\n  action-pressed-state-layer-opacity: 0.1,\n  action-pressed-label-text-color: null,\n  container-color: theme-color.$surface,\n  container-elevation: null,\n  container-shadow-color: null,\n  container-shape: 0,\n  divider-color: $divider-color,\n  divider-height: 1px,\n  supporting-text-color: theme-color.$on-surface,\n  supporting-text-font: typography.get-font(body2),\n  supporting-text-line-height: typography.get-line-height(body2),\n  supporting-text-size: typography.get-size(body2),\n  supporting-text-tracking: typography.get-tracking(body2),\n  supporting-text-weight: typography.get-weight(body2),\n  with-image-image-shape: $graphic-shape-radius,\n  with-image-image-size: 40px,\n);\n\n@mixin theme($theme, $resolvers: resolvers.$material) {\n  // TODO(b/251881053): Replace with `validate-theme`.\n  @include theme.validate-theme-styles($light-theme, $theme);\n  $theme: _resolve-theme($theme, $resolvers);\n  @include keys.declare-custom-properties(\n    $theme,\n    $prefix: $custom-property-prefix\n  );\n}\n\n@function _resolve-theme($theme, $resolvers) {\n  @return map.merge(\n    $theme,\n    _resolve-theme-elevation(\n      $theme,\n      map.get($resolvers, elevation),\n      container-elevation\n    )\n  );\n}\n\n@function _resolve-theme-elevation($theme, $resolver, $keys...) {\n  @if $resolver == null {\n    @return $theme;\n  }\n\n  @each $key in $keys {\n    // Resolve the value for each state key.\n    $resolved-value: meta.call(\n      $resolver,\n      $elevation: map.get($theme, $key),\n      $shadow-color: map.get($theme, container-shadow-color)\n    );\n\n    // Update the theme with the resolved value.\n    $theme: map.set($theme, $key, $resolved-value);\n  }\n\n  @return $theme;\n}\n\n@mixin theme-styles(\n  $theme,\n  $resolver: resolvers.$material,\n  $query: feature-targeting.all()\n) {\n  @include theme.validate-theme-styles($light-theme, $theme);\n  $theme: keys.create-theme-properties(\n    $theme,\n    $prefix: $custom-property-prefix\n  );\n\n  @include text-color(map.get($theme, supporting-text-color), $query: $query);\n  @include _supporting-text-typography(\n    (\n      font: map.get($theme, supporting-text-font),\n      size: map.get($theme, supporting-text-size),\n      tracking: map.get($theme, supporting-text-tracking),\n      weight: map.get($theme, supporting-text-weight),\n      line-height: map.get($theme, supporting-text-line-height),\n    ),\n    $query: $query\n  );\n\n  @include graphic-shape-radius(\n    map.get($theme, with-image-image-shape),\n    $query: $query\n  );\n  @include _graphic-size(\n    map.get($theme, with-image-image-size),\n    $query: $query\n  );\n\n  @include fill-color(map.get($theme, container-color), $query: $query);\n  @include divider-color(map.get($theme, divider-color), $query: $query);\n  @include _divider-height(map.get($theme, divider-height), $query: $query);\n  @include _banner-shape(map.get($theme, container-shape), $query: $query);\n  @include _banner-elevation(\n    $resolver,\n    map.get($theme, container-elevation),\n    map.get($theme, container-shadow-color),\n    $query\n  );\n\n  .mdc-button {\n    @include button-text-theme.theme-styles(\n      (\n        focus-label-text-color: map.get($theme, action-focus-label-text-color),\n        focus-state-layer-color: map.get($theme, action-focus-state-layer-color),\n        focus-state-layer-opacity:\n          map.get($theme, action-focus-state-layer-opacity),\n        hover-label-text-color: map.get($theme, action-hover-label-text-color),\n        hover-state-layer-color: map.get($theme, action-hover-state-layer-color),\n        hover-state-layer-opacity:\n          map.get($theme, action-hover-state-layer-opacity),\n        label-text-color: map.get($theme, action-label-text-color),\n        label-text-font: map.get($theme, action-label-text-font),\n        label-text-size: map.get($theme, action-label-text-size),\n        label-text-tracking: map.get($theme, action-label-text-tracking),\n        label-text-weight: map.get($theme, action-label-text-weight),\n        pressed-label-text-color:\n          map.get($theme, action-pressed-label-text-color),\n        pressed-state-layer-color:\n          map.get($theme, action-pressed-state-layer-color),\n        pressed-state-layer-opacity:\n          map.get($theme, action-pressed-state-layer-opacity),\n      ),\n      $query: $query\n    );\n  }\n}\n\n///\n/// Customizes fill color.\n/// @param {Color | String} $color Either a valid color value or a key from\n///     `$theme-theme-color.property-values`.\n///\n@mixin fill-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @include feature-targeting.targets($feat-color) {\n    @include theme.property(background-color, $color);\n  }\n\n  .mdc-banner__fixed {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(background-color, $color);\n    }\n  }\n}\n\n///\n/// Customizes text color.\n/// @param {Color | String} $color Either a valid color value or a key from\n///     `$theme-theme-color.property-values`.\n///\n@mixin text-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-banner__text {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(color, $color);\n    }\n  }\n}\n\n///\n/// Customizes divider color.\n/// @param {Color | String} $color Either a valid color value or a key from\n///     `$theme-theme-color.property-values`.\n///\n@mixin divider-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @include feature-targeting.targets($feat-color) {\n    @include theme.property(border-bottom-color, $color);\n  }\n\n  .mdc-banner__fixed {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(border-bottom-color, $color);\n    }\n  }\n}\n\n@mixin _divider-height($height, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    @include theme.property(border-bottom-width, $height);\n  }\n\n  .mdc-banner__fixed {\n    @include feature-targeting.targets($feat-structure) {\n      @include theme.property(border-bottom-width, $height);\n    }\n  }\n}\n\n///\n/// Customizes the graphic color.\n/// @param {Color | String} $color Either a valid color value or a key from\n///     `$theme-theme-color.property-values`.\n///\n@mixin graphic-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-banner__graphic {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(color, $color);\n    }\n  }\n}\n\n///\n/// Customizes the graphic background color.\n/// @param {Color | String} $color Either a valid color value or a key from\n///     `$theme-theme-color.property-values`.\n///\n@mixin graphic-background-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-banner__graphic {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(background-color, $color);\n    }\n  }\n}\n\n///\n/// Customizes the graphic shape radius.\n/// @param {Number} $shape-radius Shape radius in length or percentage.\n///\n@mixin graphic-shape-radius($shape-radius, $query: feature-targeting.all()) {\n  .mdc-banner__graphic {\n    @include shape-mixins.radius($shape-radius, $query: $query);\n  }\n}\n\n///\n/// Sets the min-width for the banner content.\n/// @param {Number} $min-width Minimum width value in `px`.\n/// @param {Number} $mobile-breakpoint Mobile breakpoint value in `px`.\n///\n@mixin min-width(\n  $min-width,\n  $mobile-breakpoint: $mobile-breakpoint,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  .mdc-banner__content,\n  .mdc-banner__fixed {\n    @include feature-targeting.targets($feat-structure) {\n      min-width: $min-width;\n\n      // The first media query ensures that banners are always 100% width on\n      // mobile devices, as required by the spec. The second media query\n      // prevents banners from being wider than the viewport for large min-width\n      // values.\n      @media (max-width: $mobile-breakpoint), (max-width: $min-width) {\n        min-width: 100%;\n      }\n    }\n  }\n}\n\n///\n/// Sets the max-width for the banner content.\n/// @param {Number} $max-width Maximum width value in `px`.\n///\n@mixin max-width($max-width, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-banner__content {\n    @include feature-targeting.targets($feat-structure) {\n      max-width: $max-width;\n    }\n  }\n}\n\n///\n/// Sets the banner content to centered instead of leading.\n///\n@mixin position-centered($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-banner__content {\n    @include feature-targeting.targets($feat-structure) {\n      left: 0;\n      margin-left: auto;\n      margin-right: auto;\n      right: 0;\n    }\n  }\n}\n\n///\n/// Sets the banner content to stacked layout.\n///\n@mixin layout-stacked($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    .mdc-banner__content {\n      flex-wrap: wrap;\n    }\n\n    .mdc-banner__graphic {\n      margin-bottom: 12px;\n    }\n\n    .mdc-banner__text {\n      @include rtl.reflexive-property(margin, 16px, 8px);\n      padding-bottom: 4px;\n    }\n\n    .mdc-banner__actions {\n      margin-left: auto;\n    }\n  }\n}\n\n// Sets the z-index of the banner.\n// @param {Number} $z-index\n@mixin z-index($z-index, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    z-index: $z-index;\n  }\n}\n\n// Sets the width of the banner fixed element. Use to adjust the width of the\n// fixed banner in cases where width is not the same as the viewport.\n// @param {Number} $width Width value in `px`.\n@mixin fixed-width($width, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-banner__fixed {\n    @include feature-targeting.targets($feat-structure) {\n      width: $width;\n    }\n  }\n}\n\n@mixin _supporting-text-typography(\n  $typography-map,\n  $query: feature-targeting.all()\n) {\n  $feat-typography: feature-targeting.create-target($query, typography);\n\n  $font: map.get($typography-map, font);\n  $size: map.get($typography-map, size);\n  $tracking: map.get($typography-map, tracking);\n  $weight: map.get($typography-map, weight);\n  $line-height: map.get($typography-map, line-height);\n\n  .mdc-banner__text {\n    @include feature-targeting.targets($feat-typography) {\n      @include theme.property(letter-spacing, $tracking);\n      @include theme.property(font-size, $size);\n      @include theme.property(font-family, $font);\n      @include theme.property(font-weight, $weight);\n      @include theme.property(line-height, $line-height);\n    }\n  }\n}\n\n@mixin _banner-shape($shape, $query: feature-targeting.all()) {\n  @include shape-mixins.radius($shape, $query: $query);\n}\n\n@mixin _banner-elevation(\n  $resolver,\n  $elevation,\n  $shadow-color,\n  $query: feature-targeting.all()\n) {\n  $elevation-resolver: map.get($resolver, elevation);\n\n  @include elevation-theme.with-resolver(\n    $elevation-resolver,\n    $elevation: $elevation,\n    $shadow-color: $shadow-color,\n    $query: $query\n  );\n}\n\n@mixin _graphic-size($size, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  .mdc-banner__graphic {\n    @include feature-targeting.targets($feat-structure) {\n      @include theme.property(height, $size);\n      @include theme.property(width, $size);\n    }\n  }\n}\n","//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use 'sass:list';\n@use 'sass:map';\n@use 'sass:meta';\n@use './gss';\n\n/// When true, add an additional property/value declaration before declarations\n/// that use advanced features such as custom properties or CSS functions. This\n/// adds fallback support for older browsers such as IE11 that do not support\n/// these features at the cost of additional CSS. Set this variable to false to\n/// disable generating fallback declarations.\n$enable-fallback-declarations: true !default;\n\n/// Writes a CSS property/value declaration. This mixin is used throughout the\n/// theme package for consistency for dynamically setting CSS property values.\n///\n/// This mixin may optionally take a fallback value. For advanced features such\n/// as custom properties or CSS functions like min and max, a fallback value is\n/// recommended to support older browsers.\n///\n/// @param {String} $property - The CSS property of the declaration.\n/// @param {*} $value - The value of the CSS declaration. The value should be\n///     resolved by other theme functions first (i.e. custom property Maps and\n///     Material theme keys are not supported in this mixin). If the value is\n///     null, no declarations will be emitted.\n/// @param {*} $fallback - An optional fallback value for older browsers. If\n///     provided, a second property/value declaration will be added before the\n///     main property/value declaration.\n/// @param {Map} $gss - An optional Map of GSS annotations to add.\n/// @param {Bool} $important - If true, add `!important` to the declaration.\n@mixin declaration(\n  $property,\n  $value,\n  $fallback-value: null,\n  $gss: (),\n  $important: false\n) {\n  // Normally setting a null value to a property will not emit CSS, so mixins\n  // wouldn't need to check this. However, Sass will throw an error if the\n  // interpolated property is a custom property.\n  @if $value != null {\n    $important-rule: if($important, ' !important', '');\n\n    @if $fallback-value and $enable-fallback-declarations {\n      @include gss.annotate($gss);\n      #{$property}: #{$fallback-value} #{$important-rule};\n\n      // Add @alternate to annotations.\n      $gss: map.merge(\n        $gss,\n        (\n          alternate: true,\n        )\n      );\n    }\n\n    @include gss.annotate($gss);\n    #{$property}: #{$value}#{$important-rule};\n  }\n}\n\n/// Unpacks shorthand values for CSS properties (i.e. lists of 1-3 values).\n/// If a list of 4 values is given, it is returned as-is.\n///\n/// Examples:\n///\n/// unpack-value(4px) => 4px 4px 4px 4px\n/// unpack-value(4px 2px) => 4px 2px 4px 2px\n/// unpack-value(4px 2px 2px) => 4px 2px 2px 2px\n/// unpack-value(4px 2px 0 2px) => 4px 2px 0 2px\n///\n/// @param {Number | Map | List} $value - List of 1 to 4 value numbers.\n/// @return {List} a List of 4 value numbers.\n@function unpack-value($value) {\n  @if meta.type-of($value) == 'map' or list.length($value) == 1 {\n    @return $value $value $value $value;\n  } @else if list.length($value) == 4 {\n    @return $value;\n  } @else if list.length($value) == 3 {\n    @return list.nth($value, 1) list.nth($value, 2) list.nth($value, 3)\n      list.nth($value, 2);\n  } @else if list.length($value) == 2 {\n    @return list.nth($value, 1) list.nth($value, 2) list.nth($value, 1)\n      list.nth($value, 2);\n  }\n\n  @error \"Invalid CSS property value: '#{$value}' is more than 4 values\";\n}\n","//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// Selector '.mdc-*' should only be used in this project.\n// stylelint-disable selector-class-pattern --\n// Internal styling for Tooltip MDC component.\n\n@use 'sass:math';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/typography/typography';\n@use '@material/button/button-theme';\n@use '@material/ripple/ripple-theme';\n@use '@material/rtl/rtl';\n@use './banner-theme';\n\n$_text-type-scale: body2;\n$_min-width: 344px;\n$_max-width: 720px;\n// Minimum banner height minus standard text height, divided by 2 for both top\n// and bottom padding. This is used to support two/three line banners.\n$_text-padding-top-bottom: math.div(52px - 20px, 2);\n\n$_enter-duration: 300ms;\n$_exit-duration: 250ms;\n\n/// Core styles for banner component.\n@mixin core-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $feat-animation: feature-targeting.create-target($query, animation);\n\n  @include banner-theme.graphic-color(\n    banner-theme.$graphic-color,\n    $query: $query\n  );\n  @include banner-theme.graphic-background-color(\n    banner-theme.$graphic-background-color,\n    $query: $query\n  );\n  @include banner-theme.min-width($_min-width, $query: $query);\n  @include banner-theme.max-width($_max-width, $query: $query);\n  @include static-styles($query: $query);\n\n  .mdc-banner {\n    @include banner-theme.theme-styles(\n      banner-theme.$light-theme,\n      $query: $query\n    );\n  }\n\n  .mdc-banner__secondary-action {\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.reflexive-property(margin, 0, 8px);\n    }\n  }\n}\n\n@mixin static-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $feat-animation: feature-targeting.create-target($query, animation);\n\n  .mdc-banner {\n    @include banner-theme.z-index(banner-theme.$z-index, $query: $query);\n\n    @include feature-targeting.targets($feat-structure) {\n      // Mobile view styles.\n      @media (max-width: banner-theme.$mobile-breakpoint) {\n        // Span across viewport for fixed mobile view.\n        .mdc-banner__fixed {\n          left: 0;\n          right: 0;\n        }\n\n        .mdc-banner__text {\n          @include rtl.reflexive-property(margin, 16px, 36px);\n        }\n      }\n\n      border-bottom-style: solid;\n      box-sizing: border-box;\n      display: none;\n      flex-shrink: 0;\n      height: 0;\n      position: relative;\n      width: 100%;\n    }\n\n    &.mdc-banner--mobile-stacked {\n      @media (max-width: banner-theme.$mobile-breakpoint) {\n        @include banner-theme.layout-stacked($query: $query);\n      }\n    }\n  }\n\n  .mdc-banner--opening,\n  .mdc-banner--open,\n  .mdc-banner--closing {\n    @include feature-targeting.targets($feat-structure) {\n      display: flex;\n    }\n  }\n\n  .mdc-banner--open {\n    @include feature-targeting.targets($feat-animation) {\n      transition: height $_enter-duration ease;\n    }\n\n    .mdc-banner__content {\n      @include feature-targeting.targets($feat-animation) {\n        transition: transform $_enter-duration ease;\n      }\n\n      @include feature-targeting.targets($feat-structure) {\n        transform: translateY(0);\n      }\n    }\n  }\n\n  .mdc-banner--closing {\n    @include feature-targeting.targets($feat-animation) {\n      transition: height $_exit-duration ease;\n    }\n\n    .mdc-banner__content {\n      @include feature-targeting.targets($feat-animation) {\n        transition: transform $_exit-duration ease;\n      }\n    }\n  }\n\n  .mdc-banner--centered {\n    @include banner-theme.position-centered($query: $query);\n  }\n\n  .mdc-banner__fixed {\n    @include feature-targeting.targets($feat-structure) {\n      border-bottom-style: solid;\n      box-sizing: border-box;\n      height: inherit;\n      position: fixed;\n      width: 100%;\n    }\n  }\n\n  .mdc-banner__content {\n    @include feature-targeting.targets($feat-structure) {\n      display: flex;\n      min-height: 52px;\n      position: absolute;\n      transform: translateY(-100%);\n      width: 100%;\n    }\n  }\n\n  .mdc-banner__graphic-text-wrapper {\n    @include feature-targeting.targets($feat-structure) {\n      display: flex;\n      width: 100%;\n    }\n  }\n\n  .mdc-banner__graphic {\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.reflexive-property(margin, 16px, 0);\n\n      flex-shrink: 0;\n      margin-top: 16px;\n      margin-bottom: 16px;\n      text-align: center;\n    }\n  }\n\n  .mdc-banner__icon {\n    @include feature-targeting.targets($feat-structure) {\n      position: relative;\n      top: 50%;\n      transform: translateY(-50%);\n    }\n  }\n\n  .mdc-banner__text {\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.reflexive-property(margin, 24px, 90px);\n\n      align-self: center;\n      flex-grow: 1;\n\n      padding-top: $_text-padding-top-bottom;\n      padding-bottom: $_text-padding-top-bottom;\n    }\n  }\n\n  .mdc-banner__actions {\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.reflexive-property(padding, 0, 8px);\n\n      align-self: flex-end;\n      display: flex;\n      flex-shrink: 0;\n      padding-bottom: 8px;\n      padding-top: 8px;\n    }\n  }\n\n  .mdc-banner__secondary-action {\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.reflexive-property(margin, 0, 8px);\n    }\n  }\n}\n","//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use 'sass:list';\n@use 'sass:meta';\n@use 'sass:selector';\n@use '@material/theme/gss';\n@use '@material/theme/selector-ext';\n@use '@material/theme/theme';\n\n$include: true !default;\n\n/// Creates a rule that will be applied when a component is within the context\n/// of an RTL layout.\n///\n/// @example - scss\n/// .mdc-foo {\n///   padding-left: 4px;\n///\n///   @include rtl {\n///     padding-left: auto;\n///     padding-right: 4px;\n///   }\n/// }\n///\n/// @example - css\n///   .mdc-foo {\n///     padding-left: 4px;\n///   }\n///\n///   [dir=\"rtl\"] .mdc-foo,\n///   .mdc-foo[dir=\"rtl\"] {\n///     padding-left: auto;\n///     padding-right: 4px;\n///   }\n///\n/// Note that this mixin works by checking for an ancestor element with\n/// `[dir=\"rtl\"]`. As a result, nested `dir` values are not supported:\n///\n/// @example - html\n/// <html dir=\"rtl\">\n///   <!-- ... -->\n///   <div dir=\"ltr\">\n///     <div class=\"mdc-foo\">Styled incorrectly as RTL!</div>\n///   </div>\n/// </html>\n///\n/// In the future, selectors such as the `:dir` pseudo-class\n/// (http://mdn.io/css/:dir) will help us mitigate this.\n///\n/// @content Content to be styled in an RTL context.\n@mixin rtl() {\n  @if ($include) {\n    $dir-rtl: '[dir=rtl]';\n\n    $rtl-selectors: list.join(\n      selector.nest($dir-rtl, &),\n      selector-ext.append-strict(&, $dir-rtl)\n    );\n\n    @at-root {\n      #{$rtl-selectors} {\n        /*rtl:begin:ignore*/\n        @content;\n        /*rtl:end:ignore*/\n      }\n    }\n  }\n}\n\n// Takes a base box-model property name (`margin`, `border`, `padding`, etc.) along with a\n// default direction (`left` or `right`) and value, and emits rules which apply the given value to the\n// specified direction by default and the opposite direction in RTL.\n//\n// For example:\n//\n// ```scss\n// .mdc-foo {\n//   @include rtl-reflexive-box(margin, left, 8px);\n// }\n// ```\n//\n// is equivalent to:\n//\n// ```scss\n// .mdc-foo {\n//   margin-left: 8px;\n//   margin-right: 0;\n//\n//   @include rtl {\n//     margin-left: 0;\n//     margin-right: 8px;\n//   }\n// }\n// ```\n//\n// whereas:\n//\n// ```scss\n// .mdc-foo {\n//   @include rtl-reflexive-box(margin, right, 8px);\n// }\n// ```\n//\n// is equivalent to:\n//\n// ```scss\n// .mdc-foo {\n//   margin-left: 0;\n//   margin-right: 8px;\n//\n//   @include rtl {\n//     margin-left: 8px;\n//     margin-right: 0;\n//   }\n// }\n// ```\n//\n// You can also pass an optional 4th `$root-selector` argument which will be forwarded to `mdc-rtl`,\n// e.g. `@include rtl-reflexive-box(margin, left, 8px, '.mdc-component')`.\n//\n// Note that this function will always zero out the original value in an RTL context.\n// If you're trying to flip the values, use `mdc-rtl-reflexive-property()` instead.\n@mixin reflexive-box(\n  $base-property,\n  $default-direction,\n  $value,\n  $replace: null\n) {\n  @if (list.index((right, left), $default-direction) == null) {\n    @error \"Invalid default direction: '#{$default-direction}'. Please specifiy either 'right' or 'left'.\";\n  }\n\n  $left-value: $value;\n  $right-value: 0;\n\n  @if ($default-direction == right) {\n    $left-value: 0;\n    $right-value: $value;\n  }\n\n  @include reflexive-property(\n    $base-property,\n    $left-value,\n    $right-value,\n    $replace: $replace\n  );\n}\n\n// Takes a base property and emits rules that assign <base-property>-left to <left-value> and\n// <base-property>-right to <right-value> in a LTR context, and vice versa in a RTL context.\n// For example:\n//\n// ```scss\n// .mdc-foo {\n//   @include rtl-reflexive-property(margin, auto, 12px);\n// }\n// ```\n//\n// is equivalent to:\n//\n// ```scss\n// .mdc-foo {\n//   margin-left: auto;\n//   margin-right: 12px;\n//\n//   @include rtl {\n//     margin-left: 12px;\n//     margin-right: auto;\n//   }\n// }\n// ```\n//\n// An optional 4th `$root-selector` argument can be given, which will be passed to `mdc-rtl`.\n@mixin reflexive-property(\n  $base-property,\n  $left-value,\n  $right-value,\n  $replace: null\n) {\n  $prop-left: #{$base-property}-left;\n  $prop-right: #{$base-property}-right;\n\n  @include reflexive(\n    $prop-left,\n    $left-value,\n    $prop-right,\n    $right-value,\n    $replace: $replace\n  );\n}\n\n// Takes an argument specifying a horizontal position property (either 'left' or 'right') as well\n// as a value, and applies that value to the specified position in a LTR context, and flips it in a\n// RTL context. For example:\n//\n// ```scss\n// .mdc-foo {\n//   @include rtl-reflexive-position(left, 0);\n// }\n// ```\n//\n// is equivalent to:\n//\n// ```scss\n// .mdc-foo {\n//   left: 0;\n//   right: initial;\n//\n//   @include rtl {\n//     left: initial;\n//     right: 0;\n//   }\n// }\n// ```\n//\n// An optional third $root-selector argument may also be given, which is passed to `mdc-rtl`.\n@mixin reflexive-position($position-property, $value, $replace: null) {\n  @if (list.index((right, left), $position-property) == null) {\n    @error \"Invalid position #{position-property}. Please specifiy either right or left\";\n  }\n\n  // TODO: 'initial' is not supported in IE 11. https://caniuse.com/#feat=css-initial-value\n  $left-value: $value;\n  $right-value: initial;\n\n  @if ($position-property == right) {\n    $right-value: $value;\n    $left-value: initial;\n  }\n\n  @include reflexive(\n    left,\n    $left-value,\n    right,\n    $right-value,\n    $replace: $replace\n  );\n}\n\n// Takes pair of properties with values as arguments and flips it in RTL context.\n// For example:\n//\n// ```scss\n// .mdc-foo {\n//   @include rtl-reflexive(left, 2px, right, 5px);\n// }\n// ```\n//\n// is equivalent to:\n//\n// ```scss\n// .mdc-foo {\n//   left: 2px;\n//   right: 5px;\n//\n//   @include rtl {\n//     right: 2px;\n//     left: 5px;\n//   }\n// }\n// ```\n//\n// An optional fifth `$root-selector` argument may also be given, which is passed to `mdc-rtl`.\n@mixin reflexive(\n  $left-property,\n  $left-value,\n  $right-property,\n  $right-value,\n  $replace: null\n) {\n  $left-replace: null;\n  $right-replace: null;\n  @if $replace {\n    @if meta.type-of($left-value) == 'string' {\n      $left-replace: $replace;\n    }\n\n    @if meta.type-of($right-value) == 'string' {\n      $right-replace: $replace;\n    }\n\n    @if $left-replace == null and $right-replace == null {\n      @error 'mdc-rtl: $replace may only be used with strings but neither left nor right values are strings.';\n    }\n\n    // If any replacements are null, treat the entire value as null (do not\n    // emit anything).\n    @each $name, $replacement in $replace {\n      @if $replacement == null {\n        $left-value: null;\n        $right-value: null;\n      }\n    }\n  }\n\n  // Do not emit if either value are null\n  @if $left-value and $right-value {\n    @include _property($left-property, $left-value, $replace: $left-replace);\n    @include _property($right-property, $right-value, $replace: $right-replace);\n\n    @include rtl {\n      @include _property(\n        $left-property,\n        $right-value,\n        $replace: $right-replace\n      );\n      @include _property($right-property, $left-value, $replace: $left-replace);\n    }\n  }\n}\n\n///\n/// Adds RTL ignore annotation when `$mdc-rtl-include` is true.\n///\n@mixin ignore-next-line() {\n  @include gss.annotate(\n    (\n      noflip: $include,\n    )\n  );\n}\n\n///\n/// Adds `@noflip` annotation when `$mdc-rtl-include` is true.\n///\n/// @param {String} $property\n/// @param {String} $value\n/// @param {Map} $replace\n///\n@mixin _property($property, $value, $replace: null) {\n  @include theme.property(\n    $property,\n    $value,\n    $replace: $replace,\n    $gss: (noflip: $include)\n  );\n}\n","//\n// Copyright 2021 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:map';\n@use 'sass:math';\n@use 'sass:meta';\n@use '@material/density/functions' as density-functions;\n@use '@material/density/variables' as density-variables;\n@use '@material/dom/mixins' as dom-mixins;\n@use '@material/elevation/elevation-theme';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/focus-ring/focus-ring';\n@use '@material/ripple/ripple-theme';\n@use '@material/shape/mixins' as shape-mixins;\n@use '@material/theme/custom-properties';\n@use '@material/theme/state';\n@use '@material/theme/theme';\n@use '@material/theme/theme-color';\n@use '@material/typography/typography';\n@use './button-ripple';\n\n$height: 36px !default;\n$horizontal-padding: 8px !default;\n$contained-horizontal-padding: 16px !default;\n// For a contained button with an icon, the padding on the side of the\n// button with the icon.\n$contained-horizontal-padding-icon: 12px !default;\n\n$minimum-height: 24px !default;\n$maximum-height: $height !default;\n$density-scale: density-variables.$default-scale !default;\n$density-config: (\n  height: (\n    default: $height,\n    maximum: $maximum-height,\n    minimum: $minimum-height,\n  ),\n) !default;\n\n$shape-radius: small !default;\n\n$disabled-ink-color: rgba(theme-color.prop-value(on-surface), 0.38) !default;\n$disabled-container-color: rgba(\n  theme-color.prop-value(on-surface),\n  0.12\n) !default;\n\n@mixin theme-styles($theme, $resolver, $query: feature-targeting.all()) {\n  @include _label-text-typography(\n    (\n      family: map.get($theme, label-text-font),\n      size: map.get($theme, label-text-size),\n      tracking: map.get($theme, label-text-tracking),\n      weight: map.get($theme, label-text-weight),\n      transform: map.get($theme, label-text-transform),\n    ),\n    $query: $query\n  );\n\n  @include container-fill-color(\n    (\n      default: map.get($theme, container-color),\n      disabled: map.get($theme, disabled-container-color),\n    ),\n    $query: $query\n  );\n\n  @include ink-color(\n    (\n      default: map.get($theme, label-text-color),\n      hover: map.get($theme, hover-label-text-color),\n      focus: map.get($theme, focus-label-text-color),\n      pressed: map.get($theme, pressed-label-text-color),\n      disabled: map.get($theme, disabled-label-text-color),\n    ),\n    $query: $query\n  );\n\n  @include icon-color(\n    (\n      default: map.get($theme, with-icon-icon-color),\n      hover: map.get($theme, with-icon-hover-icon-color),\n      focus: map.get($theme, with-icon-focus-icon-color),\n      pressed: map.get($theme, with-icon-pressed-icon-color),\n      disabled: map.get($theme, with-icon-disabled-icon-color),\n    ),\n    $query: $query\n  );\n\n  $icon-size: map.get($theme, with-icon-icon-size);\n  @include _icon-size($icon-size, $query: $query);\n\n  @include _states-colors(\n    (\n      focus: map.get($theme, focus-state-layer-color),\n      hover: map.get($theme, hover-state-layer-color),\n      pressed: map.get($theme, pressed-state-layer-color),\n    ),\n    $query: $query\n  );\n\n  $hover-state-layer-opacity: map.get($theme, hover-state-layer-opacity);\n  $focus-state-layer-opacity: map.get($theme, focus-state-layer-opacity);\n  $pressed-state-layer-opacity: map.get($theme, pressed-state-layer-opacity);\n  @include ripple-theme.states-opacities(\n    $opacity-map: (\n      focus: $focus-state-layer-opacity,\n      hover: $hover-state-layer-opacity,\n      press: $pressed-state-layer-opacity,\n    ),\n    $ripple-target: button-ripple.$ripple-target,\n    $query: $query\n  );\n\n  $container-height: map.get($theme, container-height);\n  @include height($container-height, $query: $query);\n\n  $container-height-value: if(\n    custom-properties.is-custom-prop($container-height),\n    custom-properties.get-fallback($container-height),\n    $container-height\n  );\n\n  /// Token \"keep-touch-target\":\n  /// Prevent the increased touch target from being reseted if the\n  /// container-height differs from the default (36px)\n  $keep-touch-target: map.get($theme, keep-touch-target);\n  @if (not $keep-touch-target) and\n    ($container-height-value != null) and\n    ($container-height-value != $height)\n  {\n    @include _touch-target-reset($query: $query);\n  }\n\n  $shape: map.get($theme, container-shape);\n  @if $shape {\n    $container-height: if(\n      $container-height != null,\n      $container-height,\n      $height\n    );\n    @include _shape-radius-with-height(\n      $shape,\n      $height: $container-height,\n      $query: $query\n    );\n  }\n\n  @include _elevation(\n    $resolver,\n    $elevation-map: (\n      default: map.get($theme, container-elevation),\n      disabled: map.get($theme, disabled-container-elevation),\n      focus: map.get($theme, focus-container-elevation),\n      hover: map.get($theme, hover-container-elevation),\n      pressed: map.get($theme, pressed-container-elevation)\n    ),\n    $shadow-color: map.get($theme, container-shadow-color),\n    $query: $query\n  );\n}\n\n@function resolve-theme-elevation-keys($theme, $resolver) {\n  $elevation-resolver: map.get($resolver, elevation);\n  $shadow-color: map.get($theme, container-shadow-color);\n  @if $elevation-resolver == null or $shadow-color == null {\n    @return $theme;\n  }\n\n  $elevation-keys: (\n    container-elevation,\n    hover-container-elevation,\n    focus-container-elevation,\n    pressed-container-elevation,\n    disabled-container-elevation\n  );\n\n  @each $key in $elevation-keys {\n    $elevation: map.get($theme, $key);\n    @if $elevation != null {\n      $resolved-value: meta.call(\n        $resolver,\n        $elevation: $elevation,\n        $shadow-color: $shadow-color\n      );\n      // Update the key with the resolved value.\n      $theme: map.set($theme, $key, $resolved-value);\n    }\n  }\n  @return $theme;\n}\n\n///\n/// Sets ripple color for button.\n///\n@mixin ripple-states(\n  $color,\n  $opacity-map: null,\n  $query: feature-targeting.all()\n) {\n  @include ripple-theme.states(\n    $color: $color,\n    $opacity-map: $opacity-map,\n    $query: $query,\n    $ripple-target: button-ripple.$ripple-target\n  );\n}\n\n@mixin filled-accessible(\n  $container-fill-color,\n  $query: feature-targeting.all()\n) {\n  $fill-tone: theme-color.tone($container-fill-color);\n\n  @include container-fill-color($container-fill-color, $query);\n\n  @if ($fill-tone == 'dark') {\n    @include ink-color(text-primary-on-dark, $query);\n    @include ripple-states($color: text-primary-on-dark, $query: $query);\n  } @else {\n    @include ink-color(text-primary-on-light, $query);\n    @include ripple-states($color: text-primary-on-light, $query: $query);\n  }\n}\n\n///\n/// Sets the container fill color to the given color for an enabled button.\n/// @param {Color|map} $color-or-map - The desired container fill color,\n///     specified either as a flat value or a map of colors with states\n///     {default, hover, focus, pressed, disabled} as keys.\n///\n@mixin container-fill-color($color-or-map, $query: feature-targeting.all()) {\n  // :not(:disabled) is used to support link styled as button\n  // as link does not support :enabled style\n  &:not(:disabled) {\n    @include _container-fill-color(\n      state.get-default-state($color-or-map),\n      $query: $query\n    );\n\n    &:hover {\n      @include _container-fill-color(\n        state.get-hover-state($color-or-map),\n        $query: $query\n      );\n    }\n\n    @include ripple-theme.focus() {\n      @include _container-fill-color(\n        state.get-focus-state($color-or-map),\n        $query: $query\n      );\n    }\n\n    @include ripple-theme.active {\n      @include _container-fill-color(\n        state.get-pressed-state($color-or-map),\n        $query: $query\n      );\n    }\n  }\n\n  &:disabled {\n    @include _container-fill-color(\n      state.get-disabled-state($color-or-map),\n      $query: $query\n    );\n  }\n}\n\n///\n/// Sets the container fill color to the given color for a disabled button.\n/// @param {Color} $color - The desired container fill color.\n/// @deprecated - call `container-fill-color` instead with `disabled` as a map\n///     key.\n///\n@mixin disabled-container-fill-color($color, $query: feature-targeting.all()) {\n  @include container-fill-color(\n    (\n      disabled: $color,\n    ),\n    $query: $query\n  );\n}\n\n///\n/// Sets the icon color to the given color for an enabled button.\n/// @param {Color} $color-or-map - The desired icon color, specified either\n///     as a flat value or a map of colors with states\n///     {default, hover, focus, pressed, disabled} as keys.\n///\n@mixin icon-color($color-or-map, $query: feature-targeting.all()) {\n  &:not(:disabled) {\n    @include _icon-color(\n      state.get-default-state($color-or-map),\n      $query: $query\n    );\n\n    &:hover {\n      @include _icon-color(\n        state.get-hover-state($color-or-map),\n        $query: $query\n      );\n    }\n\n    @include ripple-theme.focus() {\n      @include _icon-color(\n        state.get-focus-state($color-or-map),\n        $query: $query\n      );\n    }\n\n    @include ripple-theme.active {\n      @include _icon-color(\n        state.get-pressed-state($color-or-map),\n        $query: $query\n      );\n    }\n  }\n\n  &:disabled {\n    @include _icon-color(\n      state.get-disabled-state($color-or-map),\n      $query: $query\n    );\n  }\n}\n\n///\n/// Sets the icon color to the given color for a disabled button.\n/// @param {Color} $color - The desired icon color.\n/// @deprecated - call `icon-color` instead with `disabled` as a map key.\n///\n@mixin disabled-icon-color($color, $query: feature-targeting.all()) {\n  @include icon-color(\n    (\n      disabled: $color,\n    ),\n    $query: $query\n  );\n}\n\n///\n/// Sets the ink color to the given color for an enabled button,\n/// and sets the icon color to the given color unless `mdc-button-icon-color`\n/// is also used.\n/// @param {Color} $color-or-map - The desired ink color, specified either\n///     as a flat value or a map of colors with states\n///     {default, hover, focus, pressed, disabled} as keys.\n///\n@mixin ink-color($color-or-map, $query: feature-targeting.all()) {\n  &:not(:disabled) {\n    @include _ink-color(state.get-default-state($color-or-map), $query: $query);\n\n    &:hover {\n      @include _ink-color(state.get-hover-state($color-or-map), $query: $query);\n    }\n\n    @include ripple-theme.focus() {\n      @include _ink-color(state.get-focus-state($color-or-map), $query: $query);\n    }\n\n    @include ripple-theme.active {\n      @include _ink-color(\n        state.get-pressed-state($color-or-map),\n        $query: $query\n      );\n    }\n  }\n\n  &:disabled {\n    @include _ink-color(\n      state.get-disabled-state($color-or-map),\n      $query: $query\n    );\n  }\n}\n\n///\n/// Sets the ink color to the given color for a disabled button,\n/// and sets the icon color to the given color unless `mdc-button-icon-color`\n/// is also used.\n/// @param {Color} $color - The desired ink color.\n/// @deprecated - call `ink-color` instead with `disabled` as a map key.\n///\n@mixin disabled-ink-color($color, $query: feature-targeting.all()) {\n  @include ink-color(\n    (\n      disabled: $color,\n    ),\n    $query: $query\n  );\n}\n\n///\n/// Sets density scale for button.\n///\n/// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values `-3`,\n///     `-2`, `-1`, `0`.\n///\n@mixin density($density-scale, $query: feature-targeting.all()) {\n  $height: density-functions.prop-value(\n    $density-config: $density-config,\n    $density-scale: $density-scale,\n    $property-name: height,\n  );\n\n  @include height($height, $query: $query);\n\n  @if $density-scale != 0 {\n    @include _touch-target-reset($query: $query);\n  }\n}\n\n///\n/// Resets touch target-related styles. This is called from the density mixin to\n/// automatically remove the increased touch target, since dense components\n/// don't have the same default a11y requirements.\n/// @access private\n///\n@mixin _touch-target-reset($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  .mdc-button__touch {\n    @include feature-targeting.targets($feat-structure) {\n      // Do not set display: none in case the touch target is <a> element.\n      height: 100%;\n    }\n  }\n}\n\n///\n/// Sets custom height for button.\n/// @param {Number} $height - Height of button in `px`.\n///\n@mixin height($height, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    @include theme.property(height, $height);\n  }\n}\n\n@mixin shape-radius(\n  $radius,\n  $rtl-reflexive: false,\n  $density-scale: $density-scale,\n  $query: feature-targeting.all()\n) {\n  $height: density-functions.prop-value(\n    $density-config: $density-config,\n    $density-scale: $density-scale,\n    $property-name: height,\n  );\n\n  @include _shape-radius-with-height($radius, $rtl-reflexive, $height, $query);\n}\n\n@mixin _shape-radius-with-height(\n  $radius,\n  $rtl-reflexive: false,\n  $height: $height,\n  $query: feature-targeting.all()\n) {\n  @include shape-mixins.radius(\n    $radius,\n    $rtl-reflexive,\n    $component-height: $height,\n    $query: $query\n  );\n\n  #{button-ripple.$ripple-target} {\n    @include shape-mixins.radius(\n      $radius,\n      $rtl-reflexive,\n      $component-height: $height,\n      $query: $query\n    );\n  }\n}\n\n///\n/// Sets horizontal padding to the given number.\n/// @param {Number} $padding\n/// @param {Number} $padding-icon [null] For buttons with an icon, the\n///     horizontal padding on the side with the icon, if different from\n///     $padding.\n///\n@mixin horizontal-padding(\n  $padding,\n  $padding-icon: null,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    // $padding should be a single value; enforce it by specifying all 4 sides in the output\n    padding: 0 $padding 0 $padding;\n  }\n\n  @if $padding-icon != null {\n    &.mdc-button--icon-trailing {\n      @include feature-targeting.targets($feat-structure) {\n        // $padding should be a single value; enforce it by specifying all 4\n        // sides in the output.\n        padding: 0 $padding-icon 0 $padding;\n      }\n    }\n\n    &.mdc-button--icon-leading {\n      @include feature-targeting.targets($feat-structure) {\n        // $padding should be a single value; enforce it by specifying all 4\n        // sides in the output.\n        padding: 0 $padding 0 $padding-icon;\n      }\n    }\n  }\n}\n\n///\n/// Sets the button label to overflow as ellipsis\n///\n@mixin label-overflow-ellipsis($query: feature-targeting.all()) {\n  .mdc-button__label {\n    @include typography.overflow-ellipsis($query: $query);\n  }\n}\n\n///\n/// Add a visible outline to the button in high contrast mode.\n///\n@mixin outline-hcm-shim($query: feature-targeting.all()) {\n  &::before {\n    @include dom-mixins.transparent-border($query: $query);\n  }\n}\n\n///\n/// Includes ad-hoc high contrast mode support.\n/// @deprecated Use `outline-hcm-shim` for the outline button. The focus ring\n///     is provided by default.\n///\n@mixin high-contrast-mode-shim($query: feature-targeting.all()) {\n  @include outline-hcm-shim($query: $query);\n\n  // Link buttons apply focus to the contained link. Focus is indicated via the\n  // link since focus-within isn't supported by IE.\n  & .mdc-button__link:focus,\n  &:focus {\n    &::before {\n      @include focus-ring.focus-ring($query: $query);\n    }\n  }\n}\n\n///\n/// Sets the container fill color to the given color. This mixin should be\n/// wrapped in a selector that qualifies button state.\n/// @access private\n///\n@mixin _container-fill-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @if $color {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(background-color, $color);\n    }\n  }\n}\n\n///\n/// Sets the icon color to the given color. This mixin should be\n/// wrapped in a selector that qualifies button state.\n/// @access private\n///\n@mixin _icon-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @if $color {\n    .mdc-button__icon {\n      @include feature-targeting.targets($feat-color) {\n        @include theme.property(color, $color);\n      }\n    }\n  }\n}\n\n@mixin _icon-size($size-px, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @if $size-px != null {\n    $size-rem: typography.px-to-rem($size-px);\n    .mdc-button__icon {\n      @include feature-targeting.targets($feat-structure) {\n        @include theme.property(font-size, $size-rem);\n        @include theme.property(width, $size-rem);\n        @include theme.property(height, $size-rem);\n      }\n    }\n  }\n}\n\n///\n/// Sets the ink color to the given color. This mixin should be\n/// wrapped in a selector that qualifies button state.\n/// @access private\n///\n@mixin _ink-color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @if $color {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(color, $color);\n    }\n  }\n}\n\n@mixin _states-colors($color-map, $query: feature-targeting.all()) {\n  $hover: map.get($color-map, hover);\n\n  $hover-value: if(\n    custom-properties.is-custom-prop($hover),\n    custom-properties.get-fallback($hover),\n    $hover\n  );\n  // TODO(b/191298796): support focused & pressed key colors.\n\n  @if $hover-value != null {\n    @include ripple-theme.states-base-color(\n      $color: $hover,\n      $ripple-target: button-ripple.$ripple-target,\n      $query: $query\n    );\n  }\n}\n\n@mixin _label-text-typography(\n  $typography-map,\n  $query: feature-targeting.all()\n) {\n  $feat-typography: feature-targeting.create-target($query, typography);\n\n  $family: map.get($typography-map, family);\n  $size: map.get($typography-map, size);\n  $tracking: map.get($typography-map, tracking);\n  $weight: map.get($typography-map, weight);\n  $transform: map.get($typography-map, transform);\n\n  @include feature-targeting.targets($feat-typography) {\n    @include theme.property(font-family, $family);\n    @include theme.property(font-size, $size);\n    @include theme.property(letter-spacing, $tracking);\n    @include theme.property(font-weight, $weight);\n    @include theme.property(text-transform, $transform);\n  }\n}\n\n@mixin _elevation(\n  $resolver,\n  $elevation-map,\n  $shadow-color,\n  $query: feature-targeting.all()\n) {\n  $elevation-resolver: map.get($resolver, elevation);\n\n  @if $shadow-color {\n    $default: state.get-default-state($elevation-map);\n    @if $default != null {\n      @include elevation-theme.with-resolver(\n        $elevation-resolver,\n        $elevation: $default,\n        $shadow-color: $shadow-color,\n        $query: $query\n      );\n    }\n\n    $focus: state.get-focus-state($elevation-map);\n    @if $focus != null {\n      @include ripple-theme.focus {\n        @include elevation-theme.with-resolver(\n          $elevation-resolver,\n          $elevation: $focus,\n          $shadow-color: $shadow-color,\n          $query: $query\n        );\n      }\n    }\n\n    $hover: state.get-hover-state($elevation-map);\n    @if $hover != null {\n      &:hover {\n        @include elevation-theme.with-resolver(\n          $elevation-resolver,\n          $elevation: $hover,\n          $shadow-color: $shadow-color,\n          $query: $query\n        );\n      }\n    }\n\n    $pressed: state.get-pressed-state($elevation-map);\n    @if $pressed != null {\n      @include ripple-theme.active {\n        @include elevation-theme.with-resolver(\n          $elevation-resolver,\n          $elevation: $pressed,\n          $shadow-color: $shadow-color,\n          $query: $query\n        );\n      }\n    }\n\n    $disabled: state.get-disabled-state($elevation-map);\n    @if $disabled != null {\n      &:disabled {\n        @include elevation-theme.with-resolver(\n          $elevation-resolver,\n          $elevation: $disabled,\n          $shadow-color: $shadow-color,\n          $query: $query\n        );\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// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:color';\n@use 'sass:map';\n@use '@material/animation/functions' as functions2;\n@use '@material/animation/variables' as variables2;\n@use '@material/base/mixins' as base-mixins;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/theme/css';\n@use '@material/theme/custom-properties';\n@use '@material/theme/theme';\n@use '@material/theme/keys';\n@use '@material/theme/shadow-dom';\n@use '@material/theme/theme-color';\n\n$custom-property-prefix: 'ripple';\n\n$fade-in-duration: 75ms !default;\n$fade-out-duration: 150ms !default;\n$translate-duration: 225ms !default;\n$states-wash-duration: 15ms !default;\n\n// Notes on states:\n// * focus takes precedence over hover (i.e. if an element is both focused and hovered, only focus value applies)\n// * press state applies to a separate pseudo-element, so it has an additive effect on top of other states\n// * selected/activated are applied additively to hover/focus via calculations at preprocessing time\n\n$dark-ink-opacities: (\n  hover: 0.04,\n  focus: 0.12,\n  press: 0.12,\n  selected: 0.08,\n  activated: 0.12,\n) !default;\n\n$light-ink-opacities: (\n  hover: 0.08,\n  focus: 0.24,\n  press: 0.24,\n  selected: 0.16,\n  activated: 0.24,\n) !default;\n\n// Legacy\n\n$pressed-dark-ink-opacity: 0.16 !default;\n$pressed-light-ink-opacity: 0.32 !default;\n\n// State selector variables used for state selector mixins below.\n$_hover-selector: '&:hover';\n$_focus-selector: '&.mdc-ripple-upgraded--background-focused, &:not(.mdc-ripple-upgraded):focus';\n$_active-selector: '&:not(:disabled):active';\n\n$light-theme: (\n  focus-state-layer-color: theme-color.$on-surface,\n  focus-state-layer-opacity: map.get($dark-ink-opacities, focus),\n  hover-state-layer-color: theme-color.$on-surface,\n  hover-state-layer-opacity: map.get($dark-ink-opacities, hover),\n  pressed-state-layer-color: theme-color.$on-surface,\n  pressed-state-layer-opacity: map.get($dark-ink-opacities, press),\n);\n\n@mixin theme($theme) {\n  @include keys.declare-custom-properties(\n    $theme,\n    $prefix: $custom-property-prefix\n  );\n\n  @if shadow-dom.$css-selector-fallback-declarations {\n    .mdc-ripple-surface {\n      @include theme-styles($theme);\n    }\n  }\n}\n\n$_ripple-theme: (\n  hover-state-layer-color: null,\n  focus-state-layer-color: null,\n  pressed-state-layer-color: null,\n  hover-state-layer-opacity: null,\n  focus-state-layer-opacity: null,\n  pressed-state-layer-opacity: null,\n);\n\n@mixin theme-styles($theme, $ripple-target: '&') {\n  $theme: keys.create-theme-properties(\n    $theme,\n    $prefix: $custom-property-prefix\n  );\n\n  // TODO(b/191298796): Support states layer color for every interactive states.\n  // Use only hover state layer color, ignoring focus and pressed color.\n  @include internal-theme-styles($theme, $ripple-target);\n}\n\n@mixin internal-theme-styles($theme, $ripple-target: '&') {\n  @include theme.validate-theme-styles($_ripple-theme, $theme);\n\n  @include states-base-color(\n    map.get($theme, hover-state-layer-color),\n    $ripple-target: $ripple-target\n  );\n  @include states-hover-opacity(\n    map.get($theme, hover-state-layer-opacity),\n    $ripple-target: $ripple-target\n  );\n  @include states-focus-opacity(\n    map.get($theme, focus-state-layer-opacity),\n    $ripple-target: $ripple-target\n  );\n  @include states-press-opacity(\n    map.get($theme, pressed-state-layer-opacity),\n    $ripple-target: $ripple-target\n  );\n}\n\n@mixin states-base-color(\n  $color,\n  $query: feature-targeting.all(),\n  $ripple-target: '&'\n) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @if $color {\n    @if not custom-properties.is-custom-prop($color) {\n      $color: custom-properties.create(\n        ripple-color,\n        theme-color.get-custom-property($color)\n      );\n    }\n\n    #{$ripple-target}::before,\n    #{$ripple-target}::after {\n      @include feature-targeting.targets($feat-color) {\n        @include theme.property(background-color, $color);\n      }\n    }\n  }\n}\n\n///\n/// Customizes ripple opacities in `hover`, `focus`, or `press` states\n/// @param {map} $opacity-map - map specifying custom opacity of zero or more states\n/// @param {bool} $has-nested-focusable-element - whether the component contains a focusable element in the root\n/// @param {string} $ripple-target - the optional selector for the ripple element\n///\n@mixin states-opacities(\n  $opacity-map: (),\n  $has-nested-focusable-element: false,\n  $ripple-target: '&',\n  $query: feature-targeting.all()\n) {\n  // Ensure sufficient specificity to override base state opacities\n  @if map.get($opacity-map, hover) {\n    @include states-hover-opacity(\n      map.get($opacity-map, hover),\n      $ripple-target: $ripple-target,\n      $query: $query\n    );\n  }\n\n  @if map.get($opacity-map, focus) {\n    @include states-focus-opacity(\n      map.get($opacity-map, focus),\n      $ripple-target: $ripple-target,\n      $has-nested-focusable-element: $has-nested-focusable-element,\n      $query: $query\n    );\n  }\n\n  @if map.get($opacity-map, press) {\n    @include states-press-opacity(\n      map.get($opacity-map, press),\n      $ripple-target: $ripple-target,\n      $query: $query\n    );\n  }\n}\n\n@mixin states-hover-opacity(\n  $opacity,\n  $query: feature-targeting.all(),\n  $ripple-target: '&'\n) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @if $opacity and not custom-properties.is-custom-prop($opacity) {\n    $opacity: custom-properties.create(ripple-hover-opacity, $opacity);\n  }\n\n  // Background wash styles, for both CSS-only and upgraded stateful surfaces\n  &:hover,\n  &.mdc-ripple-surface--hover {\n    @include states-background-selector($ripple-target) {\n      // Opacity falls under color because the chosen opacity is color-dependent in typical usage\n      @include feature-targeting.targets($feat-color) {\n        @include theme.property(opacity, $opacity);\n      }\n    }\n  }\n}\n\n@mixin states-focus-opacity(\n  $opacity,\n  $has-nested-focusable-element: false,\n  $query: feature-targeting.all(),\n  $ripple-target: '&'\n) {\n  // Focus overrides hover by reusing the ::before pseudo-element.\n  // :focus-within generally works on non-MS browsers and matches when a *child* of the element has focus.\n  // It is useful for cases where a component has a focusable element within the root node, e.g. text field,\n  // but undesirable in general in case of nested stateful components.\n  // We use a modifier class for JS-enabled surfaces to support all use cases in all browsers.\n  @if $has-nested-focusable-element {\n    // JS-enabled selectors.\n    &.mdc-ripple-upgraded--background-focused,\n    // CSS-only selectors.\n    &:not(.mdc-ripple-upgraded):focus,\n    &:focus-within {\n      @include states-background-selector($ripple-target) {\n        @include states-focus-opacity-properties_(\n          $opacity: $opacity,\n          $query: $query\n        );\n      }\n    }\n  } @else {\n    // JS-enabled selectors.\n    &.mdc-ripple-upgraded--background-focused,\n    // CSS-only selectors.\n    &:not(.mdc-ripple-upgraded):focus {\n      @include states-background-selector($ripple-target) {\n        @include states-focus-opacity-properties_(\n          $opacity: $opacity,\n          $query: $query\n        );\n      }\n    }\n  }\n}\n\n@mixin states-focus-opacity-properties_($opacity, $query) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n  // Opacity falls under color because the chosen opacity is color-dependent in typical usage\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @if $opacity {\n    @if not custom-properties.is-custom-prop($opacity) {\n      $opacity: custom-properties.create(ripple-focus-opacity, $opacity);\n    }\n\n    // Note that this duration is only effective on focus, not blur\n    @include feature-targeting.targets($feat-animation) {\n      transition-duration: 75ms;\n    }\n\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(opacity, $opacity);\n    }\n  }\n}\n\n@mixin states-press-opacity(\n  $opacity,\n  $query: feature-targeting.all(),\n  $ripple-target: '&'\n) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n  $feat-color: feature-targeting.create-target($query, color);\n\n  // Styles for non-upgraded (CSS-only) stateful surfaces\n\n  @if $opacity {\n    @if not custom-properties.is-custom-prop($opacity) {\n      $opacity: custom-properties.create(ripple-press-opacity, $opacity);\n    }\n\n    &:not(.mdc-ripple-upgraded) {\n      // Apply press additively by using the ::after pseudo-element\n      #{$ripple-target}::after {\n        @include feature-targeting.targets($feat-animation) {\n          transition: opacity $fade-out-duration linear;\n        }\n      }\n\n      &:active {\n        #{$ripple-target}::after {\n          @include feature-targeting.targets($feat-animation) {\n            transition-duration: $fade-in-duration;\n          }\n\n          // Opacity falls under color because the chosen opacity is color-dependent in typical usage\n          @include feature-targeting.targets($feat-color) {\n            @include theme.property(opacity, $opacity);\n          }\n        }\n      }\n    }\n\n    &.mdc-ripple-upgraded {\n      @include feature-targeting.targets($feat-color) {\n        // Upgraded ripple should always emit custom property, regardless of\n        // configuration, since ripple itself feature detects custom property\n        // support at runtime.\n        @include custom-properties.configure($emit-custom-properties: true) {\n          @include theme.property(\n            custom-properties.create(ripple-fg-opacity, $opacity)\n          );\n        }\n      }\n    }\n  }\n}\n\n// Simple mixin for base states which automatically selects opacity values based on whether the ink color is\n// light or dark.\n@mixin states(\n  $color: theme-color.prop-value(on-surface),\n  $has-nested-focusable-element: false,\n  $query: feature-targeting.all(),\n  $ripple-target: '&',\n  $opacity-map: null\n) {\n  @include states-interactions_(\n    $color: $color,\n    $has-nested-focusable-element: $has-nested-focusable-element,\n    $query: $query,\n    $ripple-target: $ripple-target,\n    $opacity-map: $opacity-map\n  );\n}\n\n// Simple mixin for activated states which automatically selects opacity values based on whether the ink color is\n// light or dark.\n@mixin states-activated(\n  $color,\n  $has-nested-focusable-element: false,\n  $query: feature-targeting.all(),\n  $ripple-target: '&'\n) {\n  $feat-color: feature-targeting.create-target($query, color);\n  $activated-opacity: states-opacity($color, activated);\n\n  &--activated {\n    // Stylelint seems to think that '&' qualifies as a type selector here?\n    @include states-background-selector($ripple-target) {\n      // Opacity falls under color because the chosen opacity is color-dependent.\n      @include feature-targeting.targets($feat-color) {\n        @include theme.property(\n          opacity,\n          custom-properties.create(\n            --mdc-ripple-activated-opacity,\n            $activated-opacity\n          )\n        );\n      }\n    }\n\n    @include states-interactions_(\n      $color: $color,\n      $has-nested-focusable-element: $has-nested-focusable-element,\n      $opacity-modifier: $activated-opacity,\n      $query: $query,\n      $ripple-target: $ripple-target\n    );\n  }\n}\n\n// Simple mixin for selected states which automatically selects opacity values based on whether the ink color is\n// light or dark.\n@mixin states-selected(\n  $color,\n  $has-nested-focusable-element: false,\n  $query: feature-targeting.all(),\n  $ripple-target: '&'\n) {\n  $feat-color: feature-targeting.create-target($query, color);\n  $selected-opacity: states-opacity($color, selected);\n\n  &--selected {\n    @include states-background-selector($ripple-target) {\n      // Opacity falls under color because the chosen opacity is color-dependent.\n      @include feature-targeting.targets($feat-color) {\n        @include theme.property(\n          opacity,\n          custom-properties.create(\n            --mdc-ripple-selected-opacity,\n            $selected-opacity\n          )\n        );\n      }\n    }\n\n    @include states-interactions_(\n      $color: $color,\n      $has-nested-focusable-element: $has-nested-focusable-element,\n      $opacity-modifier: $selected-opacity,\n      $query: $query,\n      $ripple-target: $ripple-target\n    );\n  }\n}\n\n@mixin states-interactions_(\n  $color,\n  $has-nested-focusable-element,\n  $opacity-modifier: 0,\n  $query: feature-targeting.all(),\n  $ripple-target: '&',\n  $opacity-map: null\n) {\n  @include target-selector($ripple-target) {\n    @include states-base-color($color, $query);\n  }\n\n  @if $opacity-map == null {\n    $opacity-map: (\n      hover: states-opacity($color, hover) + $opacity-modifier,\n      focus: states-opacity($color, focus) + $opacity-modifier,\n      press: states-opacity($color, press) + $opacity-modifier,\n    );\n  }\n\n  @include states-opacities(\n    $opacity-map,\n    $has-nested-focusable-element: $has-nested-focusable-element,\n    $ripple-target: $ripple-target,\n    $query: $query\n  );\n}\n\n// Wraps content in the `ripple-target` selector if it exists.\n@mixin target-selector($ripple-target: '&') {\n  @if $ripple-target == '&' {\n    @content;\n  } @else {\n    #{$ripple-target} {\n      @content;\n    }\n  }\n}\n\n/// Selector for hover, active and focus states.\n@mixin states-selector() {\n  #{$_hover-selector},\n  #{$_focus-selector},\n  #{$_active-selector} {\n    @content;\n  }\n}\n\n@mixin hover() {\n  #{$_hover-selector} {\n    @content;\n  }\n}\n\n// Selector for focus state. Using ':not(.mdc-ripple-upgraded)' to continue\n// applying focus styles on JS-disabled components, and control focus\n// on JS-enabled components with '.mdc-ripple-upgraded--background-focused'.\n@mixin focus() {\n  #{$_focus-selector} {\n    @content;\n  }\n}\n\n// Selector for active state. Using `:active:active` to override focus styles.\n@mixin pressed() {\n  #{$_active-selector} {\n    @content;\n  }\n}\n\n// @deprecated Use `pressed()` mixin - renamed for consistency.\n@mixin active() {\n  @include pressed() {\n    @content;\n  }\n}\n\n/// Keep the ripple (State overlay) behind the content.\n@mixin behind-content(\n  $ripple-target,\n  $content-root-selector: '&',\n  $query: feature-targeting.all()\n) {\n  // Needed for IE11. Without this, IE11 renders the state layer completely\n  // underneath the container, making it invisible.\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  #{$content-root-selector} {\n    @include feature-targeting.targets($feat-structure) {\n      z-index: 0;\n    }\n  }\n\n  #{$ripple-target}::before,\n  #{$ripple-target}::after {\n    @include feature-targeting.targets($feat-structure) {\n      @include theme.property(\n        z-index,\n        custom-properties.create(--mdc-ripple-z-index, -1)\n      );\n    }\n  }\n}\n\n@function states-opacity($color, $state) {\n  $color-value: theme-color.prop-value($color);\n  $opacity-map: if(\n    theme-color.tone($color-value) == 'light',\n    $light-ink-opacities,\n    $dark-ink-opacities\n  );\n\n  @if not map.has-key($opacity-map, $state) {\n    @error \"Invalid state: '#{$state}'. Choose one of: #{map.keys($opacity-map)}\";\n  }\n\n  @return map.get($opacity-map, $state);\n}\n\n@mixin states-background-selector($ripple-target) {\n  #{$ripple-target}::before {\n    @content;\n  }\n}\n"],"sourceRoot":""}