@material/menu/dist/mdc.menu.min.css.map

The Material Components for the web menu component

{"version":3,"sources":["webpack:///./packages/mdc-menu/mdc-menu.scss","webpack:///./packages/material-components-web/node_modules/@material/animation/_animation.scss","webpack:///./packages/material-components-web/node_modules/@material/elevation/_elevation.scss","webpack:///./packages/material-components-web/node_modules/@material/theme/_css.scss","webpack:///./packages/mdc-menu/_mixins.scss","webpack:///./packages/material-components-web/node_modules/@material/list/_mixins.scss","webpack:///./packages/material-components-web/node_modules/@material/ripple/_ripple-theme.scss","webpack:///./packages/mdc-menu/_variables.scss","webpack:///./packages/material-components-web/node_modules/@material/elevation/_elevation-theme.scss","webpack:///./packages/material-components-web/node_modules/@material/rtl/_rtl.scss"],"names":[],"mappings":";;;;;;;AAgTE,2CACE,KACE,8DC3R2B,CD2R3B,sDC3R2B,CDgS3B,oJAGF,GACE,yMAXJ,mCACE,KACE,8DC3R2B,CD2R3B,sDC3R2B,CDgS3B,oJAGF,GACE,yMAKJ,4CACE,KACE,0EACA,UAGF,GACE,yCAPJ,oCACE,KACE,0EACA,UAGF,GACE,yCAIJ,6CACE,KACE,0EACA,wCAGF,GACE,WAPJ,qCACE,KACE,0EACA,wCAGF,GACE,WEtRJ,uBAGM,kBACA,sBACA,oBCCF,UAYF,gDDFI,sDCVF,sBAYF,0DC/BF,UDmBI,gBAYF,2CEqlBF,0CFrlBE,0BE2kBF,6CF3kBE,0BGqdF,iFF/YM,WGlHY,CDigBlB,sEFxYM,WGzHY,CHyBhB,+BDmBA,0BCZA,mDImPA,kBAmBF,iGL1PE,uBKgQI,MAEA,OJxQJ,uCAEI,aAIJ,oCAEI,qFAIJ,8CAEI,YAKJ,6IAGI,oBAON,2BAEI,UACA,kBAGF,qDD7BA,qCMEE,6HNFF,qCCwCA,2DDxCA,wBC4CI,aACA,kBAEA,QACA,8DK9CF,yINFF,wBCuDF,yDAEI,e","file":"mdc.menu.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// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:math';\n@use 'sass:color';\n@use 'sass:map';\n@use '@material/animation/functions' as functions2;\n@use '@material/animation/variables' as variables2;\n@use '@material/base/mixins' as base-mixins;\n@use '@material/theme/custom-properties';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/rtl/rtl';\n@use '@material/theme/theme';\n@use './ripple-theme';\n\n@mixin core-styles($query: feature-targeting.all()) {\n  @include static-styles($query: $query);\n\n  .mdc-ripple-surface {\n    @include ripple-theme.states($query: $query);\n  }\n}\n\n@mixin static-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-ripple-surface {\n    @include surface($query: $query);\n    @include radius-bounded($query: $query);\n    @include surface-styles($query: $query);\n  }\n\n  .mdc-ripple-surface[data-mdc-ripple-is-unbounded],\n  .mdc-ripple-upgraded--unbounded {\n    @include radius-unbounded($query: $query);\n    @include unbounded-styles($query: $query);\n  }\n}\n\n/// Sets all states (including hover, focus, press, activated and selected) with\n/// given color as base color.\n///\n/// This mixin is for internal use only. Use `ripple-theme.states($color)` mixin\n/// to set interactive states (hover, focus & press) color.\n///\n/// @param {Color|String} $color - Target base color. Can be valid CSS color or\n///     a color string literal (i.e., `primary`, `secondary`, etc).\n@mixin states-for-color($color, $query: feature-targeting.all()) {\n  @include ripple-theme.states($color, $query: $query);\n  @include ripple-theme.states-activated($color, $query: $query);\n  @include ripple-theme.states-selected($color, $query: $query);\n}\n\n@mixin surface-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    position: relative;\n    outline: none;\n    overflow: hidden;\n  }\n}\n\n@mixin unbounded-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  @include feature-targeting.targets($feat-structure) {\n    overflow: visible;\n  }\n}\n\n@mixin common($query: feature-targeting.all()) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n\n  // Ensure that styles needed by any component using MDC Ripple are emitted, but only once.\n  // (Every component using MDC Ripple imports these mixins, but doesn't necessarily import\n  // mdc-ripple.scss.)\n  @include feature-targeting.targets($feat-animation) {\n    @include base-mixins.emit-once('mdc-ripple/common/animation') {\n      @include keyframes_;\n    }\n  }\n}\n\n@mixin surface(\n  $query: feature-targeting.all(),\n  $ripple-target: '&',\n  $include-will-change: true // TODO(b/151931961): Remove once resolved\n) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    --mdc-ripple-fg-size: 0;\n    --mdc-ripple-left: 0;\n    --mdc-ripple-top: 0;\n    --mdc-ripple-fg-scale: 1;\n    --mdc-ripple-fg-translate-end: 0;\n    --mdc-ripple-fg-translate-start: 0;\n\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n    // TODO(b/151931961): Remove the following block once resolved\n    @if $include-will-change {\n      will-change: transform, opacity;\n    }\n  }\n\n  #{$ripple-target}::before,\n  #{$ripple-target}::after {\n    @include feature-targeting.targets($feat-structure) {\n      position: absolute;\n      border-radius: 50%;\n      opacity: 0;\n      pointer-events: none;\n      content: '';\n    }\n  }\n\n  #{$ripple-target}::before {\n    @include feature-targeting.targets($feat-animation) {\n      // Also transition background-color to avoid unnatural color flashes when toggling activated/selected state\n      transition: opacity ripple-theme.$states-wash-duration linear,\n        background-color ripple-theme.$states-wash-duration linear;\n    }\n\n    @include feature-targeting.targets($feat-structure) {\n      // Ensure that the ripple wash for hover/focus states is displayed on top of positioned child elements\n      @include theme.property(\n        z-index,\n        custom-properties.create(--mdc-ripple-z-index, 1)\n      );\n    }\n  }\n\n  #{$ripple-target}::after {\n    @include feature-targeting.targets($feat-structure) {\n      @include theme.property(\n        z-index,\n        custom-properties.create(--mdc-ripple-z-index, 0)\n      );\n    }\n  }\n\n  // Common styles for upgraded surfaces (some of these depend on custom properties set via JS or other mixins)\n\n  &.mdc-ripple-upgraded {\n    #{$ripple-target}::before {\n      @include feature-targeting.targets($feat-structure) {\n        transform: scale(var(--mdc-ripple-fg-scale, 1));\n      }\n    }\n\n    #{$ripple-target}::after {\n      @include feature-targeting.targets($feat-structure) {\n        top: 0;\n        @include rtl.ignore-next-line();\n        left: 0;\n        transform: scale(0);\n        transform-origin: center center;\n      }\n    }\n  }\n\n  &.mdc-ripple-upgraded--unbounded {\n    #{$ripple-target}::after {\n      @include feature-targeting.targets($feat-structure) {\n        top: var(--mdc-ripple-top, 0);\n        @include rtl.ignore-next-line();\n        left: var(--mdc-ripple-left, 0);\n      }\n    }\n  }\n\n  &.mdc-ripple-upgraded--foreground-activation {\n    #{$ripple-target}::after {\n      @include feature-targeting.targets($feat-animation) {\n        animation: mdc-ripple-fg-radius-in ripple-theme.$translate-duration\n            forwards,\n          mdc-ripple-fg-opacity-in ripple-theme.$fade-in-duration forwards;\n      }\n    }\n  }\n\n  &.mdc-ripple-upgraded--foreground-deactivation {\n    #{$ripple-target}::after {\n      @include feature-targeting.targets($feat-animation) {\n        animation: mdc-ripple-fg-opacity-out ripple-theme.$fade-out-duration;\n      }\n\n      @include feature-targeting.targets($feat-structure) {\n        // Retain transform from mdc-ripple-fg-radius-in activation\n        transform: translate(var(--mdc-ripple-fg-translate-end, 0))\n          scale(var(--mdc-ripple-fg-scale, 1));\n      }\n    }\n  }\n}\n\n@mixin radius-bounded(\n  $radius: 100%,\n  $query: feature-targeting.all(),\n  $ripple-target: '&'\n) {\n  $feat-struture: feature-targeting.create-target($query, structure);\n\n  #{$ripple-target}::before,\n  #{$ripple-target}::after {\n    @include feature-targeting.targets($feat-struture) {\n      top: calc(50% - #{$radius});\n      @include rtl.ignore-next-line();\n      left: calc(50% - #{$radius});\n      width: $radius * 2;\n      height: $radius * 2;\n    }\n  }\n\n  &.mdc-ripple-upgraded {\n    #{$ripple-target}::after {\n      @include feature-targeting.targets($feat-struture) {\n        width: var(--mdc-ripple-fg-size, $radius);\n        height: var(--mdc-ripple-fg-size, $radius);\n      }\n    }\n  }\n}\n\n@mixin radius-unbounded(\n  $radius: 100%,\n  $query: feature-targeting.all(),\n  $ripple-target: '&'\n) {\n  $feat-struture: feature-targeting.create-target($query, structure);\n\n  #{$ripple-target}::before,\n  #{$ripple-target}::after {\n    @include feature-targeting.targets($feat-struture) {\n      top: calc(50% - #{math.div($radius, 2)});\n      @include rtl.ignore-next-line();\n      left: calc(50% - #{math.div($radius, 2)});\n      width: $radius;\n      height: $radius;\n    }\n  }\n\n  &.mdc-ripple-upgraded {\n    #{$ripple-target}::before,\n    #{$ripple-target}::after {\n      @include feature-targeting.targets($feat-struture) {\n        top: var(--mdc-ripple-top, calc(50% - #{math.div($radius, 2)}));\n        @include rtl.ignore-next-line();\n        left: var(--mdc-ripple-left, calc(50% - #{math.div($radius, 2)}));\n        width: var(--mdc-ripple-fg-size, $radius);\n        height: var(--mdc-ripple-fg-size, $radius);\n      }\n    }\n\n    #{$ripple-target}::after {\n      @include feature-targeting.targets($feat-struture) {\n        width: var(--mdc-ripple-fg-size, $radius);\n        height: var(--mdc-ripple-fg-size, $radius);\n      }\n    }\n  }\n}\n\n// Common styles for a ripple target element.\n// Used for components which have an inner ripple target element.\n@mixin target-common($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    // Necessary for clicks on other inner elements (e.g. close icon in chip)\n    // to go through.\n    pointer-events: none;\n  }\n}\n\n@mixin keyframes_ {\n  @keyframes mdc-ripple-fg-radius-in {\n    from {\n      animation-timing-function: variables2.$standard-curve-timing-function;\n      // NOTE: For these keyframes, we do not need custom property fallbacks because they are only\n      // used in conjunction with `.mdc-ripple-upgraded`. Since MDCRippleFoundation checks to ensure\n      // that custom properties are supported within the browser before adding this class, we can\n      // safely use them without a fallback.\n      transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);\n    }\n\n    to {\n      transform: translate(var(--mdc-ripple-fg-translate-end, 0))\n        scale(var(--mdc-ripple-fg-scale, 1));\n    }\n  }\n\n  @keyframes mdc-ripple-fg-opacity-in {\n    from {\n      animation-timing-function: linear;\n      opacity: 0;\n    }\n\n    to {\n      opacity: var(--mdc-ripple-fg-opacity, 0);\n    }\n  }\n\n  @keyframes mdc-ripple-fg-opacity-out {\n    from {\n      animation-timing-function: linear;\n      opacity: var(--mdc-ripple-fg-opacity, 0);\n    }\n\n    to {\n      opacity: 0;\n    }\n  }\n}\n","//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n$deceleration-curve-timing-function: cubic-bezier(0, 0, 0.2, 1) !default;\n$standard-curve-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default;\n$acceleration-curve-timing-function: cubic-bezier(0.4, 0, 1, 1) !default;\n$sharp-curve-timing-function: cubic-bezier(0.4, 0, 0.6, 1) !default;\n\n@function enter($name, $duration, $delay: 0ms) {\n  @return $name $duration $delay $deceleration-curve-timing-function;\n}\n\n@function exit-permanent($name, $duration, $delay: 0ms) {\n  @return $name $duration $delay $acceleration-curve-timing-function;\n}\n\n@function exit-temporary($name, $duration, $delay: 0ms) {\n  @return $name $duration $delay $sharp-curve-timing-function;\n}\n\n@function standard($name, $duration, $delay: 0ms) {\n  @return $name $duration $delay $standard-curve-timing-function;\n}\n\n@function linear($name, $duration, $delay: 0ms) {\n  @return $name $duration $delay linear;\n}\n","//\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// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/theme/custom-properties';\n@use '@material/base/mixins' as base-mixins;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/theme/theme';\n@use '@material/theme/theme-color';\n@use './elevation-theme';\n\n@mixin core-styles($query: feature-targeting.all()) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @for $z-value from 0 through 24 {\n    .mdc-elevation--z#{$z-value} {\n      @include elevation-theme.elevation($z-value, $query: $query);\n    }\n  }\n\n  .mdc-elevation-transition {\n    @include feature-targeting.targets($feat-animation) {\n      transition: elevation-theme.transition-value();\n    }\n\n    @include feature-targeting.targets($feat-structure) {\n      will-change: elevation-theme.$property;\n    }\n  }\n}\n\n///\n/// Called once per application to set up the global default elevation styles.\n///\n@mixin overlay-common($query: feature-targeting.all()) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-elevation-overlay {\n    @include feature-targeting.targets($feat-structure) {\n      @include base-mixins.emit-once('mdc-elevation/common/structure') {\n        position: absolute;\n        border-radius: inherit;\n        pointer-events: none;\n\n        @include theme.property(\n          opacity,\n          custom-properties.create(--mdc-elevation-overlay-opacity, 0)\n        );\n      }\n    }\n\n    @include feature-targeting.targets($feat-animation) {\n      @include base-mixins.emit-once('mdc-elevation/common/animation') {\n        transition: elevation-theme.overlay-transition-value();\n      }\n    }\n\n    @include base-mixins.emit-once('mdc-elevation/common/color') {\n      $fill-color: custom-properties.create(\n        --mdc-elevation-overlay-color,\n        elevation-theme.$overlay-color\n      );\n      @include elevation-theme.overlay-fill-color($fill-color, $query: $query);\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 2018 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:math';\n@use '@material/elevation/mixins' as elevation-mixins;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/ripple/ripple-theme';\n@use '@material/rtl/rtl';\n@use '@material/list/mixins' as list-mixins;\n@use '@material/list/variables' as list-variables;\n@use '@material/ripple/ripple';\n@use '@material/theme/theme';\n@use '@material/theme/custom-properties';\n@use './menu-custom-properties';\n@use './variables';\n\n@mixin core-styles($query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include ripple.common($query); // COPYBARA_COMMENT_THIS_LINE\n  // prettier-ignore\n  @include elevation-mixins.overlay-common($query); // COPYBARA_COMMENT_THIS_LINE\n\n  // Customize the menu-surface and contained list to match the mdc-menu styles.\n  .mdc-menu {\n    @include list-mixins.deprecated-item-meta-ink-color(\n      variables.$ink-color,\n      $query\n    );\n    @include list-mixins.deprecated-item-graphic-ink-color(\n      variables.$ink-color,\n      $query\n    );\n    @include min-width(variables.$min-width, $query: $query);\n    @include open-item-opacity(variables.$open-item-opacity, $query: $query);\n    // Include mdc-deprecated-list selector to ensure list-inside-menu overrides default list styles\n    .mdc-deprecated-list {\n      @include list-mixins.deprecated-item-primary-text-ink-color(\n        variables.$ink-color,\n        $query\n      );\n    }\n\n    .mdc-deprecated-list,\n    .mdc-list {\n      @include elevation-mixins.overlay-surface-position($query: $query);\n      @include elevation-mixins.overlay-dimensions(100%, $query: $query);\n    }\n\n    .mdc-deprecated-list-divider {\n      @include feature-targeting.targets($feat-structure) {\n        margin: 8px 0;\n      }\n    }\n\n    .mdc-deprecated-list-item {\n      @include feature-targeting.targets($feat-structure) {\n        user-select: none;\n      }\n    }\n\n    .mdc-deprecated-list-item--disabled {\n      @include feature-targeting.targets($feat-structure) {\n        cursor: auto;\n      }\n    }\n\n    //stylelint-disable selector-no-qualifying-type\n    a.mdc-deprecated-list-item .mdc-deprecated-list-item__text,\n    a.mdc-deprecated-list-item .mdc-deprecated-list-item__graphic {\n      @include feature-targeting.targets($feat-structure) {\n        pointer-events: none;\n      }\n    }\n    // stylelint-enable selector-no-qualifying-type\n  }\n\n  // postcss-bem-linter: define menu\n  .mdc-menu__selection-group {\n    @include feature-targeting.targets($feat-structure) {\n      padding: 0;\n      fill: currentColor;\n    }\n\n    .mdc-deprecated-list-item {\n      @include feature-targeting.targets($feat-structure) {\n        @include rtl.reflexive-property(\n          padding,\n          56px,\n          list-variables.$deprecated-side-padding\n        );\n      }\n    }\n\n    // Extra specificity required to override `display` property on `mdc-deprecated-list-item__graphic`.\n    .mdc-menu__selection-group-icon {\n      @include feature-targeting.targets($feat-structure) {\n        @include rtl.reflexive-position(left, 16px);\n\n        display: none;\n        position: absolute;\n        // IE11 requires the icon to be vertically centered due to its absolute positioning\n        top: 50%;\n        transform: translateY(-50%);\n      }\n    }\n  }\n  // postcss-bem-linter: end\n\n  // stylelint-disable-next-line plugin/selector-bem-pattern\n  .mdc-menu-item--selected .mdc-menu__selection-group-icon {\n    @include feature-targeting.targets($feat-structure) {\n      display: inline;\n    }\n  }\n}\n\n@mixin open-item-opacity($opacity, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-menu-item--submenu-open {\n    @include ripple-theme.states-background-selector(\n      list-variables.$deprecated-ripple-target\n    ) {\n      @include feature-targeting.targets($feat-color) {\n        opacity: $opacity;\n      }\n    }\n    @include ripple-theme.states-background-selector(\n      list-variables.$deprecated-temporary-ripple-target\n    ) {\n      @include feature-targeting.targets($feat-color) {\n        opacity: $opacity;\n      }\n    }\n  }\n}\n\n@mixin width($width, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    @if math.is-unitless($width) {\n      width: $width * variables.$width-base;\n    } @else {\n      width: $width;\n    }\n  }\n}\n\n/// Sets the min-width of the menu.\n/// @param {Number} $min-width - the desired min-width.\n@mixin min-width($min-width, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include feature-targeting.targets($feat-structure) {\n    $min-width-custom-property: custom-properties.create(\n      menu-custom-properties.$min-width,\n      $min-width\n    );\n    @include theme.property(min-width, $min-width-custom-property);\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// Selector '.mdc-*' should only be used in this project.\n// stylelint-disable selector-class-pattern --\n// NOTE: this is the implementation of the aforementioned classes.\n\n@use 'sass:list';\n@use 'sass:map';\n@use '@material/density/functions' as density-functions;\n@use '@material/dom/mixins' as dom-mixins;\n@use '@material/rtl/rtl';\n@use '@material/theme/theme';\n@use '@material/shape/functions' as shape-functions;\n@use '@material/shape/mixins' as shape-mixins;\n@use '@material/ripple/ripple';\n@use '@material/ripple/ripple-theme';\n@use '@material/typography/typography';\n@use '@material/feature-targeting/feature-targeting';\n@use './variables';\n@use '@material/theme/theme-color';\n@use './evolution-mixins';\n\n@mixin deprecated-core-styles($query: feature-targeting.all()) {\n  @include deprecated-without-ripple($query);\n  @include deprecated-ripple($query);\n}\n\n// This API is intended for use by frameworks that may want to separate the\n// ripple-related styles from the other list styles. It is recommended that most\n// users use `mdc-deprecated-list-core-styles` instead.\n@mixin deprecated-without-ripple($query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $feat-typography: feature-targeting.create-target($query, typography);\n\n  $divider-color: if(\n    theme-color.tone(theme-color.$background) == 'dark',\n    variables.$deprecated-divider-color-on-dark-bg,\n    variables.$deprecated-divider-color-on-light-bg\n  );\n\n  .mdc-deprecated-list {\n    @include deprecated-base_($query);\n  }\n\n  @include deprecated-single-line-density(\n    variables.$deprecated-single-line-density-scale,\n    $query: $query\n  );\n  @include deprecated-item-secondary-text-ink-color(\n    text-secondary-on-background,\n    $query\n  );\n  @include deprecated-item-graphic-fill-color(transparent, $query);\n  @include deprecated-item-graphic-ink-color(text-icon-on-background, $query);\n  @include deprecated-item-meta-ink-color(text-hint-on-background, $query);\n  @include deprecated-group-subheader-ink-color(\n    text-primary-on-background,\n    $query\n  );\n  @include deprecated-item-disabled-text-opacity(\n    variables.$deprecated-text-disabled-opacity,\n    $query\n  );\n  @include deprecated-item-disabled-text-color(\n    variables.$deprecated-text-disabled-color,\n    $query\n  );\n  @include deprecated-item-selected-text-color(\n    variables.$deprecated-text-selected-color,\n    $query\n  );\n\n  .mdc-deprecated-list--dense {\n    @include feature-targeting.targets($feat-structure) {\n      padding-top: 4px;\n      padding-bottom: 4px;\n      font-size: 0.812rem;\n    }\n  }\n\n  .mdc-deprecated-list-item__wrapper {\n    @include feature-targeting.targets($feat-structure) {\n      display: block;\n    }\n  }\n\n  .mdc-deprecated-list-item {\n    @include feature-targeting.targets($feat-structure) {\n      @include deprecated-item-base_;\n    }\n\n    // For components using aria-activedescendant, the focus pseudoclass is\n    // never applied and use `.mdc-ripple-upgraded--background-focused` instead.\n    &:not(.mdc-deprecated-list-item--selected):focus::before,\n    &.mdc-ripple-upgraded--background-focused::before {\n      @include dom-mixins.transparent-border($query: $query);\n    }\n\n    &.mdc-deprecated-list-item--selected::before {\n      @include dom-mixins.transparent-border(\n        $border-width: 3px,\n        $border-style: double,\n        $query: $query\n      );\n    }\n\n    @include deprecated-list-item-padding-variant(\n      variables.$deprecated-textual-variant-config,\n      $query\n    );\n    @include deprecated-list-item-height-variant(\n      variables.$deprecated-textual-variant-config,\n      $query\n    );\n\n    .mdc-deprecated-list--icon-list & {\n      @include deprecated-list-item-padding-variant(\n        variables.$deprecated-icon-variant-config,\n        $query\n      );\n      @include deprecated-list-item-height-variant(\n        variables.$deprecated-icon-variant-config,\n        $query\n      );\n    }\n\n    .mdc-deprecated-list--avatar-list & {\n      @include deprecated-list-item-padding-variant(\n        variables.$deprecated-avatar-variant-config,\n        $query\n      );\n      @include deprecated-list-item-height-variant(\n        variables.$deprecated-avatar-variant-config,\n        $query\n      );\n    }\n\n    .mdc-deprecated-list--thumbnail-list & {\n      @include deprecated-list-item-padding-variant(\n        variables.$deprecated-thumbnail-variant-config,\n        $query\n      );\n      @include deprecated-list-item-height-variant(\n        variables.$deprecated-thumbnail-variant-config,\n        $query\n      );\n    }\n\n    .mdc-deprecated-list--image-list & {\n      @include deprecated-list-item-padding-variant(\n        variables.$deprecated-image-variant-config,\n        $query\n      );\n      @include deprecated-list-item-height-variant(\n        variables.$deprecated-image-variant-config,\n        $query\n      );\n    }\n\n    .mdc-deprecated-list--video-list & {\n      @include deprecated-list-item-padding-variant(\n        variables.$deprecated-video-variant-config,\n        $query\n      );\n      @include deprecated-list-item-height-variant(\n        variables.$deprecated-video-variant-config,\n        $query\n      );\n    }\n  }\n\n  // This is included here to preserve expected specificity behavior (avatar\n  // graphic styles must take priority).\n  // TODO(b/157038316): regroup this with density styles when nesting is fixed.\n  .mdc-deprecated-list--dense .mdc-deprecated-list-item__graphic {\n    @include deprecated-graphic-size-dense_(20px, $query);\n  }\n\n  .mdc-deprecated-list-item__graphic {\n    @include feature-targeting.targets($feat-structure) {\n      flex-shrink: 0;\n      align-items: center;\n      justify-content: center;\n      fill: currentColor;\n      object-fit: cover;\n    }\n\n    // TODO(b/156624966): this retains legacy spacing but should be updated.\n    @include deprecated-graphic-size-variant(\n      variables.$deprecated-deprecated-graphic-config,\n      $query\n    );\n\n    .mdc-deprecated-list--icon-list & {\n      @include deprecated-graphic-size-variant(\n        variables.$deprecated-icon-variant-config,\n        $query\n      );\n    }\n\n    .mdc-deprecated-list--avatar-list & {\n      @include deprecated-graphic-size-variant(\n        variables.$deprecated-avatar-variant-config,\n        $query\n      );\n      @include feature-targeting.targets($feat-structure) {\n        border-radius: 50%;\n      }\n    }\n\n    .mdc-deprecated-list--thumbnail-list & {\n      @include deprecated-graphic-size-variant(\n        variables.$deprecated-thumbnail-variant-config,\n        $query\n      );\n    }\n\n    .mdc-deprecated-list--image-list & {\n      @include deprecated-graphic-size-variant(\n        variables.$deprecated-image-variant-config,\n        $query\n      );\n    }\n\n    .mdc-deprecated-list--video-list & {\n      @include deprecated-graphic-size-variant(\n        variables.$deprecated-video-variant-config,\n        $query\n      );\n    }\n  }\n\n  // Extra specificity is to override .material-icons display style if used in\n  // conjunction with mdc-deprecated-list-item__graphic\n  // stylelint-disable plugin/selector-bem-pattern\n  .mdc-deprecated-list .mdc-deprecated-list-item__graphic {\n    @include feature-targeting.targets($feat-structure) {\n      display: inline-flex;\n    }\n  }\n  // stylelint-enable plugin/selector-bem-pattern\n\n  .mdc-deprecated-list-item__meta {\n    &:not(.material-icons) {\n      @include typography.typography(caption, $query);\n    }\n\n    @include feature-targeting.targets($feat-structure) {\n      @include rtl.ignore-next-line();\n      margin-left: auto;\n      @include rtl.ignore-next-line();\n      margin-right: 0;\n\n      @at-root {\n        .mdc-deprecated-list-item[dir='rtl'] &,\n        [dir='rtl'] .mdc-deprecated-list-item & {\n          @include rtl.ignore-next-line();\n          margin-left: 0;\n          @include rtl.ignore-next-line();\n          margin-right: auto;\n        }\n      }\n    }\n  }\n\n  .mdc-deprecated-list-item__text {\n    @include typography.overflow-ellipsis($query);\n  }\n\n  // Disable interaction on label elements that may automatically\n  // toggle corresponding checkbox / radio input.\n  .mdc-deprecated-list-item__text[for] {\n    @include feature-targeting.targets($feat-structure) {\n      pointer-events: none;\n    }\n  }\n\n  .mdc-deprecated-list-item__primary-text {\n    @include typography.overflow-ellipsis($query);\n    @include typography.text-baseline(\n      $top: variables.$deprecated-item-primary-text-baseline-height,\n      $bottom: variables.$deprecated-item-secondary-text-baseline-height,\n      $display: block,\n      $query: $query\n    );\n\n    .mdc-deprecated-list--video-list &,\n    .mdc-deprecated-list--image-list &,\n    .mdc-deprecated-list--thumbnail-list &,\n    .mdc-deprecated-list--avatar-list &,\n    .mdc-deprecated-list--icon-list & {\n      @include typography.text-baseline(\n        $top:\n          variables.$deprecated-item-primary-text-baseline-height-with-graphic,\n        $bottom: variables.$deprecated-item-secondary-text-baseline-height,\n        $query: $query\n      );\n    }\n\n    // stylelint-disable plugin/selector-bem-pattern\n    .mdc-deprecated-list--dense & {\n      @include typography.text-baseline(\n        $top: variables.$deprecated-dense-item-primary-text-baseline-height,\n        $bottom: variables.$deprecated-item-secondary-text-baseline-height,\n        $query: $query\n      );\n    }\n    // stylelint-enable plugin/selector-bem-pattern\n  }\n\n  .mdc-deprecated-list-item__secondary-text {\n    @include typography.typography(body2, $query);\n    @include typography.overflow-ellipsis($query);\n    @include typography.text-baseline(\n      $top: variables.$deprecated-item-secondary-text-baseline-height,\n      $display: block,\n      $query: $query\n    );\n\n    // stylelint-disable plugin/selector-bem-pattern\n    .mdc-deprecated-list--dense & {\n      @include feature-targeting.targets($feat-structure) {\n        font-size: inherit;\n      }\n    }\n    // stylelint-enable plugin/selector-bem-pattern\n  }\n\n  // stylelint-disable plugin/selector-bem-pattern\n  .mdc-deprecated-list--dense .mdc-deprecated-list-item {\n    @include feature-targeting.targets($feat-structure) {\n      height: 40px;\n    }\n  }\n\n  .mdc-deprecated-list--two-line .mdc-deprecated-list-item__text {\n    @include feature-targeting.targets($feat-structure) {\n      align-self: flex-start;\n    }\n  }\n\n  .mdc-deprecated-list--two-line {\n    .mdc-deprecated-list-item {\n      @include feature-targeting.targets($feat-structure) {\n        height: variables.$deprecated-two-line-height;\n      }\n    }\n\n    &.mdc-deprecated-list--video-list .mdc-deprecated-list-item,\n    &.mdc-deprecated-list--image-list .mdc-deprecated-list-item,\n    &.mdc-deprecated-list--thumbnail-list .mdc-deprecated-list-item,\n    &.mdc-deprecated-list--avatar-list .mdc-deprecated-list-item,\n    &.mdc-deprecated-list--icon-list .mdc-deprecated-list-item {\n      @include feature-targeting.targets($feat-structure) {\n        height: variables.$deprecated-two-line-graphic-height;\n      }\n    }\n\n    // Icons in multiline lists are the only graphic that isn't centered.\n    &.mdc-deprecated-list--icon-list .mdc-deprecated-list-item__graphic {\n      @include feature-targeting.targets($feat-structure) {\n        align-self: flex-start;\n        margin-top: variables.$deprecated-two-line-icon-top-margin;\n      }\n    }\n  }\n\n  .mdc-deprecated-list--two-line.mdc-deprecated-list--dense\n    .mdc-deprecated-list-item,\n  .mdc-deprecated-list--avatar-list.mdc-deprecated-list--dense\n    .mdc-deprecated-list-item {\n    @include feature-targeting.targets($feat-structure) {\n      height: 60px;\n    }\n  }\n\n  .mdc-deprecated-list--avatar-list.mdc-deprecated-list--dense\n    .mdc-deprecated-list-item__graphic {\n    @include deprecated-graphic-size-dense_(36px, $query);\n  }\n\n  // Only change mouse cursor for list items which are not disabled.\n  :not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item {\n    @include feature-targeting.targets($feat-structure) {\n      cursor: pointer;\n    }\n  }\n\n  // Override anchor tag styles for the use-case of a list being used for navigation\n  // stylelint-disable selector-max-type,selector-no-qualifying-type\n  a.mdc-deprecated-list-item {\n    @include feature-targeting.targets($feat-structure) {\n      color: inherit;\n      text-decoration: none;\n    }\n  }\n  // stylelint-enable selector-max-type,selector-no-qualifying-type\n\n  .mdc-deprecated-list-divider {\n    @include feature-targeting.targets($feat-structure) {\n      height: 0;\n      margin: 0;\n      border: none;\n      border-bottom-width: 1px;\n      border-bottom-style: solid;\n    }\n  }\n\n  // Note: ideally we'd be able to hoist this to the top-level `$feat-color`,\n  // but doing so will cause the `border` declaration on\n  // `.mdc-deprecated-list-divider` above to override it.\n  @include deprecated-divider-color($divider-color, $query);\n\n  // Deprecated. Use the specialized inset classes instead.\n  // Items are fully inset using padding.\n  .mdc-deprecated-list-divider--padded {\n    @include deprecated-divider-inset-variant(\n      variables.$deprecated-textual-variant-config,\n      $use-padding: true,\n      $query: $query\n    );\n  }\n\n  // Deprecated. Use the specialized inset classes instead.\n  // Items's leading, but not trailing, edge is inset to account for *avatar*\n  // width.\n  .mdc-deprecated-list-divider--inset {\n    @include deprecated-divider-inset-variant(\n      variables.$deprecated-avatar-variant-config,\n      $trailing: false,\n      $query: $query\n    );\n  }\n\n  // Deprecated. Use the specialized inset classes instead.\n  // Item's leading and trailing edges are inset to account for *avatar* width.\n  .mdc-deprecated-list-divider--inset.mdc-deprecated-list-divider--padded {\n    @include deprecated-divider-inset-variant(\n      variables.$deprecated-avatar-variant-config,\n      $query: $query\n    );\n  }\n\n  .mdc-deprecated-list {\n    @include deprecated-divider-insets-variant(\n      variables.$deprecated-textual-variant-config,\n      $query: $query\n    );\n  }\n\n  .mdc-deprecated-list--icon-list {\n    @include deprecated-divider-insets-variant(\n      variables.$deprecated-icon-variant-config,\n      $query: $query\n    );\n  }\n\n  .mdc-deprecated-list--avatar-list {\n    @include deprecated-divider-insets-variant(\n      variables.$deprecated-avatar-variant-config,\n      $query: $query\n    );\n  }\n\n  .mdc-deprecated-list--thumbnail-list {\n    @include deprecated-divider-insets-variant(\n      variables.$deprecated-thumbnail-variant-config,\n      $query: $query\n    );\n  }\n\n  .mdc-deprecated-list--image-list {\n    @include deprecated-divider-insets-variant(\n      variables.$deprecated-image-variant-config,\n      $query: $query\n    );\n  }\n\n  .mdc-deprecated-list--video-list {\n    @include deprecated-divider-insets-variant(\n      variables.$deprecated-video-variant-config,\n      $query: $query\n    );\n  }\n\n  .mdc-deprecated-list-group {\n    @include feature-targeting.targets($feat-structure) {\n      // Cancel top/bottom padding on individual lists within group\n      .mdc-deprecated-list {\n        padding: 0;\n      }\n    }\n  }\n\n  .mdc-deprecated-list-group__subheader {\n    $list-subheader-virtual-height: 3rem;\n    $list-subheader-leading: map.get(\n      map.get(typography.$styles, body1),\n      line-height\n    );\n    $list-subheader-margin: calc(\n      (#{$list-subheader-virtual-height} - #{$list-subheader-leading}) / 2\n    );\n\n    @include typography.typography(subtitle1, $query);\n\n    @include feature-targeting.targets($feat-structure) {\n      margin: $list-subheader-margin variables.$deprecated-side-padding;\n    }\n  }\n\n  @include evolution-mixins.without-ripple($query: $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// list styles. It is recommended that most users use `mdc-deprecated-list-core-styles` instead.\n@mixin deprecated-ripple($query: feature-targeting.all()) {\n  @include ripple.common($query); // COPYBARA_COMMENT_THIS_LINE\n\n  // List items should support states by default, but it should be possible to opt out.\n  :not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item {\n    @include deprecated-item-interactive-ripple_($query);\n  }\n\n  // Set styles only for focus state on disabled list item.\n  .mdc-deprecated-list-item--disabled {\n    @include ripple.surface(\n      $ripple-target: variables.$deprecated-ripple-target,\n      $query: $query\n    );\n    @include ripple.surface(\n      $ripple-target: variables.$deprecated-temporary-ripple-target,\n      $query: $query\n    );\n    @include ripple.radius-bounded(\n      $ripple-target: variables.$deprecated-ripple-target,\n      $query: $query\n    );\n    @include ripple.radius-bounded(\n      $ripple-target: variables.$deprecated-temporary-ripple-target,\n      $query: $query\n    );\n    @include ripple-theme.states-base-color(\n      theme-color.prop-value(on-surface),\n      $ripple-target: variables.$deprecated-ripple-target,\n      $query: $query\n    );\n    @include ripple-theme.states-base-color(\n      theme-color.prop-value(on-surface),\n      $ripple-target: variables.$deprecated-temporary-ripple-target,\n      $query: $query\n    );\n    @include ripple-theme.states-focus-opacity(\n      ripple-theme.states-opacity(primary, focus),\n      $ripple-target: variables.$deprecated-ripple-target,\n      $query: $query\n    );\n    @include ripple-theme.states-focus-opacity(\n      ripple-theme.states-opacity(primary, focus),\n      $ripple-target: variables.$deprecated-temporary-ripple-target,\n      $query: $query\n    );\n\n    #{variables.$deprecated-ripple-target},\n    #{variables.$deprecated-temporary-ripple-target} {\n      @include ripple.target-common($query: $query);\n    }\n  }\n\n  @include evolution-mixins.with-ripple($query: $query);\n}\n\n///\n/// Sets ripple color for a list item.\n///\n@mixin deprecated-ripple-states($color, $query: feature-targeting.all()) {\n  @include ripple-theme.states(\n    $color: $color,\n    $query: $query,\n    $ripple-target: variables.$deprecated-ripple-target\n  );\n  @include ripple-theme.states(\n    $color: $color,\n    $query: $query,\n    $ripple-target: variables.$deprecated-temporary-ripple-target\n  );\n}\n\n/// Sets the text color of the list item in selected or activated state.\n/// @param {color} $color - The desired text color.\n@mixin deprecated-item-selected-text-color(\n  $color,\n  $query: feature-targeting.all()\n) {\n  // \"Selected\" is ephemeral and likely to change soon. E.g., selecting one or more photos to share in Google Photos.\n  // \"Activated\" is more permanent. E.g., the currently highlighted navigation destination in a drawer.\n  .mdc-deprecated-list-item--selected,\n  .mdc-deprecated-list-item--activated {\n    @include deprecated-item-primary-text-ink-color($color, $query: $query);\n    @include deprecated-item-graphic-ink-color($color, $query: $query);\n  }\n}\n\n@mixin deprecated-item-primary-text-ink-color(\n  $color,\n  $query: feature-targeting.all()\n) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @include feature-targeting.targets($feat-color) {\n    @include theme.prop(color, $color);\n  }\n}\n\n@mixin deprecated-item-secondary-text-ink-color(\n  $color,\n  $query: feature