@material/snackbar
Version:
The Material Components for the web snackbar component
1 lines • 141 kB
Source Map (JSON)
{"version":3,"sources":["webpack:///./packages/mdc-snackbar/mdc-snackbar.scss","webpack:///./packages/mdc-snackbar/_variables.scss","webpack:///mdc-snackbar.scss","webpack:///./packages/material-components-web/node_modules/@material/theme/_css.scss","webpack:///./packages/material-components-web/node_modules/@material/elevation/_elevation-theme.scss","webpack:///./packages/material-components-web/node_modules/@material/theme/_gss.scss","webpack:///./packages/material-components-web/node_modules/@material/rtl/_rtl.scss","webpack:///./packages/material-components-web/node_modules/@material/dom/_dom.scss","webpack:///./packages/material-components-web/node_modules/@material/typography/_typography.scss","webpack:///./packages/material-components-web/node_modules/@material/button/_button-shared-theme.scss","webpack:///./packages/material-components-web/node_modules/@material/ripple/_ripple-theme.scss","webpack:///./packages/material-components-web/node_modules/@material/icon-button/_icon-button-theme.scss","webpack:///./packages/material-components-web/node_modules/@material/focus-ring/_focus-ring.scss","webpack:///./packages/material-components-web/node_modules/@material/touch-target/_touch-target.scss"],"names":[],"mappings":";;;;;;;AAwCE;EAoQE,UCxPM;EDgPN,WCtPqB;EDDnB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EAUA;AEpDN;;AFoNE;EGnJE;AD7DJ;;AF0NE;EG7JE;ADzDJ;;AF8OE;EAEI,gBC1NM;AClBZ;AFgPM;EANJ;IAOM;EE7ON;AACF;;AFqPE;EAEI,gBCzOM;ACVZ;;AFyPE;EIYI;EACA,2HAqGS;AFtWf;;AFgNE;EGrLI;EEZF;EFwBA;ADjCJ;;AF+BE;;;EAII;AE7BN;;AFiCE;;EAGI;AE/BN;;AFmCE;EAyNE;AExPJ;;AF+PE;EKhQE;EAAc;EFmBd;EEnBA;EAAc;EFmBd;EHgPE;AExPN;AIUM;EACE;EDtBJ;EAAc;EFmBd;EEnBA;EAAc;EFmBd;EGKI;AJHR;;AFkPE;EAEI;EACA;AEhPN;AFoPE;EAEI;EACA,kBC5RI;ACyCV;;AFUE;EKxCE;EAAc;EFmBd;EEnBA;EAAc;EFmBd;EH8BE;EACA;EACA;EACA;EACA;UAAA;EACA;AETN;AFHI;EO/DA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ALqEJ;AKtBI;EPOA;IOhDE;ELmEJ;AACF;AIzCM;EACE;EDtBJ;EAAc;EFmBd;EEnBA;EAAc;EFmBd;EGKI;AJgDR;;AFfI;EAEI;UAAA;EACA;EACA;EAIA;EAAA;EAAA;AEcR;AFNI;EAEI;UAAA;EAIA;AEIR;;AFIE;EQsLE;EACA;ELvQE;EEZF;EFwBA;EAZE;EEZF;EFwBA;EAZE;EEZF;EFwBA;EAZE;EEZF;EFwBA;EAZE;EEZF;EFwBA;EAZE;EEZF;EFwBA;UAAA;EAZE;EEZF;EFwBA;EEnBA;EAAc;EFmBd;EEnBA;EAAc;EFmBd;EH0EE;EACA;EACA;EACA;EACA;EAGA;EACA;AEqBN;AIrGM;EACE;EDtBJ;EAAc;EFmBd;EEnBA;EAAc;EFmBd;EGKI;AJ4GR;;AFzBE;EAEI;EACA;AE2BN;;AFvBE;EAEI;EACA;EACA;EACA;EACA;AEyBN;;AOiKE;EN/RE;ADkIJ;AQtDI;EPxFE;EEZF;EFwBA;ADuIJ;AQ8UE;EPjeI;EEZF;EFwBA;AD4IJ;AQyUE;EA9QI;EPnNA;EEZF;EFwBA;ADkJJ;AQ+EM;EAEI;AR9EV;AQmFQ;EAEI,yBAhRO;EP0Bb;EEZF;EFwBA;AD2JJ;AQ0FI;EPrPA;AD8JJ;;AFzCE;EGrHE;ADkKJ;AQtFI;EPxFE;EEZF;EFwBA;ADuKJ;AQ8SE;EPjeI;EEZF;EFwBA;AD4KJ;AQySE;EA9QI;EPnNA;EEZF;EFwBA;ADkLJ;AQ+CM;EAEI;AR9CV;AQmDQ;EAEI,yBAhRO;EP0Bb;EEZF;EFwBA;AD2LJ;AQ0DI;EPrPA;AD8LJ;;AFhEE;EWzDE,WVzGkB;EU0GlB,YV1GkB;EU2GlB;EX6DE,eCzKc;AC0OpB;AS3HE;EAEI;AT4HN;ASvHI;EAUI;EACA,gBVhIc;EUiId,eVjIc;ACiPtB;AK7LI;EIiEA;ICzFA;IACA;IACA;IACA;IACA;IACA;IPhBA;IAAc;IOkBd;IPlBA;IAAc;IOoBd;YAAA;IACA,YA3BwB;IA4BxB,WAtB0B;EViP5B;AACF;AK/MI;EIiEA;IC3EE;EV6NJ;AACF;AKpNI;EKPA;IACE;IACA;IACA,kBAhEgB;IAiEhB;IACA;IACA;IPlCF;IAAc;IOoCZ;IPpCF;IAAc;IOsCZ;YAAA;IACA,wBA/BgB;IAgChB,uBAhCgB;EVgQpB;AACF;AKtOI;EKPA;IAeI;EVkON;AACF;AShJI;EAEI,WVjJc;EUkJd,YVlJc;EY2DlB,eAHsB;EAItB,kBAJsB;EAcpB,iBANwB;EAOxB,gBAPwB;AXuO9B;ASxIM;EAEI,gBVjKY;EUkKZ,eVlKY;AC2StB;ASnIE;EEhJE;EACA;EACA,YZ1BkB;EIiBlB;EAAc;EQeZ;EACA,WZjCgB;EYkChB;UAAA;AXmRN;;AFzIE;EK3JE;EAAc;EFmBd;EEnBA;EAAc;EFmBd;AD0RJ;AIxRM;EACE;EDtBJ;EAAc;EFmBd;EEnBA;EAAc;EFmBd;EGKI;AJ+RR,C","file":"mdc.snackbar.css","sourcesContent":["//\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@use '@material/feature-targeting/feature-targeting';\n@use '@material/animation/functions' as animation-functions;\n@use '@material/button/button-theme';\n@use '@material/icon-button/icon-button-theme';\n@use '@material/ripple/ripple-theme';\n@use '@material/rtl/rtl';\n@use '@material/dom/mixins' as dom-mixins;\n@use '@material/typography/typography';\n@use '@material/elevation/mixins' as elevation-mixins;\n@use '@material/shape/mixins' as shape-mixins;\n@use '@material/theme/theme';\n@use './variables';\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 snackbar\n .mdc-snackbar {\n @include z-index(variables.$z-index, $query: $query);\n @include viewport-margin(variables.$viewport-margin-narrow, $query: $query);\n\n @include feature-targeting.targets($feat-structure) {\n display: none;\n position: fixed;\n right: 0;\n bottom: 0;\n left: 0;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n\n // Ignore mouse events on the root layout element.\n pointer-events: none;\n\n // For some reason, iOS Safari displays a tap highlight on the entire snackbar element.\n // Mobile Safari only supports `rgba` values for this property; named values like\n // `transparent` are ignored. From Apple's docs:\n // > This property obeys the alpha value, if specified.\n // > If you don’t specify an alpha value, Safari on iOS applies a default alpha value to the color.\n // > To disable tap highlighting, set the alpha value to 0 (invisible).\n // > If you set the alpha value to 1.0 (opaque), the element is not visible when tapped.\n // See https://github.com/ben-eb/postcss-colormin/issues/1\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n }\n }\n\n @include fill-color(variables.$fill-color, $query: $query);\n @include label-ink-color(variables.$label-ink-color, $query: $query);\n @include min-width(variables.$min-width, $query: $query);\n @include max-width(variables.$max-width, $query: $query);\n @include elevation(variables.$elevation, $query: $query);\n @include shape-radius(variables.$shape-radius, $query: $query);\n\n .mdc-snackbar--opening,\n .mdc-snackbar--open,\n .mdc-snackbar--closing {\n @include feature-targeting.targets($feat-structure) {\n display: flex;\n }\n }\n\n .mdc-snackbar--open .mdc-snackbar__label,\n .mdc-snackbar--open .mdc-snackbar__actions {\n @include feature-targeting.targets($feat-structure) {\n visibility: visible;\n }\n }\n\n .mdc-snackbar--leading {\n @include position-leading($query: $query);\n }\n\n .mdc-snackbar--stacked {\n @include layout-stacked($query: $query);\n }\n\n .mdc-snackbar__surface {\n // 1px border around the snackbar surface for high contrast mode.\n &::before {\n @include dom-mixins.transparent-border($query: $query);\n }\n\n @include feature-targeting.targets($feat-structure) {\n @include rtl.reflexive-property(padding, 0, variables.$padding);\n\n display: flex;\n align-items: center;\n justify-content: flex-start;\n box-sizing: border-box;\n transform: scale(0.8);\n opacity: 0;\n }\n\n .mdc-snackbar--open & {\n @include feature-targeting.targets($feat-structure) {\n transform: scale(1);\n opacity: 1;\n pointer-events: auto; // Allow mouse events on surface element while snackbar is open\n }\n\n @include feature-targeting.targets($feat-animation) {\n transition: animation-functions.enter(\n opacity,\n variables.$enter-duration\n ),\n animation-functions.enter(transform, variables.$enter-duration);\n }\n }\n\n .mdc-snackbar--closing & {\n @include feature-targeting.targets($feat-structure) {\n transform: scale(1);\n }\n\n @include feature-targeting.targets($feat-animation) {\n transition: animation-functions.exit-permanent(\n opacity,\n variables.$exit-duration\n );\n }\n }\n }\n\n .mdc-snackbar__label {\n @include typography.typography(variables.$label-type-scale, $query: $query);\n\n @include feature-targeting.targets($feat-structure) {\n @include rtl.reflexive-property(padding, 16px, variables.$padding);\n\n width: 100%;\n flex-grow: 1;\n box-sizing: border-box;\n margin: 0;\n visibility: hidden;\n\n // 14px top/bottom padding needed to make the height 48px.\n padding-top: 14px;\n padding-bottom: 14px;\n }\n }\n\n // Used to prevent visual jank when announcing label text to screen readers.\n // See the `announce()` function in util.js for details.\n .mdc-snackbar__label::before {\n @include feature-targeting.targets($feat-structure) {\n display: inline;\n content: attr(data-mdc-snackbar-label-text);\n }\n }\n\n .mdc-snackbar__actions {\n @include feature-targeting.targets($feat-structure) {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n box-sizing: border-box;\n visibility: hidden;\n }\n }\n\n .mdc-snackbar__action {\n @include button-theme.ink-color(\n variables.$action-ink-color,\n $query: $query\n );\n @include ripple-theme.states(\n variables.$action-ink-color,\n $ripple-target: button-theme.$ripple-target,\n $query: $query\n );\n }\n\n .mdc-snackbar__dismiss {\n @include icon-button-theme.ink-color(\n variables.$dismiss-ink-color,\n $query: $query\n );\n }\n\n // Two selectors are needed to increase specificity above `.material-icons`.\n // stylelint-disable-next-line selector-class-pattern\n .mdc-snackbar__dismiss.mdc-snackbar__dismiss {\n @include icon-button-theme.size(\n variables.$dismiss-button-size,\n $query: $query\n );\n @include feature-targeting.targets($feat-structure) {\n font-size: variables.$dismiss-icon-size;\n }\n }\n\n .mdc-snackbar__action + .mdc-snackbar__dismiss {\n @include feature-targeting.targets($feat-structure) {\n @include rtl.reflexive-property(margin, variables.$padding, 0);\n }\n }\n // postcss-bem-linter: end\n}\n\n@mixin fill-color($color, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n\n .mdc-snackbar__surface {\n @include feature-targeting.targets($feat-color) {\n @include theme.property(background-color, $color);\n }\n }\n}\n\n@mixin label-ink-color($color, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n\n .mdc-snackbar__label {\n @include feature-targeting.targets($feat-color) {\n @include theme.property(color, $color);\n }\n }\n}\n\n@mixin shape-radius(\n $radius,\n $rtl-reflexive: false,\n $query: feature-targeting.all()\n) {\n .mdc-snackbar__surface {\n @include shape-mixins.radius($radius, $rtl-reflexive, $query: $query);\n }\n}\n\n@mixin min-width(\n $min-width,\n $mobile-breakpoint: variables.$mobile-breakpoint,\n $query: feature-targeting.all()\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-snackbar__surface {\n @include feature-targeting.targets($feat-structure) {\n min-width: $min-width;\n\n // The first media query ensures that snackbars are always 100% width on mobile devices, as required by the spec.\n // The second media query prevents snackbars from being wider than the viewport for large min-width values.\n @media (max-width: $mobile-breakpoint), (max-width: $min-width) {\n min-width: 100%;\n }\n }\n }\n}\n\n@mixin max-width($max-width, $query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-snackbar__surface {\n @include feature-targeting.targets($feat-structure) {\n max-width: $max-width;\n }\n }\n}\n\n@mixin elevation($z-index, $query: feature-targeting.all()) {\n .mdc-snackbar__surface {\n @include elevation-mixins.elevation($z-index, $query: $query);\n }\n}\n\n@mixin viewport-margin($margin, $query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n margin: $margin;\n }\n}\n\n@mixin z-index($z-index, $query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n z-index: $z-index;\n }\n}\n\n@mixin position-leading($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n justify-content: flex-start;\n }\n}\n\n@mixin layout-stacked($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-snackbar__label {\n @include feature-targeting.targets($feat-structure) {\n @include rtl.reflexive-property(padding, 16px, 8px);\n padding-bottom: 12px;\n }\n }\n\n .mdc-snackbar__surface {\n @include feature-targeting.targets($feat-structure) {\n flex-direction: column;\n align-items: flex-start;\n }\n }\n\n .mdc-snackbar__actions {\n @include feature-targeting.targets($feat-structure) {\n align-self: flex-end;\n margin-bottom: variables.$padding;\n }\n }\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@use 'sass:color';\n@use '@material/theme/theme-color';\n\n$fill-color: color.mix(\n theme-color.prop-value(on-surface),\n theme-color.prop-value(surface),\n 80%\n) !default;\n$label-ink-color: rgba(\n theme-color.prop-value(surface),\n theme-color.text-emphasis(high)\n) !default;\n$action-ink-color: #bb86fc !default;\n$dismiss-ink-color: rgba(\n theme-color.prop-value(surface),\n theme-color.text-emphasis(high)\n) !default;\n\n$label-type-scale: body2 !default;\n$dismiss-icon-size: 18px !default;\n$dismiss-button-size: 36px !default;\n$min-width: 344px !default;\n$max-width: 672px !default;\n$mobile-breakpoint: 480px !default;\n$viewport-margin-narrow: 8px !default;\n$viewport-margin-wide: 24px !default;\n$padding: 8px !default;\n\n$elevation: 6 !default;\n$shape-radius: small !default; // Key from shape.$category-keywords or CSS length value (e.g., 4px)\n$z-index: 8 !default; // One above mdc-dialog\n\n// These variables need to be kept in sync with the values in constants.js.\n$enter-duration: 150ms !default;\n$exit-duration: 75ms !default;\n",".mdc-snackbar {\n z-index: 8;\n margin: 8px;\n display: none;\n position: fixed;\n right: 0;\n bottom: 0;\n left: 0;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n pointer-events: none;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.mdc-snackbar__surface {\n background-color: #333333;\n}\n\n.mdc-snackbar__label {\n color: rgba(255, 255, 255, 0.87);\n}\n\n.mdc-snackbar__surface {\n min-width: 344px;\n}\n@media (max-width: 480px), (max-width: 344px) {\n .mdc-snackbar__surface {\n min-width: 100%;\n }\n}\n\n.mdc-snackbar__surface {\n max-width: 672px;\n}\n\n.mdc-snackbar__surface {\n /* @alternate */\n box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);\n}\n\n.mdc-snackbar__surface {\n border-radius: 4px;\n /* @alternate */\n border-radius: var(--mdc-shape-small, 4px);\n}\n\n.mdc-snackbar--opening,\n.mdc-snackbar--open,\n.mdc-snackbar--closing {\n display: flex;\n}\n\n.mdc-snackbar--open .mdc-snackbar__label,\n.mdc-snackbar--open .mdc-snackbar__actions {\n visibility: visible;\n}\n\n.mdc-snackbar--leading {\n justify-content: flex-start;\n}\n\n.mdc-snackbar--stacked .mdc-snackbar__label {\n /* @noflip */\n /*rtl:ignore*/\n padding-left: 16px;\n /* @noflip */\n /*rtl:ignore*/\n padding-right: 8px;\n padding-bottom: 12px;\n}\n[dir=rtl] .mdc-snackbar--stacked .mdc-snackbar__label, .mdc-snackbar--stacked .mdc-snackbar__label[dir=rtl] {\n /*rtl:begin:ignore*/\n /* @noflip */\n /*rtl:ignore*/\n padding-left: 8px;\n /* @noflip */\n /*rtl:ignore*/\n padding-right: 16px;\n /*rtl:end:ignore*/\n}\n\n.mdc-snackbar--stacked .mdc-snackbar__surface {\n flex-direction: column;\n align-items: flex-start;\n}\n.mdc-snackbar--stacked .mdc-snackbar__actions {\n align-self: flex-end;\n margin-bottom: 8px;\n}\n\n.mdc-snackbar__surface {\n /* @noflip */\n /*rtl:ignore*/\n padding-left: 0;\n /* @noflip */\n /*rtl:ignore*/\n padding-right: 8px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n box-sizing: border-box;\n transform: scale(0.8);\n opacity: 0;\n}\n.mdc-snackbar__surface::before {\n position: absolute;\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n border: 1px solid transparent;\n border-radius: inherit;\n content: \"\";\n pointer-events: none;\n}\n@media screen and (forced-colors: active) {\n .mdc-snackbar__surface::before {\n border-color: CanvasText;\n }\n}\n[dir=rtl] .mdc-snackbar__surface, .mdc-snackbar__surface[dir=rtl] {\n /*rtl:begin:ignore*/\n /* @noflip */\n /*rtl:ignore*/\n padding-left: 8px;\n /* @noflip */\n /*rtl:ignore*/\n padding-right: 0;\n /*rtl:end:ignore*/\n}\n\n.mdc-snackbar--open .mdc-snackbar__surface {\n transform: scale(1);\n opacity: 1;\n pointer-events: auto;\n transition: opacity 150ms 0ms cubic-bezier(0, 0, 0.2, 1), transform 150ms 0ms cubic-bezier(0, 0, 0.2, 1);\n}\n.mdc-snackbar--closing .mdc-snackbar__surface {\n transform: scale(1);\n transition: opacity 75ms 0ms cubic-bezier(0.4, 0, 1, 1);\n}\n\n.mdc-snackbar__label {\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 /* @noflip */\n /*rtl:ignore*/\n padding-left: 16px;\n /* @noflip */\n /*rtl:ignore*/\n padding-right: 8px;\n width: 100%;\n flex-grow: 1;\n box-sizing: border-box;\n margin: 0;\n visibility: hidden;\n padding-top: 14px;\n padding-bottom: 14px;\n}\n[dir=rtl] .mdc-snackbar__label, .mdc-snackbar__label[dir=rtl] {\n /*rtl:begin:ignore*/\n /* @noflip */\n /*rtl:ignore*/\n padding-left: 8px;\n /* @noflip */\n /*rtl:ignore*/\n padding-right: 16px;\n /*rtl:end:ignore*/\n}\n\n.mdc-snackbar__label::before {\n display: inline;\n content: attr(data-mdc-snackbar-label-text);\n}\n\n.mdc-snackbar__actions {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n box-sizing: border-box;\n visibility: hidden;\n}\n\n.mdc-snackbar__action:not(:disabled) {\n color: #bb86fc;\n}\n.mdc-snackbar__action .mdc-button__ripple::before, .mdc-snackbar__action .mdc-button__ripple::after {\n background-color: #bb86fc;\n /* @alternate */\n background-color: var(--mdc-ripple-color, #bb86fc);\n}\n.mdc-snackbar__action:hover .mdc-button__ripple::before, .mdc-snackbar__action.mdc-ripple-surface--hover .mdc-button__ripple::before {\n opacity: 0.08;\n /* @alternate */\n opacity: var(--mdc-ripple-hover-opacity, 0.08);\n}\n.mdc-snackbar__action.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .mdc-snackbar__action:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before {\n transition-duration: 75ms;\n opacity: 0.24;\n /* @alternate */\n opacity: var(--mdc-ripple-focus-opacity, 0.24);\n}\n.mdc-snackbar__action:not(.mdc-ripple-upgraded) .mdc-button__ripple::after {\n transition: opacity 150ms linear;\n}\n.mdc-snackbar__action:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after {\n transition-duration: 75ms;\n opacity: 0.24;\n /* @alternate */\n opacity: var(--mdc-ripple-press-opacity, 0.24);\n}\n.mdc-snackbar__action.mdc-ripple-upgraded {\n --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24);\n}\n\n.mdc-snackbar__dismiss {\n color: rgba(255, 255, 255, 0.87);\n}\n.mdc-snackbar__dismiss .mdc-icon-button__ripple::before, .mdc-snackbar__dismiss .mdc-icon-button__ripple::after {\n background-color: rgba(255, 255, 255, 0.87);\n /* @alternate */\n background-color: var(--mdc-ripple-color, rgba(255, 255, 255, 0.87));\n}\n.mdc-snackbar__dismiss:hover .mdc-icon-button__ripple::before, .mdc-snackbar__dismiss.mdc-ripple-surface--hover .mdc-icon-button__ripple::before {\n opacity: 0.08;\n /* @alternate */\n opacity: var(--mdc-ripple-hover-opacity, 0.08);\n}\n.mdc-snackbar__dismiss.mdc-ripple-upgraded--background-focused .mdc-icon-button__ripple::before, .mdc-snackbar__dismiss:not(.mdc-ripple-upgraded):focus .mdc-icon-button__ripple::before {\n transition-duration: 75ms;\n opacity: 0.24;\n /* @alternate */\n opacity: var(--mdc-ripple-focus-opacity, 0.24);\n}\n.mdc-snackbar__dismiss:not(.mdc-ripple-upgraded) .mdc-icon-button__ripple::after {\n transition: opacity 150ms linear;\n}\n.mdc-snackbar__dismiss:not(.mdc-ripple-upgraded):active .mdc-icon-button__ripple::after {\n transition-duration: 75ms;\n opacity: 0.24;\n /* @alternate */\n opacity: var(--mdc-ripple-press-opacity, 0.24);\n}\n.mdc-snackbar__dismiss.mdc-ripple-upgraded {\n --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24);\n}\n\n.mdc-snackbar__dismiss.mdc-snackbar__dismiss {\n width: 36px;\n height: 36px;\n padding: 6px;\n font-size: 18px;\n}\n.mdc-snackbar__dismiss.mdc-snackbar__dismiss .mdc-icon-button__focus-ring {\n display: none;\n}\n.mdc-snackbar__dismiss.mdc-snackbar__dismiss.mdc-ripple-upgraded--background-focused .mdc-icon-button__focus-ring, .mdc-snackbar__dismiss.mdc-snackbar__dismiss:not(.mdc-ripple-upgraded):focus .mdc-icon-button__focus-ring {\n display: block;\n max-height: 36px;\n max-width: 36px;\n}\n@media screen and (forced-colors: active) {\n .mdc-snackbar__dismiss.mdc-snackbar__dismiss.mdc-ripple-upgraded--background-focused .mdc-icon-button__focus-ring, .mdc-snackbar__dismiss.mdc-snackbar__dismiss:not(.mdc-ripple-upgraded):focus .mdc-icon-button__focus-ring {\n pointer-events: none;\n border: 2px solid transparent;\n border-radius: 6px;\n box-sizing: content-box;\n position: absolute;\n top: 50%;\n /* @noflip */\n /*rtl:ignore*/\n left: 50%;\n /* @noflip */\n /*rtl:ignore*/\n transform: translate(-50%, -50%);\n height: 100%;\n width: 100%;\n }\n}\n@media screen and (forced-colors: active) and (forced-colors: active) {\n .mdc-snackbar__dismiss.mdc-snackbar__dismiss.mdc-ripple-upgraded--background-focused .mdc-icon-button__focus-ring, .mdc-snackbar__dismiss.mdc-snackbar__dismiss:not(.mdc-ripple-upgraded):focus .mdc-icon-button__focus-ring {\n border-color: CanvasText;\n }\n}\n@media screen and (forced-colors: active) {\n .mdc-snackbar__dismiss.mdc-snackbar__dismiss.mdc-ripple-upgraded--background-focused .mdc-icon-button__focus-ring::after, .mdc-snackbar__dismiss.mdc-snackbar__dismiss:not(.mdc-ripple-upgraded):focus .mdc-icon-button__focus-ring::after {\n content: \"\";\n border: 2px solid transparent;\n border-radius: 8px;\n display: block;\n position: absolute;\n top: 50%;\n /* @noflip */\n /*rtl:ignore*/\n left: 50%;\n /* @noflip */\n /*rtl:ignore*/\n transform: translate(-50%, -50%);\n height: calc(100% + 4px);\n width: calc(100% + 4px);\n }\n}\n@media screen and (forced-colors: active) and (forced-colors: active) {\n .mdc-snackbar__dismiss.mdc-snackbar__dismiss.mdc-ripple-upgraded--background-focused .mdc-icon-button__focus-ring::after, .mdc-snackbar__dismiss.mdc-snackbar__dismiss:not(.mdc-ripple-upgraded):focus .mdc-icon-button__focus-ring::after {\n border-color: CanvasText;\n }\n}\n.mdc-snackbar__dismiss.mdc-snackbar__dismiss.mdc-icon-button--reduced-size .mdc-icon-button__ripple {\n width: 36px;\n height: 36px;\n margin-top: 0px;\n margin-bottom: 0px;\n margin-right: 0px;\n margin-left: 0px;\n}\n.mdc-snackbar__dismiss.mdc-snackbar__dismiss.mdc-icon-button--reduced-size.mdc-ripple-upgraded--background-focused .mdc-icon-button__focus-ring, .mdc-snackbar__dismiss.mdc-snackbar__dismiss.mdc-icon-button--reduced-size:not(.mdc-ripple-upgraded):focus .mdc-icon-button__focus-ring {\n max-height: 36px;\n max-width: 36px;\n}\n.mdc-snackbar__dismiss.mdc-snackbar__dismiss .mdc-icon-button__touch {\n position: absolute;\n top: 50%;\n height: 36px;\n /* @noflip */\n /*rtl:ignore*/\n left: 50%;\n width: 36px;\n transform: translate(-50%, -50%);\n}\n\n.mdc-snackbar__action + .mdc-snackbar__dismiss {\n /* @noflip */\n /*rtl:ignore*/\n margin-left: 8px;\n /* @noflip */\n /*rtl:ignore*/\n margin-right: 0;\n}\n[dir=rtl] .mdc-snackbar__action + .mdc-snackbar__dismiss, .mdc-snackbar__action + .mdc-snackbar__dismiss[dir=rtl] {\n /*rtl:begin:ignore*/\n /* @noflip */\n /*rtl:ignore*/\n margin-left: 0;\n /* @noflip */\n /*rtl:ignore*/\n margin-right: 8px;\n /*rtl:end:ignore*/\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 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:map';\n@use 'sass:math';\n@use 'sass:meta';\n@use '@material/animation/variables' as animation-variables;\n@use '@material/theme/custom-properties';\n@use '@material/base/mixins' as base-mixins;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/rtl/rtl';\n@use '@material/theme/css';\n@use '@material/theme/theme';\n@use '@material/theme/theme-color';\n\n$baseline-color: black !default;\n$umbra-opacity: 0.2 !default;\n$penumbra-opacity: 0.14 !default;\n$ambient-opacity: 0.12 !default;\n\n$umbra-map: (\n 0: '0px 0px 0px 0px',\n 1: '0px 2px 1px -1px',\n 2: '0px 3px 1px -2px',\n 3: '0px 3px 3px -2px',\n 4: '0px 2px 4px -1px',\n 5: '0px 3px 5px -1px',\n 6: '0px 3px 5px -1px',\n 7: '0px 4px 5px -2px',\n 8: '0px 5px 5px -3px',\n 9: '0px 5px 6px -3px',\n 10: '0px 6px 6px -3px',\n 11: '0px 6px 7px -4px',\n 12: '0px 7px 8px -4px',\n 13: '0px 7px 8px -4px',\n 14: '0px 7px 9px -4px',\n 15: '0px 8px 9px -5px',\n 16: '0px 8px 10px -5px',\n 17: '0px 8px 11px -5px',\n 18: '0px 9px 11px -5px',\n 19: '0px 9px 12px -6px',\n 20: '0px 10px 13px -6px',\n 21: '0px 10px 13px -6px',\n 22: '0px 10px 14px -6px',\n 23: '0px 11px 14px -7px',\n 24: '0px 11px 15px -7px',\n) !default;\n\n$penumbra-map: (\n 0: '0px 0px 0px 0px',\n 1: '0px 1px 1px 0px',\n 2: '0px 2px 2px 0px',\n 3: '0px 3px 4px 0px',\n 4: '0px 4px 5px 0px',\n 5: '0px 5px 8px 0px',\n 6: '0px 6px 10px 0px',\n 7: '0px 7px 10px 1px',\n 8: '0px 8px 10px 1px',\n 9: '0px 9px 12px 1px',\n 10: '0px 10px 14px 1px',\n 11: '0px 11px 15px 1px',\n 12: '0px 12px 17px 2px',\n 13: '0px 13px 19px 2px',\n 14: '0px 14px 21px 2px',\n 15: '0px 15px 22px 2px',\n 16: '0px 16px 24px 2px',\n 17: '0px 17px 26px 2px',\n 18: '0px 18px 28px 2px',\n 19: '0px 19px 29px 2px',\n 20: '0px 20px 31px 3px',\n 21: '0px 21px 33px 3px',\n 22: '0px 22px 35px 3px',\n 23: '0px 23px 36px 3px',\n 24: '0px 24px 38px 3px',\n) !default;\n\n$ambient-map: (\n 0: '0px 0px 0px 0px',\n 1: '0px 1px 3px 0px',\n 2: '0px 1px 5px 0px',\n 3: '0px 1px 8px 0px',\n 4: '0px 1px 10px 0px',\n 5: '0px 1px 14px 0px',\n 6: '0px 1px 18px 0px',\n 7: '0px 2px 16px 1px',\n 8: '0px 3px 14px 2px',\n 9: '0px 3px 16px 2px',\n 10: '0px 4px 18px 3px',\n 11: '0px 4px 20px 3px',\n 12: '0px 5px 22px 4px',\n 13: '0px 5px 24px 4px',\n 14: '0px 5px 26px 4px',\n 15: '0px 6px 28px 5px',\n 16: '0px 6px 30px 5px',\n 17: '0px 6px 32px 5px',\n 18: '0px 7px 34px 6px',\n 19: '0px 7px 36px 6px',\n 20: '0px 8px 38px 7px',\n 21: '0px 8px 40px 7px',\n 22: '0px 8px 42px 7px',\n 23: '0px 9px 44px 8px',\n 24: '0px 9px 46px 8px',\n) !default;\n\n// The css property used for elevation. In most cases this should not be changed. It is exposed\n// as a variable for abstraction / easy use when needing to reference the property directly, for\n// example in a `will-change` rule.\n$property: box-shadow !default;\n\n// The default color for the elevation overlay.\n$overlay-color: #fff;\n\n// The css property used for elevation overlay transitions. In most cases this should not be changed. It is exposed\n// as a variable for abstraction / easy use when needing to reference the property directly, for\n// example in a `will-change` rule.\n$overlay-property: opacity !default;\n\n// The default duration value for elevation transitions.\n$transition-duration: 280ms !default;\n\n// The default easing value for elevation transitions.\n$transition-timing-function: animation-variables.$standard-curve-timing-function !default;\n\n///\n/// Sets the elevation transition value.\n///\n/// @param {String} $duration - The duration of the transition.\n/// @param {String} $easing - The easing function for the transition.\n/// @return {String}\n///\n@function transition-value(\n $duration: $transition-duration,\n $easing: $transition-timing-function\n) {\n @return #{$property} #{$duration} #{$easing};\n}\n\n///\n/// Sets the elevation overlay transition value.\n///\n/// @param {String} $duration - The duration of the transition.\n/// @param {String} $easing - The easing function for the transition.\n/// @return {String}\n///\n@function overlay-transition-value(\n $duration: $transition-duration,\n $easing: $transition-timing-function\n) {\n @return #{$overlay-property} #{$duration} #{$easing};\n}\n\n///\n/// Creates a box-shadow from the Material elevation system.\n/// @param {Number} $level - the level of the Material elevation system.\n/// @param {String} $color - the color of the shadow.\n/// @param {Number} $opacity-boost [0] - optional opacity boost for the shadow.\n/// @return {List} the complete box shadow.\n///\n@function _box-shadow($level, $color, $opacity-boost: 0) {\n $color: theme-color.prop-value($color);\n $umbra-z-value: map.get($umbra-map, $level);\n $penumbra-z-value: map.get($penumbra-map, $level);\n $ambient-z-value: map.get($ambient-map, $level);\n\n $umbra-color: rgba($color, $umbra-opacity + $opacity-boost);\n $penumbra-color: rgba($color, $penumbra-opacity + $opacity-boost);\n $ambient-color: rgba($color, $ambient-opacity + $opacity-boost);\n\n @return (\n #{'#{$umbra-z-value} #{$umbra-color}'},\n #{'#{$penumbra-z-value} #{$penumbra-color}'},\n #{$ambient-z-value} $ambient-color\n );\n}\n\n// Returns the correct box-shadow specified by $z-value.\n// The $z-value must be between 0 and 24.\n// If $color has an alpha channel, it will be ignored and overridden. To increase the opacity of the shadow, use\n// $opacity-boost.\n@function elevation-box-shadow(\n $z-value,\n $color: $baseline-color,\n $opacity-boost: 0\n) {\n @if meta.type-of($z-value) != number or not math.is-unitless($z-value) {\n @error \"$z-value must be a unitless number, but received '#{$z-value}'\";\n }\n\n @if $z-value < 0 or $z-value > 24 {\n @error \"$z-value must be between 0 and 24, but received '#{$z-value}'\";\n }\n\n @return _box-shadow($z-value, $color, $opacity-boost);\n}\n\n///\n/// Returns a shadow or null if params are invalid.\n/// @param {Number} $level - the level of the Material elevation system.\n/// @param {String} $color - the color of the shadow.\n/// @return {List|null} the complete box shadow or null.\n///\n@function _shadow($level, $color) {\n @if $level == null and $color == null {\n // Do not emit a warning if both are null, which means the user did not\n // provide tokens.\n @return null;\n }\n\n @if $level == null or $color == null {\n // If one of the tokens is null, emit a warning: the user may not realize\n // that both are required.\n @warn \"both $level and $color are required; received $level: '#{$level}', $color: '#{$color}'\";\n @return null;\n }\n\n @if $level < 0 or $level > 24 {\n @warn \"$level must be between 0 and 24; received '#{$level}'\";\n @return null;\n }\n\n @return _box-shadow($level, $color);\n}\n\n@function get-elevation($level) {\n @return (box-shadow: elevation-box-shadow($level));\n}\n\n///\n/// Sets the shadow of the element.\n///\n/// @param {String} $box-shadow - The shadow to apply to the element.\n///\n@mixin _box-shadow($shadow, $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(box-shadow, $shadow);\n }\n}\n\n///\n/// Sets the shadow of the element.\n///\n/// @param {String} $box-shadow - The shadow to apply to the element.\n///\n@mixin shadow($box-shadow, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n\n @include feature-targeting.targets($feat-color) {\n @if custom-properties.is-custom-prop($box-shadow) {\n // TODO(b/185188458): Use theme.property() once resolved.\n $fallback: custom-properties.get-fallback($box-shadow);\n\n // var(--<box-shadow-prop>, var(--m-elevation-box-shadow-for-gss))\n $gss-custom-prop: custom-properties.create(\n custom-properties.get-varname($box-shadow),\n custom-properties.create(elevation-box-shadow-for-gss)\n );\n\n $value: custom-properties.create-var($gss-custom-prop);\n @if $value == null {\n // Custom properties are disabled, since $gss-custom-prop\n // does not have a fallback. Avoid emitting two non-custom\n // prop declarations by setting $fallback to null.\n $value: $fallback;\n $fallback: null;\n }\n\n @include custom-properties.declaration(\n custom-properties.create(elevation-box-shadow-for-gss, $fallback)\n );\n @include css.declaration(box-shadow, $value, $fallback-value: $fallback);\n } @else {\n /* @alternate */\n box-shadow: $box-shadow;\n }\n }\n}\n\n///\n/// Sets the elevation overlay surface required positioning.\n///\n@mixin overlay-surface-position($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n /* @alternate */\n position: relative;\n }\n}\n\n///\n/// Sets the dimensions of the elevation overlay, including positioning and sizing.\n///\n/// @param {Number} $width - The width of the elevation overlay\n/// @param {Number} [$height] - The height of the elevation overlay\n/// @param {Boolean} [$has-content-sizing] - Set to false if the container has no content sizing\n///\n@mixin overlay-dimensions(\n $width,\n $height: $width,\n $has-content-sizing: true,\n $query: feature-targeting.all()\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-elevation-overlay {\n @include feature-targeting.targets($feat-structure) {\n @include theme.property(width, $width);\n @include theme.property(height, $height);\n\n @if $has-content-sizing {\n top: 0;\n @include rtl.ignore-next-line();\n left: 0;\n } @else {\n top: 50%;\n @include rtl.ignore-next-line();\n left: 50%;\n transform: translate(-50%, -50%);\n }\n }\n }\n}\n\n///\n/// Sets the elevation overlay fill color.\n/// Expected to be called directly on the elevation overlay element.\n///\n/// @param {Color} $color - The color of the elevation overlay.\n///\n@mixin overlay-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///\n/// Applies the given color to the container of the overlay.\n/// @param {color} $color - the color of the overlay container\n///\n@mixin overlay-container-color($color, $query: feature-targeting.all()) {\n .mdc-elevation-overlay {\n @include overlay-fill-color($color, $query: $query);\n }\n}\n\n///\n/// Sets the elevation overlay opacity.\n/// Expected to be called from a parent element.\n///\n/// @param {Number} $opacity - The opacity of the elevation overlay.\n///\n@mixin overlay-opacity($opacity, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n\n .mdc-elevation-overlay {\n @include feature-targeting.targets($feat-color) {\n @include theme.property(opacity, $opacity);\n }\n }\n}\n\n// Applies the correct CSS rules to an element to give it the elevation specified by $z-value.\n// The $z-value must be between 0 and 24.\n// If $color has an alpha channel, it will be ignored and overridden. To increase the opacity of the shadow, use\n// $opacity-boost.\n@mixin elevation(\n $z-value,\n $color: $baseline-color,\n $opacity-boost: 0,\n $query: feature-targeting.all()\n) {\n $box-shadow: elevation-box-shadow(\n $z-value,\n $color: $color,\n $opacity-boost: $opacity-boost\n );\n\n @include shadow($box-shadow, $query: $query);\n}\n\n///\n/// Represents the configurable values of the elevation theme.\n///\n$_theme-values: (\n shadow: null,\n overlay-opacity: null,\n overlay-color: null,\n);\n\n///\n/// Applies the shadow theme with the given $resolver function.\n/// @param {Function} $resolver - a function that returns a valid theme config.\n/// @see resolver for an example and expected arguments and return value.\n/// Accepts the following optional keyword args:\n/// @param {Number} $elevation - the level in the elevation system.\n/// @param {String} $shadow-color - the color used for the shadow.\n///\n@mixin with-resolver($resolver, $query: feature-targeting.all(), $args...) {\n @if $resolver {\n @include _theme(meta.call($resolver, $args...), $query: $query);\n }\n}\n\n///\n/// Applies the given theme with validation.\n/// @param {Map} $theme - @see $_theme-values for accepted theme properties.\n///\n@mixin theme($theme: (), $query: feature-targeting.all()) {\n @include theme.validate-theme($_theme-values, $theme);\n @include _theme($theme, $query: $query);\n}\n\n///\n/// Applies the given theme.\n/// @param {Map} $theme - @see $_theme-values for accepted theme properties.\n///\n@mixin _theme($theme: (), $query: feature-targeting.all()) {\n @include shadow(map.get($theme, shadow), $query: $query);\n @include overlay-opacity(map.get($theme, overlay-opacity), $query: $query);\n @include overlay-container-color(\n map.get($theme, overlay-color),\n $query: $query\n );\n}\n\n///\n/// Transforms the following optional parameters into a theme config.\n/// @param {Number} $elevation - the level of the elevation system in Material.\n/// @param {String} $shadow-color - the color to be used by the shadow.\n/// @return {Map} @see $_theme-values for accepted theme properties.\n///\n@function resolver($args...) {\n $opts: meta.keywords($args);\n $elevation: map.get($opts, elevation);\n $shadow-color: map.get($opts, shadow-color);\n @if custom-properties.is-custom-prop($elevation) {\n @return _resolve-custom-props($elevation, $shadow-color);\n }\n\n @return (shadow: _shadow($elevation, $shadow-color));\n}\n\n@function _resolve-custom-props($elevation, $shadow-color) {\n $fallback-dp: custom-properties.get-fallback($elevation);\n $fallback-shadow-color: custom-properties.get-fallback($shadow-color);\n $shadow: custom-properties.set-fallback(\n $elevation,\n _shadow($fallback-dp, $fallback-shadow-color)\n );\n @return (shadow: $shadow);\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 o