@material/drawer
Version:
The Material Components Web drawer component
1 lines • 120 kB
Source Map (JSON)
{"version":3,"sources":["webpack:///./packages/mdc-drawer/mdc-drawer.scss","webpack:///./packages/material-components-web/node_modules/@material/theme/_css.scss","webpack:///./packages/material-components-web/node_modules/@material/theme/_gss.scss","webpack:///./packages/mdc-drawer/_variables.scss","webpack:///./packages/material-components-web/node_modules/@material/animation/_animation.scss","webpack:///mdc-drawer.scss","webpack:///./packages/material-components-web/node_modules/@material/list/_mixins.scss","webpack:///./packages/material-components-web/node_modules/@material/rtl/_rtl.scss","webpack:///./packages/material-components-web/node_modules/@material/typography/_typography.scss","webpack:///./packages/material-components-web/node_modules/@material/elevation/_elevation-theme.scss"],"names":[],"mappings":";;;;;;;AAkDE;EC4BE;EAZE;ECZF;EDwBA;ECnBA;EAAc;EDmBd;ECnBA;EAAc;EDOZ;ECZF;EAKA;EAAc;EDmBd;ECnBA;EAAc;EDOZ;ECZF;EAKA;EAAc;EDmBd;ECnBA;EAAc;EDmBd;EDgXA,UGtYM;EFsBN;EDDE;EACA;EACA;EACA;EACA;EEtBF;EAAc;EFwBZ;EExBF;EAAc;EF0BZ;EACA;EAeA;EAAA;EAAA;EACA,wDI/E2B;ACkBjC;ALuSE;EClQE;AIlCJ;AC+qBE;EL7oBE;AI/BJ;ALiTE;EClRE;AI5BJ;ACumBE;EL3kBE;AIzBJ;AL0WE;ECjVE;AItBJ;ACimBE;EL3kBE;AInBJ;ALsVE;ECnUE;AIhBJ;AEkBM;EACE;ELtBJ;EAAc;EDOZ;ECZF;EAKA;EAAc;EDmBd;ECnBA;EAAc;EDmBd;ECnBA;EAAc;EDmBd;ECnBA;EAAc;EDOZ;ECZF;EAKA;EAAc;EDmBd;EMKI;AFGR;;AC2mBE;EL/nBI;ECZF;EDwBA;AIcJ;AL6WE;EE9YE;EAAc;EDmBd;ECnBA;EAAc;EDmBd;AIsBJ;AEpBM;EACE;ELtBJ;EAAc;EDmBd;ECnBA;EAAc;EDmBd;EMKI;AF2BR;;AE9BM;EACE;ELtBJ;EAAc;EF+BV;EE/BJ;EAAc;EFiCV;EEjCJ;EAAc;EFmCV;EEnCJ;EAAc;EFqCV;EObA;AF4CR;;ALwVE;EQ/IE;EACA;EPvQE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;UAAA;EAZE;ECZF;EDwBA;ED6YE;EAEA;EACA;AKlUN;ALuUE;EAEI;AKtUN;AL2UE;EAEI;AK1UN;AL+UE;EQzKE;EACA;EPvQE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;UAAA;EAZE;ECZF;EDwBA;EOsSA,cA2CQ;EAoBN;EACA;EACA;ERiEA;EACA;AKtTN;AGqQE;EAyCA;EACA;EACA,YRE0C;EQD1C;EAxCI;AHlQN;ALoTE;EAEI;AKnTN;ALyTE;;EAGI;AKxTN;;ALnGE;EAEI;UAAA;AKqGN;AEnIM;EACE;EPgCA;UAAA;EO9BA;AFqIR;;ALlGE;EAEI;UAAA;EASA,0BGhFY;AE4KlB;AE7IM;EACE;EP2CA;UAAA;EOzCA;AF+IR;;AL7FE;EAEI;UAAA;EAQA,0BG7FW;AEqLjB;AEvJM;EACE;EPyDA;UAAA;EOvDA;AFyJR;;ALzFE;EAEI;EACA;EACA;EACA;AK2FN;;ALvFE;EQ4KE;EACA;EPvQE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;UAAA;EAZE;ECZF;EDwBA;EOsSA,cA2CQ;EAoBN;EACA;EACA;EAIA;AHvKN;AGoLE;EAyCA;EACA;EACA,YRlVU;EQmVV;EAxCI;AHjLN;AG8LE;EAwBA;EACA;EACA,YRjVa;EQkVb;EAvBI;AH3LN;;AL3HE;EQmKE;EACA;EPvQE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;UAAA;EAZE;ECZF;EDwBA;EOsSA,cA2CQ;EAoBN;EACA;EACA;ER3QA;AKqJN;AGuIE;EAyCA;EACA;EACA,YR1U0C;EQ2U1C;EAxCI;AHpIN;;ALxJE;EAEI;EACA;EACA;AK0JN;;ALhJE;EEjIE;EAAc;EDmBd;ECnBA;EAAc;EDmBd;EDkHE;EACA;AKsJN;AEvQM;EACE;ELtBJ;EAAc;EDmBd;ECnBA;EAAc;EDmBd;EMKI;AF8QR;;AL9JM;EACE;AKiKR;;AL5JE;EE9IE;EAAc;EDmBd;ECnBA;EAAc;EDmBd;ED+HE;AKkKN;AE/RM;EACE;ELtBJ;EAAc;EDmBd;ECnBA;EAAc;EDmBd;EMKI;AFsSR;;ALnKE;ESiFI;EACA,6HAqGS;EPlVX;EAAc;EDmBd;ECnBA;EAAc;EDmBd;EDkJE;EACA;AKqKN;AL6CE;ECrWE;AI2TJ;AEzTM;EACE;ELtBJ;EAAc;EDmBd;ECnBA;EAAc;EDmBd;EMKI;AFgUR;;AL/KI;EAEI;AKiLR;;AL5KE;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EAIA;EACA,wDIjO2B;AC4YjC;ALxKI;EAEI;AKyKR;ALrKI;EAEI;AKsKR;ALlKI;EAEI,0BGxNU;EH4NV;AKgKR;AL5JI;EAEI,0BGjOS;EHqOT;AK0JR,C","file":"mdc.drawer.css","sourcesContent":["//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:math';\n@use 'sass:list';\n@use 'sass:meta';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/animation/functions' as functions2;\n@use '@material/animation/variables' as animation-variables;\n@use '@material/rtl/rtl';\n@use '@material/typography/typography';\n@use '@material/theme/theme';\n@use '@material/theme/theme-color';\n@use '@material/list/mixins' as list-mixins;\n@use '@material/ripple/ripple-theme';\n@use '@material/shape/mixins' as shape-mixins;\n@use '@material/elevation/mixins' as elevation-mixins;\n@use './variables';\n\n//\n// Public\n//\n\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 // postcss-bem-linter: define drawer\n .mdc-drawer {\n @include title-ink-color(variables.$title-ink-color, $query: $query);\n @include subtitle-ink-color(variables.$subtitle-ink-color, $query: $query);\n @include border-color(variables.$divider-color, $query: $query);\n @include surface-fill-color(variables.$surface-fill-color, $query: $query);\n @include item-icon-ink-color(\n variables.$item-inactive-ink-color,\n $query: $query\n );\n @include item-text-ink-color(\n variables.$item-inactive-ink-color,\n $query: $query\n );\n @include item-activated-icon-ink-color(\n variables.$item-activated-ink-color,\n $query: $query\n );\n @include item-activated-text-ink-color(\n variables.$item-activated-ink-color,\n $query: $query\n );\n @include shape-radius(variables.$shape-radius, $query: $query);\n @include item-shape-radius(variables.$item-shape-radius, $query: $query);\n @include z-index(variables.$z-index, $query: $query);\n @include width(variables.$width, $query: $query);\n\n @include feature-targeting.targets($feat-structure) {\n display: flex;\n flex-direction: column;\n flex-shrink: 0;\n box-sizing: border-box;\n height: 100%;\n @include rtl.ignore-next-line();\n border-right-width: 1px;\n @include rtl.ignore-next-line();\n border-right-style: solid;\n overflow: hidden;\n\n @include rtl.rtl {\n @include rtl.ignore-next-line();\n border-right-width: 0;\n @include rtl.ignore-next-line();\n border-left-width: 1px;\n @include rtl.ignore-next-line();\n border-right-style: none;\n @include rtl.ignore-next-line();\n border-left-style: solid;\n }\n }\n\n @include feature-targeting.targets($feat-animation) {\n transition-property: transform;\n transition-timing-function: animation-variables.$standard-curve-timing-function;\n }\n\n @include list-item_($query);\n }\n\n .mdc-drawer--animate {\n @include feature-targeting.targets($feat-structure) {\n transform: translateX(-100%);\n\n @include rtl.rtl {\n transform: translateX(100%);\n }\n }\n }\n\n .mdc-drawer--opening {\n @include feature-targeting.targets($feat-structure) {\n transform: translateX(0);\n\n // Required to level the specificity with animate class.\n @include rtl.rtl {\n transform: translateX(0);\n }\n }\n\n @include feature-targeting.targets($feat-animation) {\n transition-duration: variables.$animation-enter;\n }\n }\n\n .mdc-drawer--closing {\n @include feature-targeting.targets($feat-structure) {\n transform: translateX(-100%);\n\n @include rtl.rtl {\n transform: translateX(100%);\n }\n }\n\n @include feature-targeting.targets($feat-animation) {\n transition-duration: variables.$animation-exit;\n }\n }\n\n .mdc-drawer__header {\n @include feature-targeting.targets($feat-structure) {\n flex-shrink: 0;\n box-sizing: border-box;\n min-height: 64px; // same as $mdc-top-app-bar-row-height\n padding: 0 variables.$surface-padding 4px;\n }\n }\n\n .mdc-drawer__title {\n @include typography.typography(headline6, $query: $query);\n @include typography.text-baseline(\n $top: 36px,\n $bottom: 20px,\n $query: $query\n );\n }\n\n .mdc-drawer__subtitle {\n @include typography.typography(body2, $query: $query);\n @include typography.text-baseline($top: 20px, $query: $query);\n\n @include feature-targeting.targets($feat-structure) {\n margin-bottom: 0;\n }\n }\n\n .mdc-drawer__content {\n @include feature-targeting.targets($feat-structure) {\n height: 100%;\n overflow-y: auto;\n -webkit-overflow-scrolling: touch;\n }\n }\n\n // postcss-bem-linter: end\n}\n\n@mixin dismissible-core-styles($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-drawer--dismissible {\n @include feature-targeting.targets($feat-structure) {\n @include rtl.reflexive-position(left, 0);\n\n display: none;\n position: absolute;\n\n &.mdc-drawer--open {\n display: flex;\n }\n }\n }\n\n .mdc-drawer-app-content {\n @include feature-targeting.targets($feat-structure) {\n @include rtl.reflexive-box(margin, left, 0);\n\n position: relative;\n }\n }\n}\n\n@mixin modal-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 .mdc-drawer--modal {\n @include scrim-fill-color(variables.$modal-scrim-color, $query: $query);\n @include elevation-mixins.elevation(\n variables.$modal-elevation,\n $query: $query\n );\n\n @include feature-targeting.targets($feat-structure) {\n @include rtl.reflexive-position(left, 0);\n\n display: none;\n position: fixed;\n }\n\n &.mdc-drawer--open {\n @include feature-targeting.targets($feat-structure) {\n display: flex;\n }\n }\n }\n\n .mdc-drawer-scrim {\n @include feature-targeting.targets($feat-structure) {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: variables.$z-index - 1;\n }\n\n @include feature-targeting.targets($feat-animation) {\n transition-property: opacity;\n transition-timing-function: animation-variables.$standard-curve-timing-function;\n }\n\n .mdc-drawer--open + & {\n @include feature-targeting.targets($feat-structure) {\n display: block;\n }\n }\n\n .mdc-drawer--animate + & {\n @include feature-targeting.targets($feat-structure) {\n opacity: 0;\n }\n }\n\n .mdc-drawer--opening + & {\n @include feature-targeting.targets($feat-animation) {\n transition-duration: variables.$animation-enter;\n }\n\n @include feature-targeting.targets($feat-structure) {\n opacity: 1;\n }\n }\n\n .mdc-drawer--closing + & {\n @include feature-targeting.targets($feat-animation) {\n transition-duration: variables.$animation-exit;\n }\n\n @include feature-targeting.targets($feat-structure) {\n opacity: 0;\n }\n }\n }\n}\n\n@mixin activated-overlay-color($color, $query: feature-targeting.all()) {\n :not(.mdc-deprecated-list--non-interactive) > .mdc-deprecated-list-item {\n @include ripple-theme.states-activated($color, $query: $query);\n }\n}\n\n@mixin border-color($color, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n $value: rgba(theme-color.prop-value($color), variables.$divider-opacity);\n\n @include feature-targeting.targets($feat-color) {\n @include theme.property(border-color, $value);\n }\n}\n\n@mixin item-shape-radius(\n $radius,\n $rtl-reflexive: true,\n $query: feature-targeting.all()\n) {\n @include list-mixins.deprecated-single-line-shape-radius(\n $radius,\n $rtl-reflexive,\n $query: $query\n );\n}\n\n@mixin shape-radius($radius, $query: feature-targeting.all()) {\n // Check type since $radius may be a custom property Map\n $is-list: meta.type-of($radius) == 'list';\n @if $is-list and list.length($radius) > 2 {\n @error \"Invalid radius: '#{$radius}' component doesn't allow customizing all corners\";\n } @else if $is-list and list.length($radius) == 2 {\n $radius: 0 list.nth($radius, 1) list.nth($radius, 2) 0;\n } @else {\n $radius: 0 $radius $radius 0;\n }\n\n @include shape-mixins.radius($radius, $rtl-reflexive: true, $query: $query);\n}\n\n@mixin divider-color($color, $query: feature-targeting.all()) {\n $value: rgba(theme-color.prop-value($color), variables.$divider-opacity);\n\n @include list-mixins.deprecated-divider-color($value, $query: $query);\n}\n\n@mixin title-ink-color($color, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n $value: rgba(theme-color.prop-value($color), variables.$title-ink-opacity);\n\n .mdc-drawer__title {\n @include feature-targeting.targets($feat-color) {\n @include theme.property(color, $value);\n }\n }\n}\n\n@mixin subtitle-ink-color($color, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n $value: rgba(theme-color.prop-value($color), variables.$subtitle-ink-opacity);\n\n @include list-mixins.deprecated-group-subheader-ink-color(\n $value,\n $query: $query\n );\n\n .mdc-drawer__subtitle {\n @include feature-targeting.targets($feat-color) {\n @include theme.property(color, $value);\n }\n }\n}\n\n@mixin fill-color-accessible($color, $query: feature-targeting.all()) {\n $accessibleColor: theme-color.accessible-ink-color($color);\n\n @include title-ink-color($accessibleColor, $query: $query);\n @include subtitle-ink-color($accessibleColor, $query: $query);\n @include item-text-ink-color($accessibleColor, $query: $query);\n @include item-icon-ink-color($accessibleColor, $query: $query);\n @include surface-fill-color($color, $query: $query);\n}\n\n@mixin item-icon-ink-color($color, $query: feature-targeting.all()) {\n $value: rgba(\n theme-color.prop-value($color),\n variables.$item-inactive-icon-ink-opacity\n );\n\n @include list-mixins.deprecated-item-graphic-ink-color(\n $value,\n $query: $query\n );\n}\n\n@mixin item-activated-icon-ink-color($color, $query: feature-targeting.all()) {\n $value: rgba(\n theme-color.prop-value($color),\n variables.$item-active-icon-ink-opacity\n );\n\n .mdc-deprecated-list-item--activated {\n @include list-mixins.deprecated-item-graphic-ink-color(\n $value,\n $query: $query\n );\n }\n}\n\n@mixin item-activated-text-ink-color($color, $query: feature-targeting.all()) {\n $value: rgba(\n theme-color.prop-value($color),\n variables.$item-active-text-ink-opacity\n );\n\n .mdc-deprecated-list-item--activated {\n @include list-mixins.deprecated-item-primary-text-ink-color(\n $value,\n $query: $query\n );\n }\n}\n\n@mixin item-text-ink-color($color, $query: feature-targeting.all()) {\n $value: rgba(\n theme-color.prop-value($color),\n variables.$item-inactive-text-ink-opacity\n );\n\n .mdc-deprecated-list-item {\n @include list-mixins.deprecated-item-primary-text-ink-color(\n $value,\n $query: $query\n );\n }\n}\n\n@mixin surface-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\n@mixin scrim-fill-color($color, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n $value: rgba(theme-color.prop-value($color), variables.$modal-scrim-opacity);\n\n + .mdc-drawer-scrim {\n @include feature-targeting.targets($feat-color) {\n @include theme.property(background-color, $value);\n }\n }\n}\n\n@mixin z-index($value, $query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n z-index: $value;\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 @include theme.property(width, $width);\n }\n\n &.mdc-drawer--open:not(.mdc-drawer--closing) + .mdc-drawer-app-content {\n @include feature-targeting.targets($feat-structure) {\n @include rtl.reflexive-box(margin, left, $width);\n }\n }\n}\n\n//\n// Private\n//\n@mixin list-item_($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n // postcss-bem-linter: ignore\n .mdc-deprecated-list-item {\n @include typography.typography(subtitle2, $query: $query);\n\n @include feature-targeting.targets($feat-structure) {\n height: calc(48px - 2 * #{variables.$list-item-spacing});\n // To accomodate margin conflict.\n margin: (variables.$list-item-spacing * 2) 8px;\n padding: 0 math.div(variables.$surface-padding, 2);\n }\n }\n\n // postcss-bem-linter: ignore\n .mdc-deprecated-list-item:nth-child(1) {\n @include feature-targeting.targets($feat-structure) {\n margin-top: 2px;\n }\n }\n\n // postcss-bem-linter: ignore\n .mdc-deprecated-list-item:nth-last-child(1) {\n @include feature-targeting.targets($feat-structure) {\n margin-bottom: 0;\n }\n }\n\n // postcss-bem-linter: ignore\n .mdc-deprecated-list-group__subheader {\n @include typography.typography(body2, $query: $query);\n @include typography.text-baseline($top: 24px, $query: $query);\n\n @include feature-targeting.targets($feat-structure) {\n margin: 0;\n padding: 0 variables.$surface-padding;\n }\n }\n\n // postcss-bem-linter: ignore\n .mdc-deprecated-list-divider {\n @include feature-targeting.targets($feat-structure) {\n margin: 3px 0 4px;\n }\n }\n\n // Prevents list item children from being included in the click target.\n // postcss-bem-linter: ignore\n .mdc-deprecated-list-item__text,\n .mdc-deprecated-list-item__graphic {\n @include feature-targeting.targets($feat-structure) {\n pointer-events: none;\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@use 'sass:list';\n@use 'sass:map';\n@use 'sass:meta';\n\n/// Adds optional GSS annotation comments. Useful for theme mixins where one or\n/// more properties are set indirectly.\n///\n/// Annotations may be provided as a Map of annotations or as named arguments.\n///\n/// @example - scss\n/// @include annotate((noflip: true));\n/// left: 0;\n///\n/// @example - scss\n/// @include annotate($noflip: true);\n/// left: 0;\n///\n/// @example - css\n/// /* @noflip */ /*rtl:ignore*/\n/// left: 0;\n///\n/// @param {Map} $annotations - Map of annotations. Values must be set to `true`\n/// for an annotation to be added.\n@mixin annotate($annotations...) {\n $keywords: meta.keywords($annotations);\n @if list.length($annotations) > 0 {\n $annotations: list.nth($annotations, 1);\n } @else {\n $annotations: $keywords;\n }\n\n @if (map.get($annotations, alternate) == true) {\n /* @alternate */\n }\n\n // noflip must be the last tag right before the property\n @if (map.get($annotations, noflip) == true) {\n /* @noflip */ /*rtl:ignore*/\n }\n}\n","//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use '@material/theme/theme-color';\n\n// Colors\n$title-ink-color: theme-color.prop-value(on-surface) !default;\n$subtitle-ink-color: theme-color.prop-value(on-surface) !default;\n$item-inactive-ink-color: theme-color.prop-value(on-surface) !default;\n$item-activated-ink-color: theme-color.prop-value(primary) !default;\n$divider-color: theme-color.prop-value(on-surface) !default;\n$surface-fill-color: surface !default;\n\n// Opacity\n$title-ink-opacity: theme-color.text-emphasis(high) !default;\n$subtitle-ink-opacity: theme-color.text-emphasis(medium) !default;\n$item-inactive-icon-ink-opacity: theme-color.text-emphasis(medium) !default;\n$item-inactive-text-ink-opacity: theme-color.text-emphasis(high) !default;\n$item-active-icon-ink-opacity: 1 !default;\n$item-active-text-ink-opacity: theme-color.text-emphasis(high) !default;\n$divider-opacity: 0.12 !default;\n\n// Widths\n$width: 256px !default;\n$list-item-spacing: 4px !default;\n$surface-padding: 16px !default;\n$shape-radius: large !default;\n$item-shape-radius: small !default;\n\n// Animations\n$animation-enter: 250ms !default;\n$animation-exit: 200ms !default;\n\n// Scrim\n$modal-scrim-color: theme-color.prop-value(on-surface) !default;\n$modal-scrim-opacity: 0.32 !default;\n\n$z-index: 6 !default;\n$modal-elevation: 16 !default;\n","//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n$deceleration-curve-timing-function: cubic-bezier(0, 0, 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",".mdc-drawer {\n border-color: rgba(0, 0, 0, 0.12);\n background-color: #fff;\n /* @alternate */\n background-color: var(--mdc-theme-surface, #fff);\n /* @noflip */\n /*rtl:ignore*/\n border-top-left-radius: 0;\n /* @noflip */\n /*rtl:ignore*/\n border-top-right-radius: 0;\n /* @alternate */\n /* @noflip */\n /*rtl:ignore*/\n border-top-right-radius: var(--mdc-shape-large, 0);\n /* @noflip */\n /*rtl:ignore*/\n border-bottom-right-radius: 0;\n /* @alternate */\n /* @noflip */\n /*rtl:ignore*/\n border-bottom-right-radius: var(--mdc-shape-large, 0);\n /* @noflip */\n /*rtl:ignore*/\n border-bottom-left-radius: 0;\n z-index: 6;\n width: 256px;\n display: flex;\n flex-direction: column;\n flex-shrink: 0;\n box-sizing: border-box;\n height: 100%;\n /* @noflip */\n /*rtl:ignore*/\n border-right-width: 1px;\n /* @noflip */\n /*rtl:ignore*/\n border-right-style: solid;\n overflow: hidden;\n transition-property: transform;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n.mdc-drawer .mdc-drawer__title {\n color: rgba(0, 0, 0, 0.87);\n}\n.mdc-drawer .mdc-deprecated-list-group__subheader {\n color: rgba(0, 0, 0, 0.6);\n}\n.mdc-drawer .mdc-drawer__subtitle {\n color: rgba(0, 0, 0, 0.6);\n}\n.mdc-drawer .mdc-deprecated-list-item__graphic {\n color: rgba(0, 0, 0, 0.6);\n}\n.mdc-drawer .mdc-deprecated-list-item {\n color: rgba(0, 0, 0, 0.87);\n}\n.mdc-drawer .mdc-deprecated-list-item--activated .mdc-deprecated-list-item__graphic {\n color: #6200ee;\n}\n.mdc-drawer .mdc-deprecated-list-item--activated {\n color: rgba(98, 0, 238, 0.87);\n}\n[dir=rtl] .mdc-drawer, .mdc-drawer[dir=rtl] {\n /*rtl:begin:ignore*/\n /* @noflip */\n /*rtl:ignore*/\n border-top-left-radius: 0;\n /* @alternate */\n /* @noflip */\n /*rtl:ignore*/\n border-top-left-radius: var(--mdc-shape-large, 0);\n /* @noflip */\n /*rtl:ignore*/\n border-top-right-radius: 0;\n /* @noflip */\n /*rtl:ignore*/\n border-bottom-right-radius: 0;\n /* @noflip */\n /*rtl:ignore*/\n border-bottom-left-radius: 0;\n /* @alternate */\n /* @noflip */\n /*rtl:ignore*/\n border-bottom-left-radius: var(--mdc-shape-large, 0);\n /*rtl:end:ignore*/\n}\n\n.mdc-drawer .mdc-deprecated-list-item {\n border-radius: 4px;\n /* @alternate */\n border-radius: var(--mdc-shape-small, 4px);\n}\n.mdc-drawer.mdc-drawer--open:not(.mdc-drawer--closing) + .mdc-drawer-app-content {\n /* @noflip */\n /*rtl:ignore*/\n margin-left: 256px;\n /* @noflip */\n /*rtl:ignore*/\n margin-right: 0;\n}\n[dir=rtl] .mdc-drawer.mdc-drawer--open:not(.mdc-drawer--closing) + .mdc-drawer-app-content, .mdc-drawer.mdc-drawer--open:not(.mdc-drawer--closing) + .mdc-drawer-app-content[dir=rtl] {\n /*rtl:begin:ignore*/\n /* @noflip */\n /*rtl:ignore*/\n margin-left: 0;\n /* @noflip */\n /*rtl:ignore*/\n margin-right: 256px;\n /*rtl:end:ignore*/\n}\n\n[dir=rtl] .mdc-drawer, .mdc-drawer[dir=rtl] {\n /*rtl:begin:ignore*/\n /* @noflip */\n /*rtl:ignore*/\n border-right-width: 0;\n /* @noflip */\n /*rtl:ignore*/\n border-left-width: 1px;\n /* @noflip */\n /*rtl:ignore*/\n border-right-style: none;\n /* @noflip */\n /*rtl:ignore*/\n border-left-style: solid;\n /*rtl:end:ignore*/\n}\n\n.mdc-drawer .mdc-deprecated-list-item {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n font-family: Roboto, sans-serif;\n /* @alternate */\n font-family: var(--mdc-typography-subtitle2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));\n font-size: 0.875rem;\n /* @alternate */\n font-size: var(--mdc-typography-subtitle2-font-size, 0.875rem);\n line-height: 1.375rem;\n /* @alternate */\n line-height: var(--mdc-typography-subtitle2-line-height, 1.375rem);\n font-weight: 500;\n /* @alternate */\n font-weight: var(--mdc-typography-subtitle2-font-weight, 500);\n letter-spacing: 0.0071428571em;\n /* @alternate */\n letter-spacing: var(--mdc-typography-subtitle2-letter-spacing, 0.0071428571em);\n text-decoration: inherit;\n /* @alternate */\n text-decoration: var(--mdc-typography-subtitle2-text-decoration, inherit);\n text-transform: inherit;\n /* @alternate */\n text-transform: var(--mdc-typography-subtitle2-text-transform, inherit);\n height: calc(48px - 2 * 4px);\n margin: 8px 8px;\n padding: 0 8px;\n}\n.mdc-drawer .mdc-deprecated-list-item:nth-child(1) {\n margin-top: 2px;\n}\n.mdc-drawer .mdc-deprecated-list-item:nth-last-child(1) {\n margin-bottom: 0;\n}\n.mdc-drawer .mdc-deprecated-list-group__subheader {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n font-family: Roboto, sans-serif;\n /* @alternate */\n font-family: var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));\n font-size: 0.875rem;\n /* @alternate */\n font-size: var(--mdc-typography-body2-font-size, 0.875rem);\n line-height: 1.25rem;\n /* @alternate */\n line-height: var(--mdc-typography-body2-line-height, 1.25rem);\n font-weight: 400;\n /* @alternate */\n font-weight: var(--mdc-typography-body2-font-weight, 400);\n letter-spacing: 0.0178571429em;\n /* @alternate */\n letter-spacing: var(--mdc-typography-body2-letter-spacing, 0.0178571429em);\n text-decoration: inherit;\n /* @alternate */\n text-decoration: var(--mdc-typography-body2-text-decoration, inherit);\n text-transform: inherit;\n /* @alternate */\n text-transform: var(--mdc-typography-body2-text-transform, inherit);\n display: block;\n margin-top: 0;\n /* @alternate */\n line-height: normal;\n margin: 0;\n padding: 0 16px;\n}\n.mdc-drawer .mdc-deprecated-list-group__subheader::before {\n display: inline-block;\n width: 0;\n height: 24px;\n content: \"\";\n vertical-align: 0;\n}\n.mdc-drawer .mdc-deprecated-list-divider {\n margin: 3px 0 4px;\n}\n.mdc-drawer .mdc-deprecated-list-item__text,\n.mdc-drawer .mdc-deprecated-list-item__graphic {\n pointer-events: none;\n}\n\n.mdc-drawer--animate {\n transform: translateX(-100%);\n}\n[dir=rtl] .mdc-drawer--animate, .mdc-drawer--animate[dir=rtl] {\n /*rtl:begin:ignore*/\n transform: translateX(100%);\n /*rtl:end:ignore*/\n}\n\n.mdc-drawer--opening {\n transform: translateX(0);\n transition-duration: 250ms;\n}\n[dir=rtl] .mdc-drawer--opening, .mdc-drawer--opening[dir=rtl] {\n /*rtl:begin:ignore*/\n transform: translateX(0);\n /*rtl:end:ignore*/\n}\n\n.mdc-drawer--closing {\n transform: translateX(-100%);\n transition-duration: 200ms;\n}\n[dir=rtl] .mdc-drawer--closing, .mdc-drawer--closing[dir=rtl] {\n /*rtl:begin:ignore*/\n transform: translateX(100%);\n /*rtl:end:ignore*/\n}\n\n.mdc-drawer__header {\n flex-shrink: 0;\n box-sizing: border-box;\n min-height: 64px;\n padding: 0 16px 4px;\n}\n\n.mdc-drawer__title {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n font-family: Roboto, sans-serif;\n /* @alternate */\n font-family: var(--mdc-typography-headline6-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));\n font-size: 1.25rem;\n /* @alternate */\n font-size: var(--mdc-typography-headline6-font-size, 1.25rem);\n line-height: 2rem;\n /* @alternate */\n line-height: var(--mdc-typography-headline6-line-height, 2rem);\n font-weight: 500;\n /* @alternate */\n font-weight: var(--mdc-typography-headline6-font-weight, 500);\n letter-spacing: 0.0125em;\n /* @alternate */\n letter-spacing: var(--mdc-typography-headline6-letter-spacing, 0.0125em);\n text-decoration: inherit;\n /* @alternate */\n text-decoration: var(--mdc-typography-headline6-text-decoration, inherit);\n text-transform: inherit;\n /* @alternate */\n text-transform: var(--mdc-typography-headline6-text-transform, inherit);\n display: block;\n margin-top: 0;\n /* @alternate */\n line-height: normal;\n margin-bottom: -20px;\n}\n.mdc-drawer__title::before {\n display: inline-block;\n width: 0;\n height: 36px;\n content: \"\";\n vertical-align: 0;\n}\n.mdc-drawer__title::after {\n display: inline-block;\n width: 0;\n height: 20px;\n content: \"\";\n vertical-align: -20px;\n}\n\n.mdc-drawer__subtitle {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n font-family: Roboto, sans-serif;\n /* @alternate */\n font-family: var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));\n font-size: 0.875rem;\n /* @alternate */\n font-size: var(--mdc-typography-body2-font-size, 0.875rem);\n line-height: 1.25rem;\n /* @alternate */\n line-height: var(--mdc-typography-body2-line-height, 1.25rem);\n font-weight: 400;\n /* @alternate */\n font-weight: var(--mdc-typography-body2-font-weight, 400);\n letter-spacing: 0.0178571429em;\n /* @alternate */\n letter-spacing: var(--mdc-typography-body2-letter-spacing, 0.0178571429em);\n text-decoration: inherit;\n /* @alternate */\n text-decoration: var(--mdc-typography-body2-text-decoration, inherit);\n text-transform: inherit;\n /* @alternate */\n text-transform: var(--mdc-typography-body2-text-transform, inherit);\n display: block;\n margin-top: 0;\n /* @alternate */\n line-height: normal;\n margin-bottom: 0;\n}\n.mdc-drawer__subtitle::before {\n display: inline-block;\n width: 0;\n height: 20px;\n content: \"\";\n vertical-align: 0;\n}\n\n.mdc-drawer__content {\n height: 100%;\n overflow-y: auto;\n -webkit-overflow-scrolling: touch;\n}\n\n.mdc-drawer--dismissible {\n /* @noflip */\n /*rtl:ignore*/\n left: 0;\n /* @noflip */\n /*rtl:ignore*/\n right: initial;\n display: none;\n position: absolute;\n}\n[dir=rtl] .mdc-drawer--dismissible, .mdc-drawer--dismissible[dir=rtl] {\n /*rtl:begin:ignore*/\n /* @noflip */\n /*rtl:ignore*/\n left: initial;\n /* @noflip */\n /*rtl:ignore*/\n right: 0;\n /*rtl:end:ignore*/\n}\n\n.mdc-drawer--dismissible.mdc-drawer--open {\n display: flex;\n}\n\n.mdc-drawer-app-content {\n /* @noflip */\n /*rtl:ignore*/\n margin-left: 0;\n /* @noflip */\n /*rtl:ignore*/\n margin-right: 0;\n position: relative;\n}\n[dir=rtl] .mdc-drawer-app-content, .mdc-drawer-app-content[dir=rtl] {\n /*rtl:begin:ignore*/\n /* @noflip */\n /*rtl:ignore*/\n margin-left: 0;\n /* @noflip */\n /*rtl:ignore*/\n margin-right: 0;\n /*rtl:end:ignore*/\n}\n\n.mdc-drawer--modal {\n /* @alternate */\n box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);\n /* @noflip */\n /*rtl:ignore*/\n left: 0;\n /* @noflip */\n /*rtl:ignore*/\n right: initial;\n display: none;\n position: fixed;\n}\n.mdc-drawer--modal + .mdc-drawer-scrim {\n background-color: rgba(0, 0, 0, 0.32);\n}\n[dir=rtl] .mdc-drawer--modal, .mdc-drawer--modal[dir=rtl] {\n /*rtl:begin:ignore*/\n /* @noflip */\n /*rtl:ignore*/\n left: initial;\n /* @noflip */\n /*rtl:ignore*/\n right: 0;\n /*rtl:end:ignore*/\n}\n\n.mdc-drawer--modal.mdc-drawer--open {\n display: flex;\n}\n\n.mdc-drawer-scrim {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 5;\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n.mdc-drawer--open + .mdc-drawer-scrim {\n display: block;\n}\n.mdc-drawer--animate + .mdc-drawer-scrim {\n opacity: 0;\n}\n.mdc-drawer--opening + .mdc-drawer-scrim {\n transition-duration: 250ms;\n opacity: 1;\n}\n.mdc-drawer--closing + .mdc-drawer-scrim {\n transition-duration: 200ms;\n opacity: 0;\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