@material/fab
Version:
The Material Components for the web floating action button component
1 lines • 150 kB
Source Map (JSON)
{"version":3,"sources":["webpack:///./packages/mdc-fab/mdc-fab.scss","webpack:///mdc-fab.scss","webpack:///./packages/material-components-web/node_modules/@material/elevation/_elevation.scss","webpack:///./packages/material-components-web/node_modules/@material/theme/_css.scss","webpack:///./packages/material-components-web/node_modules/@material/theme/_gss.scss","webpack:///./packages/mdc-fab/_fab.scss","webpack:///./packages/material-components-web/node_modules/@material/elevation/_elevation-theme.scss","webpack:///./packages/mdc-fab/_fab-theme.scss","webpack:///./packages/material-components-web/node_modules/@material/ripple/_ripple-theme.scss","webpack:///./packages/material-components-web/node_modules/@material/focus-ring/_focus-ring.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/mdc-fab/_extended-fab-theme.scss","webpack:///./packages/material-components-web/node_modules/@material/rtl/_rtl.scss","webpack:///./packages/material-components-web/node_modules/@material/ripple/_ripple.scss","webpack:///./packages/material-components-web/node_modules/@material/animation/_animation.scss"],"names":[],"mappings":";;;;;;;AAqCE;EAOM;AC1CR;;AC0DE;EAGM;EACA;EACA;ECCF;ECZF;EDwBA;EDFI;ECVF;ECZF;EDwBA;AF/DJ;;AI4CE;ECyPE;EACA;ED7IA;EACA;EACA;EACA;EACA;EACA,WEnIK;EFoIL,YEpIK;EFqIL;EACA;EACA;EACA;EACA;EACA;KAAA;MAAA;UAAA;EACA;EACA;EAGA;EAIA;EAAA;EAAA;AJxJJ;AKmSE;EH1PE;EAAA;EGgQI;EFnRJ;EAAc;EEqRV;ALnSR;AIyJE;EAEI;EACA;AJxJN;AI4JE;EC0FI;EACA,2HAqGS;ALxVf;AOgbE;EF9LI;EACA,2HAqGS;ALpVf;AI4JE;EAEI;AJ3JN;AIgKI;EItJA;EACA;EACA;EACA;EACA;EACA;ELhBA;EAAc;EKkBd;ELlBA;EAAc;EKoBd;UAAA;EACA;;KAzB0B;EA0B1B;;KApB4B;ARmBhC;AScI;EL8HA;IIxIE;ERAJ;AACF;AQEI;EACE;EACA;EACA,kBAhEgB;EAiEhB;EACA;EACA;ELlCF;EAAc;EKoCZ;ELpCF;EAAc;EKsCZ;UAAA;EACA,wBA/BgB;EAgChB,uBAhCgB;ARkCtB;ASPI;EDPA;IAeI;ERGN;AACF;AIwHE;ECqEI;EACA,4HAqGS;AL/Rf;AIyHE;EAOI;AJ7HN;AIiIE;EAEI;AJhIN;AIyIE;EAEI;AJxIN;;AIxDE;EA0ME,WE9NU;EF+NV,YE/NU;ANiFd;;AIzDE;EMqQE;EACA;ERvQE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;UAAA;EAZE;ECZF;EDwBA;EAAA;ECnBA;EAAc;EDmBd;ECnBA;EAAc;EDmBd;EEuNA;EACA;EACA,YOtPc;EPwPd;EACA;AJxIJ;AWgEE;ETpJE;AFuFJ;AWZE;ER9FE;EAAc;EDmBd;ECnBA;EAAc;EDmBd;AF+FJ;AY7FM;EACE;ETtBJ;EAAc;EDmBd;ECnBA;EAAc;EDmBd;EUKI;AZoGR;;AWvBE;ERrGE;EAAc;EDmBd;ECnBA;EAAc;EDmBd;AFkHJ;AYhHM;EACE;ETtBJ;EAAc;EDmBd;ECnBA;EAAc;EDmBd;EUKI;AZuHR;;AInIE;EL8BE,eAHsB;EAItB,kBAJsB;EAcpB,iBANwB;EAOxB,gBAPwB;ACuG9B;AInII;ELZA;EACA;EACA,YAtCK;EI6BL;EAAc;EJeZ;EACA,WA7CG;EA8CH;UAAA;AC+IN;;AIrIE;EKhDE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ATyLJ;AS1II;ELRF;IKjCI;ETuLJ;AACF;;AInJE;EA0OE;EACA;EACA;EACA;EACA;AJnFJ;;AIvJE;EAqNE;EAAA;EAAA;EAQA;EACA;AJjEJ;;AIvJE;EA4OE;EACA;EACA;AJjFJ;;AIzJE;EAmPE;UAAA;EACA;EAIA;EAAA;EAAA;AJzFJ;AI6FE;EAEI;UAAA;EAIA;EAAA;EAAA;AJ/FN;;AI1JE;EF/CI;ECZF;EDwBA;EGyNE;EACA,2HAqGS;AL1Hf;AMjCE;EJpKE;EAAA;EAAA;AF0MJ;AMzBI;EJ7LE;ECZF;EDwBA;AF+MJ;AM+TE;EJ9gBE;AFkNJ;AMkUI;EJphBA;AFqNJ;;AaaE;EACE;IACE,+DC3R2B;YD2R3B,uDC3R2B;IDgS3B;YAAA;EbdJ;EaiBE;IACE;YAAA;EbfJ;AACF;;AaGE;EACE;IACE,+DC3R2B;YD2R3B,uDC3R2B;IDgS3B;YAAA;EbdJ;EaiBE;IACE;YAAA;EbfJ;AACF;AamBE;EACE;IACE;YAAA;IACA;EbjBJ;EaoBE;IACE;EblBJ;AACF;AaUE;EACE;IACE;YAAA;IACA;EbjBJ;EaoBE;IACE;EblBJ;AACF;AaqBE;EACE;IACE;YAAA;IACA;EbnBJ;EasBE;IACE;EbpBJ;AACF;AaYE;EACE;IACE;YAAA;IACA;EbnBJ;EasBE;IACE;EbpBJ;AACF;AIhME;ESbE;EACA;EACA;EACA;EACA;EACA;EAEA;EAGE;Ab6MN;AazME;;EAGI;EACA;EACA;EACA;EACA;Ab0MN;AatME;EAGI;EX5EA;ECZF;EDwBA;AFyQJ;Aa5LE;EXzFI;ECZF;EDwBA;AF8QJ;AarLI;EAEI;UAAA;AbsLR;AalLI;EAEI;EVpHJ;EAAc;EUsHV;EACA;UAAA;EACA;UAAA;AboLR;Aa9KI;EAEI;EVhIJ;EAAc;EUkIV;AbgLR;Aa1KI;EAEI;UAAA;Ab2KR;AanKI;EAEI;UAAA;EAKA;UAAA;AbgKR;AalJE;;EAGI;EV1KF;EAAc;EU4KZ;EACA;EACA;AboJN;Aa/II;EAEI;EACA;AbgJR;AOvOI;ELxFE;ECZF;EDwBA;AFwTJ;AO6JE;ELjeI;ECZF;EDwBA;AF6TJ;AOwJE;EA9QI;ELnNA;ECZF;EDwBA;AFmUJ;AOlGM;EAEI;APmGV;AO9FQ;EAEI,yBAhRO;EL0Bb;ECZF;EDwBA;AF4UJ;AOvFI;ELrPA;AF+UJ;AI9QI;ESqJA;EACA;EACA;EACA;EACA;EAGA;ETxJI;AJmRR;AO4FE;EAEI;AP3FN;AO+FE;;ELtcI;ECZF;EDwBA;AFiWJ,C","file":"mdc.fab.css","sourcesContent":["//\n// Copyright 2019 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:math';\n@use '@material/base/mixins' as base-mixins;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/rtl/rtl';\n\n$height: 48px !default;\n$width: $height !default;\n\n/// Styles applied to the component's touch target wrapper element.\n@mixin wrapper($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-touch-target-wrapper {\n @include feature-targeting.targets($feat-structure) {\n // Ensure that styles are only emitted once across all components that\n // have increased touch targets.\n @include base-mixins.emit-once('mdc-touch-target/wrapper') {\n // NOTE: Will change to `inline-block` in the future, but keeping as is\n // temporarily for backwards-compatibility.\n display: inline;\n }\n }\n }\n}\n\n/// Styles applied to the component's inner touch target element.\n/// By default, only sets the inner element height to the minimum touch target\n/// height ($mdc-touch-target-height).\n/// @param {Boolean} $set-width [false] - Sets the inner element width to the\n/// minimum touch target width ($mdc-touch-target-width).\n/// @param $height [$mdc-touch-target-height] - Touch target height.\n/// @param $width [$mdc-touch-target-width] - Touch target width.\n@mixin touch-target(\n $set-width: false,\n $query: feature-targeting.all(),\n $height: $height,\n $width: $width\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n position: absolute;\n top: 50%;\n height: $height;\n }\n\n @if $set-width {\n @include feature-targeting.targets($feat-structure) {\n @include rtl.ignore-next-line();\n left: 50%;\n width: $width;\n transform: translate(-50%, -50%);\n }\n } @else {\n @include feature-targeting.targets($feat-structure) {\n left: 0;\n right: 0;\n transform: translateY(-50%);\n }\n }\n}\n\n/// Applies margin to the component with the increased touch target,\n/// to compensate for the touch target.\n@mixin margin(\n $component-height,\n $component-width: null,\n $touch-target-height: $height,\n $touch-target-width: $width,\n $query: feature-targeting.all()\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n $vertical-margin-value: math.div($touch-target-height - $component-height, 2);\n\n @include feature-targeting.targets($feat-structure) {\n margin-top: $vertical-margin-value;\n margin-bottom: $vertical-margin-value;\n }\n\n @if $component-width {\n $horizontal-margin-value: math.div(\n $touch-target-width - $component-width,\n 2\n );\n\n @include feature-targeting.targets($feat-structure) {\n margin-right: $horizontal-margin-value;\n margin-left: $horizontal-margin-value;\n }\n }\n}\n",".mdc-touch-target-wrapper {\n display: inline;\n}\n\n.mdc-elevation-overlay {\n position: absolute;\n border-radius: inherit;\n pointer-events: none;\n opacity: 0;\n /* @alternate */\n opacity: var(--mdc-elevation-overlay-opacity, 0);\n transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);\n background-color: #fff;\n /* @alternate */\n background-color: var(--mdc-elevation-overlay-color, #fff);\n}\n\n.mdc-fab {\n /* @alternate */\n position: relative;\n display: inline-flex;\n position: relative;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: 56px;\n height: 56px;\n padding: 0;\n border: none;\n fill: currentColor;\n text-decoration: none;\n cursor: pointer;\n user-select: none;\n -moz-appearance: none;\n -webkit-appearance: none;\n overflow: visible;\n transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), opacity 15ms linear 30ms, transform 270ms 0ms cubic-bezier(0, 0, 0.2, 1);\n}\n.mdc-fab .mdc-elevation-overlay {\n width: 100%;\n height: 100%;\n top: 0;\n /* @noflip */\n /*rtl:ignore*/\n left: 0;\n}\n.mdc-fab::-moz-focus-inner {\n padding: 0;\n border: 0;\n}\n.mdc-fab:hover {\n /* @alternate */\n box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);\n}\n.mdc-fab.mdc-ripple-upgraded--background-focused, .mdc-fab:not(.mdc-ripple-upgraded):focus {\n /* @alternate */\n box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);\n}\n.mdc-fab .mdc-fab__focus-ring {\n position: absolute;\n}\n.mdc-fab.mdc-ripple-upgraded--background-focused .mdc-fab__focus-ring, .mdc-fab:not(.mdc-ripple-upgraded):focus .mdc-fab__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: calc(\n 100% + 4px\n );\n width: calc(\n 100% + 4px\n );\n}\n@media screen and (forced-colors: active) {\n .mdc-fab.mdc-ripple-upgraded--background-focused .mdc-fab__focus-ring, .mdc-fab:not(.mdc-ripple-upgraded):focus .mdc-fab__focus-ring {\n border-color: CanvasText;\n }\n}\n.mdc-fab.mdc-ripple-upgraded--background-focused .mdc-fab__focus-ring::after, .mdc-fab:not(.mdc-ripple-upgraded):focus .mdc-fab__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@media screen and (forced-colors: active) {\n .mdc-fab.mdc-ripple-upgraded--background-focused .mdc-fab__focus-ring::after, .mdc-fab:not(.mdc-ripple-upgraded):focus .mdc-fab__focus-ring::after {\n border-color: CanvasText;\n }\n}\n.mdc-fab:active, .mdc-fab:focus:active {\n /* @alternate */\n box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);\n}\n.mdc-fab:active, .mdc-fab:focus {\n outline: none;\n}\n.mdc-fab:hover {\n cursor: pointer;\n}\n.mdc-fab > svg {\n width: 100%;\n}\n\n.mdc-fab--mini {\n width: 40px;\n height: 40px;\n}\n\n.mdc-fab--extended {\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-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));\n font-size: 0.875rem;\n /* @alternate */\n font-size: var(--mdc-typography-button-font-size, 0.875rem);\n line-height: 2.25rem;\n /* @alternate */\n line-height: var(--mdc-typography-button-line-height, 2.25rem);\n font-weight: 500;\n /* @alternate */\n font-weight: var(--mdc-typography-button-font-weight, 500);\n letter-spacing: 0.0892857143em;\n /* @alternate */\n letter-spacing: var(--mdc-typography-button-letter-spacing, 0.0892857143em);\n text-decoration: none;\n /* @alternate */\n text-decoration: var(--mdc-typography-button-text-decoration, none);\n text-transform: uppercase;\n /* @alternate */\n text-transform: var(--mdc-typography-button-text-transform, uppercase);\n border-radius: 24px;\n /* @noflip */\n /*rtl:ignore*/\n padding-left: 20px;\n /* @noflip */\n /*rtl:ignore*/\n padding-right: 20px;\n width: auto;\n max-width: 100%;\n height: 48px;\n /* @alternate */\n line-height: normal;\n}\n.mdc-fab--extended .mdc-fab__ripple {\n border-radius: 24px;\n}\n.mdc-fab--extended .mdc-fab__icon {\n /* @noflip */\n /*rtl:ignore*/\n margin-left: calc(12px - 20px);\n /* @noflip */\n /*rtl:ignore*/\n margin-right: 12px;\n}\n[dir=rtl] .mdc-fab--extended .mdc-fab__icon, .mdc-fab--extended .mdc-fab__icon[dir=rtl] {\n /*rtl:begin:ignore*/\n /* @noflip */\n /*rtl:ignore*/\n margin-left: 12px;\n /* @noflip */\n /*rtl:ignore*/\n margin-right: calc(12px - 20px);\n /*rtl:end:ignore*/\n}\n\n.mdc-fab--extended .mdc-fab__label + .mdc-fab__icon {\n /* @noflip */\n /*rtl:ignore*/\n margin-left: 12px;\n /* @noflip */\n /*rtl:ignore*/\n margin-right: calc(12px - 20px);\n}\n[dir=rtl] .mdc-fab--extended .mdc-fab__label + .mdc-fab__icon, .mdc-fab--extended .mdc-fab__label + .mdc-fab__icon[dir=rtl] {\n /*rtl:begin:ignore*/\n /* @noflip */\n /*rtl:ignore*/\n margin-left: calc(12px - 20px);\n /* @noflip */\n /*rtl:ignore*/\n margin-right: 12px;\n /*rtl:end:ignore*/\n}\n\n.mdc-fab--touch {\n margin-top: 4px;\n margin-bottom: 4px;\n margin-right: 4px;\n margin-left: 4px;\n}\n.mdc-fab--touch .mdc-fab__touch {\n position: absolute;\n top: 50%;\n height: 48px;\n /* @noflip */\n /*rtl:ignore*/\n left: 50%;\n width: 48px;\n transform: translate(-50%, -50%);\n}\n\n.mdc-fab::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-fab::before {\n border-color: CanvasText;\n }\n}\n\n.mdc-fab__label {\n justify-content: flex-start;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow-x: hidden;\n overflow-y: visible;\n}\n\n.mdc-fab__icon {\n transition: transform 180ms 90ms cubic-bezier(0, 0, 0.2, 1);\n fill: currentColor;\n will-change: transform;\n}\n\n.mdc-fab .mdc-fab__icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n.mdc-fab--exited {\n transform: scale(0);\n opacity: 0;\n transition: opacity 15ms linear 150ms, transform 180ms 0ms cubic-bezier(0.4, 0, 1, 1);\n}\n.mdc-fab--exited .mdc-fab__icon {\n transform: scale(0);\n transition: transform 135ms 0ms cubic-bezier(0.4, 0, 1, 1);\n}\n\n.mdc-fab {\n background-color: #018786;\n /* @alternate */\n background-color: var(--mdc-theme-secondary, #018786);\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.mdc-fab .mdc-fab__icon {\n width: 24px;\n height: 24px;\n font-size: 24px;\n}\n.mdc-fab, .mdc-fab:not(:disabled) .mdc-fab__icon, .mdc-fab:not(:disabled) .mdc-fab__label, .mdc-fab:disabled .mdc-fab__icon, .mdc-fab:disabled .mdc-fab__label {\n color: #fff;\n /* @alternate */\n color: var(--mdc-theme-on-secondary, #fff);\n}\n.mdc-fab:not(.mdc-fab--extended) {\n border-radius: 50%;\n}\n.mdc-fab:not(.mdc-fab--extended) .mdc-fab__ripple {\n border-radius: 50%;\n}\n\n@keyframes mdc-ripple-fg-radius-in {\n from {\n animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);\n }\n to {\n transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));\n }\n}\n@keyframes mdc-ripple-fg-opacity-in {\n from {\n animation-timing-function: linear;\n opacity: 0;\n }\n to {\n opacity: var(--mdc-ripple-fg-opacity, 0);\n }\n}\n@keyframes mdc-ripple-fg-opacity-out {\n from {\n animation-timing-function: linear;\n opacity: var(--mdc-ripple-fg-opacity, 0);\n }\n to {\n opacity: 0;\n }\n}\n.mdc-fab {\n --mdc-ripple-fg-size: 0;\n --mdc-ripple-left: 0;\n --mdc-ripple-top: 0;\n --mdc-ripple-fg-scale: 1;\n --mdc-ripple-fg-translate-end: 0;\n --mdc-ripple-fg-translate-start: 0;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n will-change: transform, opacity;\n}\n.mdc-fab .mdc-fab__ripple::before,\n.mdc-fab .mdc-fab__ripple::after {\n position: absolute;\n border-radius: 50%;\n opacity: 0;\n pointer-events: none;\n content: \"\";\n}\n.mdc-fab .mdc-fab__ripple::before {\n transition: opacity 15ms linear, background-color 15ms linear;\n z-index: 1;\n /* @alternate */\n z-index: var(--mdc-ripple-z-index, 1);\n}\n.mdc-fab .mdc-fab__ripple::after {\n z-index: 0;\n /* @alternate */\n z-index: var(--mdc-ripple-z-index, 0);\n}\n.mdc-fab.mdc-ripple-upgraded .mdc-fab__ripple::before {\n transform: scale(var(--mdc-ripple-fg-scale, 1));\n}\n.mdc-fab.mdc-ripple-upgraded .mdc-fab__ripple::after {\n top: 0;\n /* @noflip */\n /*rtl:ignore*/\n left: 0;\n transform: scale(0);\n transform-origin: center center;\n}\n.mdc-fab.mdc-ripple-upgraded--unbounded .mdc-fab__ripple::after {\n top: var(--mdc-ripple-top, 0);\n /* @noflip */\n /*rtl:ignore*/\n left: var(--mdc-ripple-left, 0);\n}\n.mdc-fab.mdc-ripple-upgraded--foreground-activation .mdc-fab__ripple::after {\n animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;\n}\n.mdc-fab.mdc-ripple-upgraded--foreground-deactivation .mdc-fab__ripple::after {\n animation: mdc-ripple-fg-opacity-out 150ms;\n transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));\n}\n.mdc-fab .mdc-fab__ripple::before,\n.mdc-fab .mdc-fab__ripple::after {\n top: calc(50% - 100%);\n /* @noflip */\n /*rtl:ignore*/\n left: calc(50% - 100%);\n width: 200%;\n height: 200%;\n}\n.mdc-fab.mdc-ripple-upgraded .mdc-fab__ripple::after {\n width: var(--mdc-ripple-fg-size, 100%);\n height: var(--mdc-ripple-fg-size, 100%);\n}\n.mdc-fab .mdc-fab__ripple::before, .mdc-fab .mdc-fab__ripple::after {\n background-color: #fff;\n /* @alternate */\n background-color: var(--mdc-ripple-color, var(--mdc-theme-on-secondary, #fff));\n}\n.mdc-fab:hover .mdc-fab__ripple::before, .mdc-fab.mdc-ripple-surface--hover .mdc-fab__ripple::before {\n opacity: 0.08;\n /* @alternate */\n opacity: var(--mdc-ripple-hover-opacity, 0.08);\n}\n.mdc-fab.mdc-ripple-upgraded--background-focused .mdc-fab__ripple::before, .mdc-fab:not(.mdc-ripple-upgraded):focus .mdc-fab__ripple::before {\n transition-duration: 75ms;\n opacity: 0.24;\n /* @alternate */\n opacity: var(--mdc-ripple-focus-opacity, 0.24);\n}\n.mdc-fab:not(.mdc-ripple-upgraded) .mdc-fab__ripple::after {\n transition: opacity 150ms linear;\n}\n.mdc-fab:not(.mdc-ripple-upgraded):active .mdc-fab__ripple::after {\n transition-duration: 75ms;\n opacity: 0.24;\n /* @alternate */\n opacity: var(--mdc-ripple-press-opacity, 0.24);\n}\n.mdc-fab.mdc-ripple-upgraded {\n --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24);\n}\n.mdc-fab .mdc-fab__ripple {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n overflow: hidden;\n}\n.mdc-fab {\n z-index: 0;\n}\n.mdc-fab .mdc-fab__ripple::before,\n.mdc-fab .mdc-fab__ripple::after {\n z-index: -1;\n /* @alternate */\n z-index: var(--mdc-ripple-z-index, -1);\n}","//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/theme/custom-properties';\n@use '@material/base/mixins' as base-mixins;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/theme/theme';\n@use '@material/theme/theme-color';\n@use './elevation-theme';\n\n@mixin core-styles($query: feature-targeting.all()) {\n $feat-animation: feature-targeting.create-target($query, animation);\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @for $z-value from 0 through 24 {\n .mdc-elevation--z#{$z-value} {\n @include elevation-theme.elevation($z-value, $query: $query);\n }\n }\n\n .mdc-elevation-transition {\n @include feature-targeting.targets($feat-animation) {\n transition: elevation-theme.transition-value();\n }\n\n @include feature-targeting.targets($feat-structure) {\n will-change: elevation-theme.$property;\n }\n }\n}\n\n///\n/// Called once per application to set up the global default elevation styles.\n///\n@mixin overlay-common($query: feature-targeting.all()) {\n $feat-animation: feature-targeting.create-target($query, animation);\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-elevation-overlay {\n @include feature-targeting.targets($feat-structure) {\n @include base-mixins.emit-once('mdc-elevation/common/structure') {\n position: absolute;\n border-radius: inherit;\n pointer-events: none;\n\n @include theme.property(\n opacity,\n custom-properties.create(--mdc-elevation-overlay-opacity, 0)\n );\n }\n }\n\n @include feature-targeting.targets($feat-animation) {\n @include base-mixins.emit-once('mdc-elevation/common/animation') {\n transition: elevation-theme.overlay-transition-value();\n }\n }\n\n @include base-mixins.emit-once('mdc-elevation/common/color') {\n $fill-color: custom-properties.create(\n --mdc-elevation-overlay-color,\n elevation-theme.$overlay-color\n );\n @include elevation-theme.overlay-fill-color($fill-color, $query: $query);\n }\n }\n}\n","//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use 'sass:list';\n@use 'sass:map';\n@use 'sass:meta';\n@use './gss';\n\n/// When true, add an additional property/value declaration before declarations\n/// that use advanced features such as custom properties or CSS functions. This\n/// adds fallback support for older browsers such as IE11 that do not support\n/// these features at the cost of additional CSS. Set this variable to false to\n/// disable generating fallback declarations.\n$enable-fallback-declarations: true !default;\n\n/// Writes a CSS property/value declaration. This mixin is used throughout the\n/// theme package for consistency for dynamically setting CSS property values.\n///\n/// This mixin may optionally take a fallback value. For advanced features such\n/// as custom properties or CSS functions like min and max, a fallback value is\n/// recommended to support older browsers.\n///\n/// @param {String} $property - The CSS property of the declaration.\n/// @param {*} $value - The value of the CSS declaration. The value should be\n/// resolved by other theme functions first (i.e. custom property Maps and\n/// Material theme keys are not supported in this mixin). If the value is\n/// null, no declarations will be emitted.\n/// @param {*} $fallback - An optional fallback value for older browsers. If\n/// provided, a second property/value declaration will be added before the\n/// main property/value declaration.\n/// @param {Map} $gss - An optional Map of GSS annotations to add.\n/// @param {Bool} $important - If true, add `!important` to the declaration.\n@mixin declaration(\n $property,\n $value,\n $fallback-value: null,\n $gss: (),\n $important: false\n) {\n // Normally setting a null value to a property will not emit CSS, so mixins\n // wouldn't need to check this. However, Sass will throw an error if the\n // interpolated property is a custom property.\n @if $value != null {\n $important-rule: if($important, ' !important', '');\n\n @if $fallback-value and $enable-fallback-declarations {\n @include gss.annotate($gss);\n #{$property}: #{$fallback-value} #{$important-rule};\n\n // Add @alternate to annotations.\n $gss: map.merge(\n $gss,\n (\n alternate: true,\n )\n );\n }\n\n @include gss.annotate($gss);\n #{$property}: #{$value}#{$important-rule};\n }\n}\n\n/// Unpacks shorthand values for CSS properties (i.e. lists of 1-3 values).\n/// If a list of 4 values is given, it is returned as-is.\n///\n/// Examples:\n///\n/// unpack-value(4px) => 4px 4px 4px 4px\n/// unpack-value(4px 2px) => 4px 2px 4px 2px\n/// unpack-value(4px 2px 2px) => 4px 2px 2px 2px\n/// unpack-value(4px 2px 0 2px) => 4px 2px 0 2px\n///\n/// @param {Number | Map | List} $value - List of 1 to 4 value numbers.\n/// @return {List} a List of 4 value numbers.\n@function unpack-value($value) {\n @if meta.type-of($value) == 'map' or list.length($value) == 1 {\n @return $value $value $value $value;\n } @else if list.length($value) == 4 {\n @return $value;\n } @else if list.length($value) == 3 {\n @return list.nth($value, 1) list.nth($value, 2) list.nth($value, 3)\n list.nth($value, 2);\n } @else if list.length($value) == 2 {\n @return list.nth($value, 1) list.nth($value, 2) list.nth($value, 1)\n list.nth($value, 2);\n }\n\n @error \"Invalid CSS property value: '#{$value}' is more than 4 values\";\n}\n","//\n// Copyright 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","// 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// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/animation/functions' as animation-functions;\n@use '@material/elevation/elevation-theme';\n@use '@material/elevation/elevation';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/focus-ring/focus-ring';\n@use '@material/dom/mixins' as dom-mixins;\n@use '@material/ripple/ripple';\n@use '@material/ripple/ripple-theme';\n@use '@material/shape/mixins' as shape-mixins;\n@use '@material/shape/functions' as shape-functions;\n@use '@material/theme/css';\n@use '@material/theme/custom-properties';\n@use '@material/theme/replace';\n@use '@material/theme/state';\n@use '@material/theme/theme-color';\n@use '@material/theme/theme';\n@use '@material/touch-target/mixins' as touch-target-mixins;\n@use '@material/typography/typography';\n@use './fab-custom-properties';\n@use './extended-fab-theme';\n@use './fab-theme';\n@use 'sass:math';\n@use 'sass:list';\n\n@mixin core-styles($query: feature-targeting.all()) {\n @include without-ripple($query);\n @include ripple($query);\n}\n\n@mixin static-styles($query: feature-targeting.all()) {\n // postcss-bem-linter: define fab\n\n @include touch-target-mixins.wrapper($query); // COPYBARA_COMMENT_THIS_LINE\n // prettier-ignore\n @include elevation.overlay-common($query); // COPYBARA_COMMENT_THIS_LINE\n\n .mdc-fab {\n @include base_($query: $query);\n }\n\n .mdc-fab--mini {\n @include mini_($query: $query);\n }\n\n .mdc-fab--extended {\n @include extended_($query: $query);\n }\n\n .mdc-fab--touch {\n @include touch-target-mixins.margin(\n $component-height: fab-theme.$mini-height,\n $component-width: fab-theme.$mini-height,\n $query: $query\n );\n\n .mdc-fab__touch {\n @include touch-target-mixins.touch-target(\n $set-width: true,\n $query: $query\n );\n }\n }\n\n .mdc-fab::before {\n @include dom-mixins.transparent-border($query: $query);\n }\n\n .mdc-fab__label {\n @include label_($query: $query);\n }\n\n .mdc-fab__icon {\n @include icon_($query: $query);\n }\n\n // Increase specificity for FAB icon styles that need to override styles defined for .material-icons\n // (which is loaded separately so the order of CSS definitions is not guaranteed)\n .mdc-fab .mdc-fab__icon {\n @include icon-overrides_($query: $query);\n }\n\n .mdc-fab--exited {\n @include exited_($query: $query);\n }\n // postcss-bem-linter: end\n}\n\n@mixin without-ripple($query: feature-targeting.all()) {\n @include static-styles($query: $query);\n\n .mdc-fab {\n @include fab-theme.container-color(secondary, $query: $query);\n @include fab-theme.icon-size(24px, $query: $query);\n @include fab-theme.ink-color(on-secondary, $query: $query);\n @include fab-theme.shape-radius(fab-theme.$shape-radius, $query: $query);\n @include elevation-theme.elevation(6, $query: $query);\n }\n}\n\n@mixin ripple($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include ripple.common($query); // COPYBARA_COMMENT_THIS_LINE\n\n .mdc-fab {\n @include ripple.surface(\n $query: $query,\n $ripple-target: fab-theme.$ripple-target\n );\n @include ripple.radius-bounded(\n $query: $query,\n $ripple-target: fab-theme.$ripple-target\n );\n // Set `$opacity-map` to null to apply default opacity-map.\n @include fab-theme.ripple-color(\n on-secondary,\n $opacity-map: null,\n $query: $query\n );\n\n #{fab-theme.$ripple-target} {\n @include ripple.target-common($query: $query);\n\n @include feature-targeting.targets($feat-structure) {\n overflow: hidden;\n }\n }\n @include ripple-theme.behind-content(\n fab-theme.$ripple-target,\n $query: $query\n );\n }\n}\n\n$icon-enter-delay_: 90ms;\n$icon-enter-duration_: 180ms;\n\n@mixin base_($query: feature-targeting.all()) {\n @include elevation-theme.overlay-surface-position($query: $query);\n @include elevation-theme.overlay-dimensions(100%, $query: $query);\n\n $feat-animation: feature-targeting.create-target($query, animation);\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n display: inline-flex;\n position: relative;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: fab-theme.$height;\n height: fab-theme.$height;\n padding: 0;\n border: none;\n fill: currentColor;\n text-decoration: none;\n cursor: pointer;\n user-select: none;\n -moz-appearance: none;\n -webkit-appearance: none;\n // Even though `visible` is the default, IE 11 computes the property as\n // `hidden` in some cases, unless it's explicitly defined here.\n overflow: visible;\n }\n\n @include feature-targeting.targets($feat-animation) {\n transition: box-shadow elevation-theme.$transition-duration\n elevation-theme.$transition-timing-function,\n opacity 15ms linear 30ms,\n animation-functions.enter(\n transform,\n $icon-enter-duration_ + $icon-enter-delay_\n );\n }\n\n &::-moz-focus-inner {\n @include feature-targeting.targets($feat-structure) {\n padding: 0;\n border: 0;\n }\n }\n\n &:hover {\n @include elevation-theme.elevation(8, $query: $query);\n }\n\n @include ripple-theme.focus() {\n @include elevation-theme.elevation(8, $query: $query);\n }\n\n .mdc-fab__focus-ring {\n @include feature-targeting.targets($feat-structure) {\n position: absolute;\n }\n }\n\n @include ripple-theme.focus() {\n .mdc-fab__focus-ring {\n @include focus-ring.focus-ring($query: $query);\n }\n }\n\n // Increase active state specificity due to ripple-theme.focus().\n &:active,\n &:focus:active {\n @include elevation-theme.elevation(12, $query: $query);\n }\n\n &:active,\n &:focus {\n // TODO(acdvorak): Should this be paired with states and/or ripple? We don't want to disable outline\n // (an accessibility/usability feature) unless we're confident that there is also a visual indication that the\n // element has focus. If the client has customized the DOM in some unexpected way, and is certain that another\n // element will receive focus instead, they can always override this property manually in their CSS.\n @include feature-targeting.targets($feat-structure) {\n outline: none;\n }\n }\n\n &:hover {\n @include feature-targeting.targets($feat-structure) {\n cursor: pointer;\n }\n }\n\n // This allows for using SVGs within them to align properly in all browsers.\n // Can remove once: https://bugzilla.mozilla.org/show_bug.cgi?id=1294515 is resolved.\n\n // stylelint-disable selector-max-type\n // postcss-bem-linter: ignore\n > svg {\n @include feature-targeting.targets($feat-structure) {\n width: 100%;\n }\n }\n // stylelint-enable selector-max-type\n}\n\n@mixin mini_($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n width: fab-theme.$mini-height;\n height: fab-theme.$mini-height;\n }\n}\n\n@mixin extended_($query: feature-targeting.all()) {\n @include typography.typography(button, $query: $query);\n @include extended-fab-theme.extended-shape-radius(\n fab-theme.$shape-radius,\n $query: $query\n );\n $extended-icon-padding: custom-properties.create(\n fab-custom-properties.$extended-icon-padding,\n extended-fab-theme.$extended-icon-padding\n );\n $extended-label-padding: custom-properties.create(\n fab-custom-properties.$extended-label-padding,\n extended-fab-theme.$extended-label-padding\n );\n @include extended-fab-theme.extended-padding(\n extended-fab-theme.$extended-icon-padding,\n extended-fab-theme.$extended-label-padding,\n $query: $query\n );\n\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n width: auto;\n max-width: 100%;\n height: extended-fab-theme.$extended-height;\n // This allows the text within the extended fab to be centered for varying font sizes.\n /* @alternate */\n line-height: normal;\n }\n}\n\n@mixin icon_($query: feature-targeting.all()) {\n $feat-animation: feature-targeting.create-target($query, animation);\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-animation) {\n transition: animation-functions.enter(\n transform,\n $icon-enter-duration_,\n $icon-enter-delay_\n );\n }\n\n @include feature-targeting.targets($feat-structure) {\n fill: currentColor;\n will-change: transform;\n }\n}\n\n@mixin label_($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 text-overflow: ellipsis;\n white-space: nowrap;\n overflow-x: hidden;\n overflow-y: visible;\n }\n}\n\n@mixin icon-overrides_($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n}\n\n@mixin exited_($query: feature-targeting.all()) {\n $feat-animation: feature-targeting.create-target($query, animation);\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n transform: scale(0);\n opacity: 0;\n }\n\n @include feature-targeting.targets($feat-animation) {\n transition: opacity 15ms linear 150ms,\n animation-functions.exit-permanent(transform, 180ms);\n }\n\n .mdc-fab__icon {\n @include feature-targeting.targets($feat-structure) {\n transform: scale(0);\n }\n\n @include feature-targeting.targets($feat-animation) {\n transition: animation-functions.exit-permanent(transform, 135ms);\n }\n }\n}\n","//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// 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.creat