{"version":3,"sources":["webpack:///./packages/mdc-dialog/mdc-dialog.scss","webpack:///./packages/material-components-web/node_modules/@material/theme/_css.scss","webpack:///./packages/material-components-web/node_modules/@material/theme/_gss.scss","webpack:///mdc-dialog.scss","webpack:///./packages/material-components-web/node_modules/@material/ripple/_ripple-theme.scss","webpack:///./packages/material-components-web/node_modules/@material/typography/_typography.scss","webpack:///./packages/material-components-web/node_modules/@material/elevation/_elevation.scss","webpack:///./packages/mdc-dialog/_variables.scss","webpack:///./packages/material-components-web/node_modules/@material/elevation/_elevation-theme.scss","webpack:///./packages/material-components-web/node_modules/@material/rtl/_rtl.scss","webpack:///./packages/material-components-web/node_modules/@material/dom/_dom.scss"],"names":[],"mappings":";;;;;;;AAkjBE;EChfI;ECZF;EDwBA;AE1EJ;AH4jBE;EAEI;AG3jBN;AH+jBE;EAEI;AG9jBN;AH0kBE;EAEI;AGzkBN;AHqlBE;EAEI;AGplBN;AHwlBE;ECtiBI;ECZF;EDwBA;AEzDJ;ACqII;EHxFE;ECZF;EDwBA;AEpDJ;ACwgBE;EHheI;ECZF;EDwBA;AE/CJ;ACmgBE;EA9QI;EHlNA;ECZF;EDwBA;AEzCJ;ACyQM;EAEI;ADxQV;AC6QQ;EAEI,yBA/QO;EH0Bb;ECZF;EDwBA;AEhCJ;ACoRI;EHpPA;AE7BJ;AHomBE;EAKI;AGtmBN;AH0mBE;EAEI;EACA;AGzmBN;AH6mBE;ECvlBE;AEnBJ;AHunBE;EChnBI;ECZF;EDwBA;AEdJ;;AHydE;EC3cE;AEVJ;;AHydE;EKpNE;EACA;EJxQE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;UAAA;EAZE;ECZF;EDwBA;AEgBJ;;AHmcE;EKxNE;EACA;EJxQE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;UAAA;EAZE;ECZF;EDwBA;AE0CJ;;AH8aE;EAEI;AG5aN;;AGhEE;EAGM;EACA;EACA;ELCF;ECZF;EDwBA;EKFI;ELVF;ECZF;EDwBA;AE2DJ;;AHpFE;;EAGI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AGsFN;;AHlFE;EASI;ECVA;ECZF;EDwBA;AE8EJ;AH2eE;EAEI;AG1eN;AH2hBE;EAEI,gBO5pBM;AJkIZ;AHmjBM;EAFJ;IAGM,6BAauB;EG7jB7B;AACF;AHijBM;EALJ;IAMM,gBOxrBI;EJ0IV;AACF;AH6kBE;EAeM,6BAjBe;AGxkBvB;AH4uBE;EAII;AG7uBN;AHivBI;EARF;IAUM;IACA;EG/uBN;EHo2BA;IC78BE;EE4GF;AACF;AHozBE;EApFA;IAqFE,0BAJoB;EG7yBtB;AACF;AHkzBE;EAvFA;IAwFE,YAlEsB;EG7uBxB;AACF;AHozBE;EA9FA;IA+FE,+BAJqB;EG7yBvB;AACF;AHkzBE;EAjGA;IAkGE,iBA7EuB;EGluBzB;AACF;AH+tBI;EA6GF;IC78BE;EEqIF;AACF;AH6uBI;EAtCF;IA4CM;IACA;IACA;IACA;IC53BJ;EE8IF;EH0yBA;IACE;ICz7BA;EEkJF;EH0yBA;IACE;IAEA;EGzyBF;EH2yBA;ICj8BE;EEyJF;AACF;AH4uBI;EAzDF;IA4DM;EG3uBN;EH+yBA;IC78BE;EEiKF;AACF;AHvJM;EAEI;AGwJV;;AHlJE;EAEI;EACA;AGoJN;;AH9IE;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;UAAA;EACA;EAGA;AG8IN;;AH1IE;EQwJE;EACA;ERpJE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;AG0IN;AKmBE;EPxNE;EAAA;EO8NI;ENjPJ;EAAc;EMmPV;ALnBR;AM3MM;EACE;EPtBJ;EAAc;EFkFV;ES1DA;AN+MR;;AO7LI;EVqBF;IAyBM;EGoJN;AACF;AHjJI;EU/GA;EACA;EACA;EACA;EACA;EReA;EAAc;EQbd;EACA;EACA;EACA;EACA;APoQJ;AOrNI;EVsDA;IU/FE;EPkQJ;AACF;AH/JQ;EALJ;IAOM;EGiKR;AACF;;AH5JE;EKiNE,cL9MY;EK6QV;EACA;ELzQA;EACA;EACA;EACA;EACA;AG2JN;AE4HE;EAyCA;EACA;EACA,YL5UU;EK6UV;EAxCI;AFzHN;AMlQM;EACE;EPtBJ;EAAc;EFyHV;ESjGA;ANsQR;;AHhKE;EAEI;EAGA;AGgKN;;AH3JI;EAEI;EACA;EACA;EACA;EACA;EAEA;AG4JR;AOtQI;EVkGA;IAWM;EG6JR;AACF;AH+qBE;EC78BE;AEiSJ;AHxJI;EAEI;EACA;EACA;AGyJR;AHrJI;EAEI;EACA;AGsJR;AHlJI;EAEI;AGmJR;AH/II;EAQI;AG0IR;AO7RI;EV2IA;IAUM;EG4IR;AACF;;AHrII;EAEI;AGuIR;AHnII;EAEI;AGoIR;;AH/HE;EAEI;EACA;EACA;EACA;AGiIN;AH7HI;EAEI;AG8HR;AHzHI;EAEI;AG0HR;;AHrHE;;EAKI;AGqHN;;AHjHE;EAII;EACA;AGiHN;;AH7GE;EAGI;AG8GN;;AH1GE;EAKI;AGyGN;;AHrGE;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YO1SY;EP2SZ;AGuGN;AOtVI;EVmOF;IAcM;EGyGN;AACF;AHtGI;EAEI;EACA;AGuGR;;AHlGE;EEnSE;EAAc;EDmBd;ECnBA;EAAc;EDmBd;ED4RE;EE/SF;EAAc;EFiTZ;AGiGN;AM7XM;EACE;EPtBJ;EAAc;EDmBd;ECnBA;EAAc;EDmBd;EQKI;ANoYR;;AHpHI;EExSA;EAAc;EDmBd;ECnBA;EAAc;EDmBd;AEkZJ;AMhZM;EACE;EPtBJ;EAAc;EDmBd;ECnBA;EAAc;EDmBd;EQKI;ANuZR;;AM1ZM;EACE;EPtBJ;EAAc;EFqTV;ES7RA;AN+ZR;;AH9HI;EAEI;AGgIR;;AH3HE;;;EAII;AG6HN;;AHxHI;EAEI;AG0HR;AHtHI;EAEI;EAAA;EAAA;AGuHR;;AHhHI;;EAGI;AGkHR;AH9GI;EAGI;UAAA;AG8GR;;AHxGI;EAEI;AG0GR;AHtGI;EAEI;UAAA;EACA;AGuGR;AHlGM;EAEI;AGmGV;AH7FM;EAEI;AG8FV;AHxFM;EAEI;AGyFV;;AHnFE;EAEI;EACA;EACA;EACA;EACA;EACA;AGqFN;AHlFI;EAII;AGiFR;;AHzEE;EAEI;AG2EN;;AHtEI;EAEI;AGwER;;AHlEI;EAEI,WOpciB;EPqcjB,QOpce;EPqcf;EAKA;AGgER;;AH3DE;EAEI;AG6DN;AH1DI;;EAGI;AG2DR,C","file":"mdc.dialog.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// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n// Internal styling for Dialog MDC component.\n\n@use 'sass:map';\n@use 'sass:math';\n@use '@material/animation/functions' as animation-functions;\n@use '@material/button/button-theme';\n@use '@material/dom/dom';\n@use '@material/elevation/mixins' as elevation-mixins;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/rtl/rtl';\n@use '@material/shape/mixins' as shape-mixins;\n@use '@material/theme/custom-properties';\n@use '@material/theme/theme';\n@use '@material/theme/theme-color';\n@use '@material/touch-target/variables' as touch-target-variables;\n@use '@material/typography/typography';\n@use './dialog-custom-properties';\n@use '@material/icon-button/icon-button-theme';\n@use './variables';\n\n@mixin static-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 // prettier-ignore\n @include elevation-mixins.overlay-common($query); // COPYBARA_COMMENT_THIS_LINE\n\n // postcss-bem-linter: define dialog\n\n .mdc-dialog,\n .mdc-dialog__scrim {\n @include feature-targeting.targets($feat-structure) {\n position: fixed;\n top: 0;\n left: 0;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n }\n }\n\n .mdc-dialog {\n // Note: the top padding is only 20px for dialogs without titles; see below for override.\n @include content-padding(20px, 24px, 20px, 24px, $query: $query);\n @include min-width(variables.$min-width, $query: $query);\n @include max-width(variables.$max-width, variables.$margin, $query: $query);\n @include max-height(null, variables.$margin, $query: $query);\n\n @include feature-targeting.targets($feat-structure) {\n // Use `display: none` instead of `visibility: hidden` to avoid recalculating layout when the dialog is closed.\n display: none;\n $z-index: custom-properties.create(\n dialog-custom-properties.$z-index,\n variables.$z-index\n );\n @include theme.property(z-index, $z-index);\n }\n\n &.mdc-dialog--fullscreen {\n @include _fullscreen-dialog-size($query: $query);\n }\n\n &.mdc-dialog__scrim--hidden {\n .mdc-dialog__scrim {\n @include feature-targeting.targets($feat-structure) {\n opacity: 0;\n }\n }\n }\n }\n\n .mdc-dialog__scrim {\n @include feature-targeting.targets($feat-structure) {\n opacity: 0;\n z-index: -1;\n }\n }\n\n // This wrapper element is needed to make max-height work in IE 11.\n // See https://github.com/philipwalton/flexbugs/issues/216\n .mdc-dialog__container {\n @include feature-targeting.targets($feat-structure) {\n display: flex;\n flex-direction: row; // IE 11\n align-items: center;\n justify-content: space-around; // Ensure Safari centers the dialog (because it treats the container's width oddly)\n box-sizing: border-box;\n height: 100%;\n transform: scale(0.8);\n opacity: 0;\n // This element is necessary for IE 11 and needs to have `height: 100%`.\n // Let clicks on element fall through to scrim element underneath.\n pointer-events: none;\n }\n }\n\n .mdc-dialog__surface {\n @include elevation-mixins.overlay-surface-position($query: $query);\n @include elevation-mixins.overlay-dimensions(100%, $query: $query);\n\n @include feature-targeting.targets($feat-structure) {\n display: flex;\n flex-direction: column;\n flex-grow: 0; // IE 11\n flex-shrink: 0; // IE 11\n box-sizing: border-box;\n max-width: 100%; // IE 11\n max-height: 100%; // IE 11\n pointer-events: auto; // Override from `.mdc-dialog__container`.\n // IE 11: Otherwise, scrolling content in `mdc-dialog__content` overflows.\n overflow-y: auto;\n outline: 0;\n\n @include rtl.rtl {\n @include rtl.ignore-next-line();\n text-align: right;\n }\n\n @include dom.forced-colors-mode {\n // Colored outline is used for HCM instead of transparent border\n // below to prevent scrolling content overflow.\n outline: 2px solid windowText;\n }\n }\n\n &::before {\n @include dom.transparent-border($border-width: 2px, $query: $query);\n @include feature-targeting.targets($feat-structure) {\n // Prevent IE11 from rendering this element, because it causes scrolling\n // content to overflow.\n @media screen and (-ms-high-contrast: active),\n screen and (-ms-high-contrast: none) {\n content: none;\n }\n }\n }\n }\n\n .mdc-dialog__title {\n @include typography.text-baseline(\n $top: 40px,\n $display: block,\n $lineHeight: null,\n $query: $query\n );\n @include feature-targeting.targets($feat-structure) {\n position: relative;\n flex-shrink: 0;\n box-sizing: border-box;\n margin: 0 0 1px;\n padding: 0 24px variables.$title-bottom-padding;\n\n @include rtl.rtl {\n @include rtl.ignore-next-line();\n text-align: right;\n }\n }\n }\n\n .mdc-dialog--scrollable .mdc-dialog__title {\n @include feature-targeting.targets($feat-structure) {\n margin-bottom: 1px;\n // Adjust bottom padding to make title height align to spec when divider is present.\n // (Titles for alert dialogs w/o dividers align based on text baseline. All spec values are divisible by 4.)\n padding-bottom: variables.$title-bottom-padding + 6px;\n }\n }\n\n .mdc-dialog--fullscreen {\n .mdc-dialog__header {\n @include feature-targeting.targets($feat-structure) {\n align-items: baseline;\n border-bottom: 1px solid transparent;\n display: inline-flex;\n justify-content: space-between;\n padding: 0 variables.$header-side-padding\n variables.$title-bottom-padding;\n z-index: 1;\n\n @include dom.forced-colors-mode($exclude-ie11: true) {\n border-bottom-color: CanvasText;\n }\n\n @include _modal-header(\n $close-icon-padding: variables.$close-icon-padding\n );\n }\n }\n\n .mdc-dialog__title {\n @include feature-targeting.targets($feat-structure) {\n margin-bottom: 0;\n padding: 0;\n border-bottom: 0;\n }\n }\n\n &.mdc-dialog--scrollable .mdc-dialog__title {\n @include feature-targeting.targets($feat-structure) {\n border-bottom: 0;\n margin-bottom: 0;\n }\n }\n\n .mdc-dialog__close {\n @include feature-targeting.targets($feat-structure) {\n top: 5px;\n }\n }\n\n &.mdc-dialog--scrollable .mdc-dialog__actions {\n // If full-screen dialog is scrollable, the scroll divider over the action\n // buttons (i.e. the \"footer\") should only be visible when the content is\n // \"cut off\" by the footer. To toggle this divider, we override the\n // styling set by the mdc-dialog--scrollable class, and instead rely on\n // the mdc-dialog-scroll-divider-footer class to determine when the\n // border-top should be visible.\n @include feature-targeting.targets($feat-structure) {\n border-top: 1px solid transparent;\n @include dom.forced-colors-mode($exclude-ie11: true) {\n border-top-color: CanvasText;\n }\n }\n }\n }\n\n // Needed so that close affordance is aligned as if there was a title.\n .mdc-dialog--fullscreen--titleless {\n .mdc-dialog__close {\n @include feature-targeting.targets($feat-structure) {\n margin-top: 4px;\n }\n }\n\n &.mdc-dialog--scrollable .mdc-dialog__close {\n @include feature-targeting.targets($feat-structure) {\n margin-top: 0;\n }\n }\n }\n\n .mdc-dialog__content {\n @include feature-targeting.targets($feat-structure) {\n flex-grow: 1;\n box-sizing: border-box;\n margin: 0;\n overflow: auto;\n }\n\n // The content element already has top/bottom padding, so we need to suppress margins on its first/last children.\n > :first-child {\n @include feature-targeting.targets($feat-structure) {\n margin-top: 0;\n }\n }\n\n // The content element already has top/bottom padding, so we need to suppress margins on its first/last children.\n > :last-child {\n @include feature-targeting.targets($feat-structure) {\n margin-bottom: 0;\n }\n }\n }\n\n .mdc-dialog__title + .mdc-dialog__content,\n .mdc-dialog__header + .mdc-dialog__content {\n @include feature-targeting.targets($feat-structure) {\n // Eliminate padding to bring as close to spec as possible, relying on title padding.\n // (Spec seems inconsistent RE title/body spacing on alert vs. simple variants.)\n padding-top: 0;\n }\n }\n\n .mdc-dialog--scrollable .mdc-dialog__title + .mdc-dialog__content {\n @include feature-targeting.targets($feat-structure) {\n // Reduce and equalize vertical paddings when scrollable dividers are present\n // (Note: this is intentionally after title + content to take precedence)\n padding-top: 8px;\n padding-bottom: 8px;\n }\n }\n\n .mdc-dialog__content .mdc-deprecated-list:first-child:last-child {\n @include feature-targeting.targets($feat-structure) {\n // Override default .mdc-deprecated-list padding for content consisting exclusively of a MDC List\n padding: 6px 0 0; // Top padding balances with title height\n }\n }\n\n .mdc-dialog--scrollable\n .mdc-dialog__content\n .mdc-deprecated-list:first-child:last-child {\n @include feature-targeting.targets($feat-structure) {\n // Override default .mdc-deprecated-list padding for content consisting exclusively of a MDC List\n padding: 0;\n }\n }\n\n .mdc-dialog__actions {\n @include feature-targeting.targets($feat-structure) {\n display: flex;\n position: relative;\n flex-shrink: 0;\n flex-wrap: wrap;\n align-items: center;\n justify-content: flex-end;\n box-sizing: border-box;\n min-height: 52px;\n margin: 0;\n padding: variables.$actions-padding;\n border-top: 1px solid transparent;\n @include dom.forced-colors-mode($exclude-ie11: true) {\n border-top-color: CanvasText;\n }\n }\n\n .mdc-dialog--stacked & {\n @include feature-targeting.targets($feat-structure) {\n flex-direction: column;\n align-items: flex-end;\n }\n }\n }\n\n .mdc-dialog__button {\n @include feature-targeting.targets($feat-structure) {\n @include rtl.reflexive-box(margin, left, 8px);\n }\n\n &:first-child {\n @include feature-targeting.targets($feat-structure) {\n @include rtl.reflexive-box(margin, left, 0);\n }\n }\n\n @include feature-targeting.targets($feat-structure) {\n max-width: 100%; // Prevent long text from overflowing parent element in IE 11\n @include rtl.ignore-next-line();\n text-align: right;\n\n @include rtl.rtl {\n @include rtl.ignore-next-line();\n text-align: left;\n }\n }\n\n .mdc-dialog--stacked &:not(:first-child) {\n @include feature-targeting.targets($feat-structure) {\n margin-top: 12px;\n }\n }\n }\n\n .mdc-dialog--open,\n .mdc-dialog--opening,\n .mdc-dialog--closing {\n @include feature-targeting.targets($feat-structure) {\n display: flex;\n }\n }\n\n .mdc-dialog--opening {\n .mdc-dialog__scrim {\n @include feature-targeting.targets($feat-animation) {\n transition: opacity 150ms linear;\n }\n }\n\n .mdc-dialog__container {\n @include feature-targeting.targets($feat-animation) {\n transition: opacity 75ms linear,\n animation-functions.enter(transform, 150ms);\n }\n }\n }\n\n .mdc-dialog--closing {\n .mdc-dialog__scrim,\n .mdc-dialog__container {\n @include feature-targeting.targets($feat-animation) {\n transition: opacity 75ms linear;\n }\n }\n\n .mdc-dialog__container {\n @include feature-targeting.targets($feat-structure) {\n // Dialog container scales up while opening, but should remain scaled up while closing\n transform: none;\n }\n }\n }\n\n .mdc-dialog--open {\n .mdc-dialog__scrim {\n @include feature-targeting.targets($feat-structure) {\n opacity: 1;\n }\n }\n\n .mdc-dialog__container {\n @include feature-targeting.targets($feat-structure) {\n transform: none;\n opacity: 1;\n }\n }\n\n &.mdc-dialog__surface-scrim--shown {\n .mdc-dialog__surface-scrim {\n @include feature-targeting.targets($feat-structure) {\n opacity: 1;\n }\n }\n }\n\n &.mdc-dialog__surface-scrim--hiding {\n .mdc-dialog__surface-scrim {\n @include feature-targeting.targets($feat-animation) {\n transition: opacity 75ms linear;\n }\n }\n }\n\n &.mdc-dialog__surface-scrim--showing {\n .mdc-dialog__surface-scrim {\n @include feature-targeting.targets($feat-animation) {\n transition: opacity 150ms linear;\n }\n }\n }\n }\n\n .mdc-dialog__surface-scrim {\n @include feature-targeting.targets($feat-structure) {\n display: none;\n opacity: 0;\n position: absolute;\n width: 100%;\n height: 100%;\n z-index: 1;\n }\n\n .mdc-dialog__surface-scrim--shown &,\n .mdc-dialog__surface-scrim--showing &,\n .mdc-dialog__surface-scrim--hiding & {\n @include feature-targeting.targets($feat-structure) {\n display: block;\n }\n }\n }\n\n // postcss-bem-linter: end\n\n // Class applied to body while dialog is open, to prevent scrolling behind the dialog\n .mdc-dialog-scroll-lock {\n @include feature-targeting.targets($feat-structure) {\n overflow: hidden;\n }\n }\n\n .mdc-dialog--no-content-padding {\n .mdc-dialog__content {\n @include feature-targeting.targets($feat-structure) {\n padding: 0;\n }\n }\n }\n\n .mdc-dialog--sheet {\n .mdc-dialog__container .mdc-dialog__close {\n @include feature-targeting.targets($feat-structure) {\n right: variables.$sheet-close-icon-right;\n top: variables.$sheet-close-icon-top;\n position: absolute;\n // Customers can create their stacking context in dialog content using\n // any way of createing stacking context. For example with\n // position: relative;\n // z-index: 0;\n z-index: 1;\n }\n }\n }\n\n .mdc-dialog__scrim--removed {\n @include feature-targeting.targets($feat-structure) {\n pointer-events: none;\n }\n\n .mdc-dialog__scrim,\n .mdc-dialog__surface-scrim {\n @include feature-targeting.targets($feat-structure) {\n display: none;\n }\n }\n }\n}\n\n@mixin core-styles($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-dialog {\n @include container-fill-color(surface, $query: $query);\n @include scrim-color(variables.$scrim-color, $query: $query);\n @include title-ink-color(variables.$title-ink-color, $query: $query);\n @include content-ink-color(variables.$content-ink-color, $query: $query);\n @include scroll-divider-color(\n variables.$scroll-divider-color,\n $query: $query\n );\n @include shape-radius(variables.$shape-radius, $query: $query);\n }\n\n .mdc-dialog__surface {\n @include elevation-mixins.elevation(24, $query: $query);\n }\n\n .mdc-dialog__title {\n @include typography.typography(headline6, $query: $query);\n }\n\n .mdc-dialog__content {\n @include typography.typography(body1, $query: $query);\n }\n\n // For go/soy-checks/rewrite-css\n .mdc-dialog__title-icon {\n @include feature-targeting.targets($feat-structure) {\n /** Hook for theming API. */\n }\n }\n\n @include static-styles($query: $query);\n}\n\n@mixin container-fill-color($color, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n\n .mdc-dialog__surface {\n @include feature-targeting.targets($feat-color) {\n @include theme.property(background-color, $color);\n }\n }\n}\n\n@mixin scrim-color(\n $color,\n $opacity: variables.$scrim-opacity,\n $query: feature-targeting.all()\n) {\n $feat-color: feature-targeting.create-target($query, color);\n\n .mdc-dialog__scrim {\n @include feature-targeting.targets($feat-color) {\n background-color: rgba(theme-color.prop-value($color), $opacity);\n }\n }\n\n .mdc-dialog__surface-scrim {\n @include feature-targeting.targets($feat-color) {\n background-color: rgba(theme-color.prop-value($color), $opacity);\n }\n }\n}\n\n@mixin title-ink-color(\n $color,\n $opacity: variables.$title-ink-opacity,\n $query: feature-targeting.all()\n) {\n $feat-color: feature-targeting.create-target($query, color);\n\n .mdc-dialog__title {\n @include feature-targeting.targets($feat-color) {\n color: rgba(theme-color.prop-value($color), $opacity);\n }\n }\n}\n\n@mixin content-ink-color(\n $color,\n $opacity: variables.$content-ink-opacity,\n $query: feature-targeting.all()\n) {\n $feat-color: feature-targeting.create-target($query, color);\n\n .mdc-dialog__content {\n @include feature-targeting.targets($feat-color) {\n color: rgba(theme-color.prop-value($color), $opacity);\n }\n }\n\n .mdc-dialog__close {\n @include icon-button-theme.ink_color($color: $color, $query: $query);\n }\n}\n\n/// Defines the `display` property of the content element using a given query.\n/// This is useful if the content of the dialog needs to use a custom layout,\n/// for example one that consists of a fixed header and a fixed footer, with a\n/// scrollable list area in-between, which is sized to fill available space\n/// (see b/231813016).\n/// @param {string} $display - The `display` type to set.\n/// @param {string} $query Query.\n@mixin content-display($display, $query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-dialog__content {\n @include feature-targeting.targets($feat-structure) {\n display: $display;\n }\n }\n}\n\n@mixin content-padding(\n $padding-top,\n $padding-right,\n $padding-bottom,\n $padding-left,\n $query: feature-targeting.all()\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-dialog__content {\n @include feature-targeting.targets($feat-structure) {\n padding: $padding-top $padding-right $padding-bottom $padding-left;\n }\n }\n}\n\n@mixin scroll-divider-color(\n $color,\n $opacity: variables.$scroll-divider-opacity,\n $query: feature-targeting.all()\n) {\n $feat-color: feature-targeting.create-target($query, color);\n\n &.mdc-dialog--scrollable .mdc-dialog__title,\n &.mdc-dialog--scrollable .mdc-dialog__actions,\n &.mdc-dialog--scrollable.mdc-dialog-scroll-divider-footer\n .mdc-dialog__actions {\n @include feature-targeting.targets($feat-color) {\n border-color: rgba(theme-color.prop-value($color), $opacity);\n }\n }\n\n &.mdc-dialog--scrollable .mdc-dialog__title {\n @include feature-targeting.targets($feat-color) {\n border-bottom: 1px solid rgba(theme-color.prop-value($color), $opacity);\n margin-bottom: 0;\n }\n }\n\n &.mdc-dialog-scroll-divider-header.mdc-dialog--fullscreen\n .mdc-dialog__header {\n @include elevation-mixins.elevation(2, $query: $query);\n }\n}\n\n@mixin shape-radius(\n $radius,\n $rtl-reflexive: false,\n $query: feature-targeting.all()\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-dialog__surface {\n @include shape-mixins.radius($radius, $rtl-reflexive, $query: $query);\n }\n}\n\n@mixin min-width($min-width, $query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-dialog__surface {\n @include feature-targeting.targets($feat-structure) {\n min-width: $min-width;\n }\n }\n}\n\n@mixin min-height($min-height, $query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-dialog__surface {\n @include feature-targeting.targets($feat-structure) {\n min-height: $min-height;\n }\n }\n}\n\n@mixin max-width-with-breakpoint(\n $above-breakpoint-max-width,\n $below-breakpoint-max-width,\n $max-width-breakpoint,\n $query: feature-targeting.all()\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-dialog__surface {\n @include feature-targeting.targets($feat-structure) {\n @media (max-width: $max-width-breakpoint) {\n max-width: $below-breakpoint-max-width;\n }\n @media (min-width: $max-width-breakpoint) {\n max-width: $above-breakpoint-max-width;\n }\n }\n }\n}\n\n@mixin max-width($max-width, $margin, $query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n $max-width-breakpoint: $max-width + ($margin * 2);\n // Fit snugly within the viewport at smaller screen sizes.\n $below-breakpoint-max-width: calc(100vw - #{$margin * 2});\n\n @if $max-width {\n @include max-width-with-breakpoint(\n $max-width,\n $below-breakpoint-max-width,\n $max-width-breakpoint,\n $query\n );\n } @else {\n .mdc-dialog__surface {\n @include feature-targeting.targets($feat-structure) {\n max-width: $below-breakpoint-max-width;\n }\n }\n }\n}\n\n@mixin max-height($max-height, $margin, $query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n $max-size-calc-expr: calc(100% - #{$margin * 2});\n\n .mdc-dialog__surface {\n @include feature-targeting.targets($feat-structure) {\n @if $max-height {\n $max-height-breakpoint: $max-height + ($margin * 2);\n\n // Fit snugly within the viewport at smaller screen sizes.\n @media (max-height: $max-height-breakpoint) {\n max-height: $max-size-calc-expr;\n }\n\n // Once the screen gets big enough, apply a fixed maximum height.\n @media (min-height: $max-height-breakpoint) {\n max-height: $max-height;\n }\n } @else {\n max-height: $max-size-calc-expr;\n }\n }\n }\n\n // Target IE 11.\n @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n // On IE 11, if surface height is fixed and container height is 100%,\n // scrolling content overflows. So, reset height if surface height\n // is fixed.\n .mdc-dialog__container {\n @include feature-targeting.targets($feat-structure) {\n @if $max-height {\n $max-height-breakpoint: $max-height + ($margin * 2);\n\n @media (min-height: $max-height-breakpoint) {\n align-items: stretch;\n height: auto;\n }\n }\n }\n }\n }\n}\n\n// Applied to dialogs that have buttons with an increased touch target.\n@mixin with-touch-target($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n $touch-target-margin: math.div(\n touch-target-variables.$height - button-theme.$height,\n 2\n );\n $vertical-padding: math.max(\n 0,\n variables.$actions-padding - $touch-target-margin\n );\n\n // Buttons with an increased touch target have added vertical margin, so\n // decrease the actions element padding to compensate.\n .mdc-dialog__actions {\n @include feature-targeting.targets($feat-structure) {\n padding-top: $vertical-padding;\n padding-bottom: $vertical-padding;\n\n // The below styles override the default button touch target values,\n // which otherwise cause `mdc-dialog__surface` to scroll unnnecessarily\n // in IE 11.\n .mdc-button__touch {\n top: -$touch-target-margin; // IE 11\n transform: none; // IE 11\n }\n }\n }\n}\n\n/// Defines dialog position on the screen.\n/// Dialog position can be customised across both vertical and horizontal axis.\n/// If only one axis is specified dialog is centered across the second one.\n/// Only one value can be specified for each axis at the time. For example\n/// dialog can not have both $top and $bottom specified because it will conflict\n/// with size related mixins. Use `min-width`, `max-width` and `max-height`\n/// to control the dialog size.\n/// @param {Map} $position-map - Dialog position specified as map with keys\n/// {top, bottom, left, right}\n@mixin position($position-map, $query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n $top: map.get($position-map, top);\n $right: map.get($position-map, right);\n $bottom: map.get($position-map, bottom);\n $left: map.get($position-map, left);\n\n @if ($top != null and $bottom != null) {\n @error \"Top and Botton properties can not be used simultaneously. Use \" +\n \"`min-width`, `max-width` and `max-height` to control dialog size.\";\n }\n @if ($right != null and $left != null) {\n @error \"Right and Left properties can not be used simultaneously. Use \" +\n \"`min-width`, `max-width` and `max-height` to control dialog size.\";\n }\n\n @include feature-targeting.targets($feat-structure) {\n @if ($top != null) {\n .mdc-dialog__container {\n align-items: flex-start;\n padding-top: $top;\n }\n }\n @if ($bottom != null) {\n .mdc-dialog__container {\n align-items: flex-end;\n padding-bottom: $bottom;\n }\n }\n @if ($right != null) {\n &.mdc-dialog {\n justify-content: flex-end;\n padding-right: $right;\n }\n }\n @if ($left != null) {\n &.mdc-dialog {\n justify-content: flex-start;\n padding-left: $left;\n }\n }\n }\n}\n\n/// Defines dialog base z-index.\n/// This mixin can be used to specify dialog base z-index to make it compatible\n/// with other frameworks used on the same page.\n/// @param {Number} $z-index - Dialog z-index value.\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 &.mdc-dialog {\n z-index: $z-index;\n }\n }\n}\n\n/// This mixin can be used to hide the fullscreen dialog header when the dialog\n/// is a standard modal and not yet fullscreen in X-small sizes.\n@mixin fullscreen-dialog-hide-modal-header($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n // Non-fullscreen-dialog sizes\n @media (min-width: 600px) {\n &.mdc-dialog--fullscreen {\n .mdc-dialog__header {\n @include feature-targeting.targets($feat-structure) {\n display: none;\n }\n }\n\n .mdc-dialog__content {\n @include feature-targeting.targets($feat-structure) {\n padding-top: 24px;\n }\n }\n }\n }\n}\n\n@mixin _fullscreen-dialog-size($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n .mdc-dialog__surface {\n @include feature-targeting.targets($feat-structure) {\n // Reset the max-width so the default dialog sizing doesn't interfere with\n // the full-screen dialog sizing.\n max-width: none;\n }\n\n // Medium screens\n @media (max-width: 960px) {\n @include feature-targeting.targets($feat-structure) {\n max-height: 560px;\n width: 560px;\n @include _modal-header(\n $close-icon-padding: variables.$close-icon-padding\n );\n }\n }\n\n // Small screens\n @media (max-width: 720px) {\n @include feature-targeting.targets($feat-structure) {\n $max-small-height: 560px;\n $max-small-width: 560px;\n $min-horizontal-small-margin: 56px;\n $min-vertical-small-margin: 80px;\n @include _fluid-size-calc(\n $vertical-margin: $min-vertical-small-margin,\n $max-height: $max-small-height,\n $horizontal-margin: $min-horizontal-small-margin,\n $max-width: $max-small-width\n );\n @include _modal-header(\n $close-icon-padding: variables.$close-icon-padding\n );\n }\n }\n\n // X-Small Screens\n @media (max-width: 720px) and (max-height: 400px),\n (max-width: 600px),\n (min-width: 720px) and (max-height: 400px) {\n @include feature-targeting.targets($feat-structure) {\n // Use 100% instead of vw/vh so the url bar is taken into account on\n // mobile.\n height: 100%;\n max-height: 100vh;\n max-width: 100vw;\n width: 100vw;\n @include _fullscreen-header(\n $close-icon-padding: variables.$close-icon-padding,\n $title-side-padding: variables.$title-side-padding\n );\n }\n @include shape-mixins.radius(0, $query: $query);\n }\n\n // Large to X-Large screens\n @media (min-width: 960px) {\n @include feature-targeting.targets($feat-structure) {\n $min-horizontal-margin: 200px;\n width: calc(100vw - #{$min-horizontal-margin * 2});\n @include _modal-header(\n $close-icon-padding: variables.$close-icon-padding\n );\n }\n }\n }\n}\n\n/// Defines styling to specify a fluid dialog size while maintaining a specific\n/// vertical and horizontal margin.\n/// @param {Number} $vertical-margin\n/// @param {Number} $max-height\n/// @param {Number} $horizontal-margin\n/// @param {Number} $max-width\n@mixin _fluid-size-calc(\n $vertical-margin,\n $max-height,\n $horizontal-margin,\n $max-width\n) {\n $max-width-calc-expr: calc(100vw - #{$horizontal-margin * 2});\n $max-width-breakpoint: $max-width + ($horizontal-margin * 2);\n\n @media (max-width: $max-width-breakpoint) {\n width: $max-width-calc-expr;\n }\n @media (min-width: $max-width-breakpoint) {\n width: $max-width;\n }\n\n $max-height-calc-expr: calc(100vh - #{$vertical-margin * 2});\n $max-height-breakpoint: $max-height + ($vertical-margin * 2);\n\n @media (max-height: $max-height-breakpoint) {\n max-height: $max-height-calc-expr;\n }\n @media (min-height: $max-height-breakpoint) {\n max-height: $max-height;\n }\n}\n\n/// Defines styles for the header bar when a dialog takes up the full screen.\n/// @param {Number} $close-icon-padding - Padding on close icon button.\n/// @param {Number} $title-side-padding - Space between the edge of the close\n/// icon button and edge of the title.\n@mixin _fullscreen-header($close-icon-padding, $title-side-padding) {\n .mdc-dialog__close {\n order: -1;\n @include theme.property(left, -#{$close-icon-padding});\n }\n .mdc-dialog__header {\n padding: 0 variables.$fullscreen-header-side-padding\n variables.$title-bottom-padding;\n justify-content: flex-start;\n }\n .mdc-dialog__title {\n @include theme.property(\n margin-left,\n 'calc(title - 2 * close)',\n $replace: (title: $title-side-padding, close: $close-icon-padding)\n );\n }\n}\n\n/// Defines styles for the header bar when a dialog is modal.\n/// @param {Number} $close-icon-padding - Padding on close icon button.\n@mixin _modal-header($close-icon-padding) {\n .mdc-dialog__close {\n @include theme.property(right, -#{$close-icon-padding});\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",".mdc-dialog .mdc-dialog__surface {\n background-color: #fff;\n /* @alternate */\n background-color: var(--mdc-theme-surface, #fff);\n}\n.mdc-dialog .mdc-dialog__scrim {\n background-color: rgba(0, 0, 0, 0.32);\n}\n.mdc-dialog .mdc-dialog__surface-scrim {\n background-color: rgba(0, 0, 0, 0.32);\n}\n.mdc-dialog .mdc-dialog__title {\n color: rgba(0, 0, 0, 0.87);\n}\n.mdc-dialog .mdc-dialog__content {\n color: rgba(0, 0, 0, 0.6);\n}\n.mdc-dialog .mdc-dialog__close {\n color: #000;\n /* @alternate */\n color: var(--mdc-theme-on-surface, #000);\n}\n.mdc-dialog .mdc-dialog__close .mdc-icon-button__ripple::before, .mdc-dialog .mdc-dialog__close .mdc-icon-button__ripple::after {\n background-color: #000;\n /* @alternate */\n background-color: var(--mdc-ripple-color, var(--mdc-theme-on-surface, #000));\n}\n.mdc-dialog .mdc-dialog__close:hover .mdc-icon-button__ripple::before, .mdc-dialog .mdc-dialog__close.mdc-ripple-surface--hover .mdc-icon-button__ripple::before {\n opacity: 0.04;\n /* @alternate */\n opacity: var(--mdc-ripple-hover-opacity, 0.04);\n}\n.mdc-dialog .mdc-dialog__close.mdc-ripple-upgraded--background-focused .mdc-icon-button__ripple::before, .mdc-dialog .mdc-dialog__close:not(.mdc-ripple-upgraded):focus .mdc-icon-button__ripple::before {\n transition-duration: 75ms;\n opacity: 0.12;\n /* @alternate */\n opacity: var(--mdc-ripple-focus-opacity, 0.12);\n}\n.mdc-dialog .mdc-dialog__close:not(.mdc-ripple-upgraded) .mdc-icon-button__ripple::after {\n transition: opacity 150ms linear;\n}\n.mdc-dialog .mdc-dialog__close:not(.mdc-ripple-upgraded):active .mdc-icon-button__ripple::after {\n transition-duration: 75ms;\n opacity: 0.12;\n /* @alternate */\n opacity: var(--mdc-ripple-press-opacity, 0.12);\n}\n.mdc-dialog .mdc-dialog__close.mdc-ripple-upgraded {\n --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12);\n}\n.mdc-dialog.mdc-dialog--scrollable .mdc-dialog__title, .mdc-dialog.mdc-dialog--scrollable .mdc-dialog__actions, .mdc-dialog.mdc-dialog--scrollable.mdc-dialog-scroll-divider-footer .mdc-dialog__actions {\n border-color: rgba(0, 0, 0, 0.12);\n}\n.mdc-dialog.mdc-dialog--scrollable .mdc-dialog__title {\n border-bottom: 1px solid rgba(0, 0, 0, 0.12);\n margin-bottom: 0;\n}\n.mdc-dialog.mdc-dialog-scroll-divider-header.mdc-dialog--fullscreen .mdc-dialog__header {\n box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);\n}\n.mdc-dialog .mdc-dialog__surface {\n border-radius: 4px;\n /* @alternate */\n border-radius: var(--mdc-shape-medium, 4px);\n}\n\n.mdc-dialog__surface {\n box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);\n}\n\n.mdc-dialog__title {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n font-family: Roboto, sans-serif;\n /* @alternate */\n font-family: var(--mdc-typography-headline6-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));\n font-size: 1.25rem;\n /* @alternate */\n font-size: var(--mdc-typography-headline6-font-size, 1.25rem);\n line-height: 2rem;\n /* @alternate */\n line-height: var(--mdc-typography-headline6-line-height, 2rem);\n font-weight: 500;\n /* @alternate */\n font-weight: var(--mdc-typography-headline6-font-weight, 500);\n letter-spacing: 0.0125em;\n /* @alternate */\n letter-spacing: var(--mdc-typography-headline6-letter-spacing, 0.0125em);\n text-decoration: inherit;\n /* @alternate */\n text-decoration: var(--mdc-typography-headline6-text-decoration, inherit);\n text-transform: inherit;\n /* @alternate */\n text-transform: var(--mdc-typography-headline6-text-transform, inherit);\n}\n\n.mdc-dialog__content {\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-body1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));\n font-size: 1rem;\n /* @alternate */\n font-size: var(--mdc-typography-body1-font-size, 1rem);\n line-height: 1.5rem;\n /* @alternate */\n line-height: var(--mdc-typography-body1-line-height, 1.5rem);\n font-weight: 400;\n /* @alternate */\n font-weight: var(--mdc-typography-body1-font-weight, 400);\n letter-spacing: 0.03125em;\n /* @alternate */\n letter-spacing: var(--mdc-typography-body1-letter-spacing, 0.03125em);\n text-decoration: inherit;\n /* @alternate */\n text-decoration: var(--mdc-typography-body1-text-decoration, inherit);\n text-transform: inherit;\n /* @alternate */\n text-transform: var(--mdc-typography-body1-text-transform, inherit);\n}\n\n.mdc-dialog__title-icon {\n /** Hook for theming API. */\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-dialog,\n.mdc-dialog__scrim {\n position: fixed;\n top: 0;\n left: 0;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n}\n\n.mdc-dialog {\n display: none;\n z-index: 7;\n /* @alternate */\n z-index: var(--mdc-dialog-z-index, 7);\n}\n.mdc-dialog .mdc-dialog__content {\n padding: 20px 24px 20px 24px;\n}\n.mdc-dialog .mdc-dialog__surface {\n min-width: 280px;\n}\n@media (max-width: 592px) {\n .mdc-dialog .mdc-dialog__surface {\n max-width: calc(100vw - 32px);\n }\n}\n@media (min-width: 592px) {\n .mdc-dialog .mdc-dialog__surface {\n max-width: 560px;\n }\n}\n.mdc-dialog .mdc-dialog__surface {\n max-height: calc(100% - 32px);\n}\n.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface {\n max-width: none;\n}\n@media (max-width: 960px) {\n .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface {\n max-height: 560px;\n width: 560px;\n }\n .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close {\n right: -12px;\n }\n}\n@media (max-width: 720px) and (max-width: 672px) {\n .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface {\n width: calc(100vw - 112px);\n }\n}\n@media (max-width: 720px) and (min-width: 672px) {\n .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface {\n width: 560px;\n }\n}\n@media (max-width: 720px) and (max-height: 720px) {\n .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface {\n max-height: calc(100vh - 160px);\n }\n}\n@media (max-width: 720px) and (min-height: 720px) {\n .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface {\n max-height: 560px;\n }\n}\n@media (max-width: 720px) {\n .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close {\n right: -12px;\n }\n}\n@media (max-width: 720px) and (max-height: 400px), (max-width: 600px), (min-width: 720px) and (max-height: 400px) {\n .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface {\n height: 100%;\n max-height: 100vh;\n max-width: 100vw;\n width: 100vw;\n border-radius: 0;\n }\n .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close {\n order: -1;\n left: -12px;\n }\n .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__header {\n padding: 0 16px 9px;\n justify-content: flex-start;\n }\n .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__title {\n margin-left: calc(16px - 2 * 12px);\n }\n}\n@media (min-width: 960px) {\n .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface {\n width: calc(100vw - 400px);\n }\n .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close {\n right: -12px;\n }\n}\n.mdc-dialog.mdc-dialog__scrim--hidden .mdc-dialog__scrim {\n opacity: 0;\n}\n\n.mdc-dialog__scrim {\n opacity: 0;\n z-index: -1;\n}\n\n.mdc-dialog__container {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-around;\n box-sizing: border-box;\n height: 100%;\n transform: scale(0.8);\n opacity: 0;\n pointer-events: none;\n}\n\n.mdc-dialog__surface {\n /* @alternate */\n position: relative;\n display: flex;\n flex-direction: column;\n flex-grow: 0;\n flex-shrink: 0;\n box-sizing: border-box;\n max-width: 100%;\n max-height: 100%;\n pointer-events: auto;\n overflow-y: auto;\n outline: 0;\n}\n.mdc-dialog__surface .mdc-elevation-overlay {\n width: 100%;\n height: 100%;\n top: 0;\n /* @noflip */\n /*rtl:ignore*/\n left: 0;\n}\n[dir=rtl] .mdc-dialog__surface, .mdc-dialog__surface[dir=rtl] {\n /*rtl:begin:ignore*/\n /* @noflip */\n /*rtl:ignore*/\n text-align: right;\n /*rtl:end:ignore*/\n}\n\n@media screen and (forced-colors: active), (-ms-high-contrast: active) {\n .mdc-dialog__surface {\n outline: 2px solid windowText;\n }\n}\n.mdc-dialog__surface::before {\n position: absolute;\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n top: 0;\n /* @noflip */\n /*rtl:ignore*/\n left: 0;\n border: 2px solid transparent;\n border-radius: inherit;\n content: \"\";\n pointer-events: none;\n}\n@media screen and (forced-colors: active) {\n .mdc-dialog__surface::before {\n border-color: CanvasText;\n }\n}\n@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {\n .mdc-dialog__surface::before {\n content: none;\n }\n}\n\n.mdc-dialog__title {\n display: block;\n margin-top: 0;\n /* @alternate */\n position: relative;\n flex-shrink: 0;\n box-sizing: border-box;\n margin: 0 0 1px;\n padding: 0 24px 9px;\n}\n.mdc-dialog__title::before {\n display: inline-block;\n width: 0;\n height: 40px;\n content: \"\";\n vertical-align: 0;\n}\n[dir=rtl] .mdc-dialog__title, .mdc-dialog__title[dir=rtl] {\n /*rtl:begin:ignore*/\n /* @noflip */\n /*rtl:ignore*/\n text-align: right;\n /*rtl:end:ignore*/\n}\n\n.mdc-dialog--scrollable .mdc-dialog__title {\n margin-bottom: 1px;\n padding-bottom: 15px;\n}\n\n.mdc-dialog--fullscreen .mdc-dialog__header {\n align-items: baseline;\n border-bottom: 1px solid transparent;\n display: inline-flex;\n justify-content: space-between;\n padding: 0 24px 9px;\n z-index: 1;\n}\n@media screen and (forced-colors: active) {\n .mdc-dialog--fullscreen .mdc-dialog__header {\n border-bottom-color: CanvasText;\n }\n}\n.mdc-dialog--fullscreen .mdc-dialog__header .mdc-dialog__close {\n right: -12px;\n}\n.mdc-dialog--fullscreen .mdc-dialog__title {\n margin-bottom: 0;\n padding: 0;\n border-bottom: 0;\n}\n.mdc-dialog--fullscreen.mdc-dialog--scrollable .mdc-dialog__title {\n border-bottom: 0;\n margin-bottom: 0;\n}\n.mdc-dialog--fullscreen .mdc-dialog__close {\n top: 5px;\n}\n.mdc-dialog--fullscreen.mdc-dialog--scrollable .mdc-dialog__actions {\n border-top: 1px solid transparent;\n}\n@media screen and (forced-colors: active) {\n .mdc-dialog--fullscreen.mdc-dialog--scrollable .mdc-dialog__actions {\n border-top-color: CanvasText;\n }\n}\n\n.mdc-dialog--fullscreen--titleless .mdc-dialog__close {\n margin-top: 4px;\n}\n.mdc-dialog--fullscreen--titleless.mdc-dialog--scrollable .mdc-dialog__close {\n margin-top: 0;\n}\n\n.mdc-dialog__content {\n flex-grow: 1;\n box-sizing: border-box;\n margin: 0;\n overflow: auto;\n}\n.mdc-dialog__content > :first-child {\n margin-top: 0;\n}\n.mdc-dialog__content > :last-child {\n margin-bottom: 0;\n}\n\n.mdc-dialog__title + .mdc-dialog__content,\n.mdc-dialog__header + .mdc-dialog__content {\n padding-top: 0;\n}\n\n.mdc-dialog--scrollable .mdc-dialog__title + .mdc-dialog__content {\n padding-top: 8px;\n padding-bottom: 8px;\n}\n\n.mdc-dialog__content .mdc-deprecated-list:first-child:last-child {\n padding: 6px 0 0;\n}\n\n.mdc-dialog--scrollable .mdc-dialog__content .mdc-deprecated-list:first-child:last-child {\n padding: 0;\n}\n\n.mdc-dialog__actions {\n display: flex;\n position: relative;\n flex-shrink: 0;\n flex-wrap: wrap;\n align-items: center;\n justify-content: flex-end;\n box-sizing: border-box;\n min-height: 52px;\n margin: 0;\n padding: 8px;\n border-top: 1px solid transparent;\n}\n@media screen and (forced-colors: active) {\n .mdc-dialog__actions {\n border-top-color: CanvasText;\n }\n}\n.mdc-dialog--stacked .mdc-dialog__actions {\n flex-direction: column;\n align-items: flex-end;\n}\n\n.mdc-dialog__button {\n /* @noflip */\n /*rtl:ignore*/\n margin-left: 8px;\n /* @noflip */\n /*rtl:ignore*/\n margin-right: 0;\n max-width: 100%;\n /* @noflip */\n /*rtl:ignore*/\n text-align: right;\n}\n[dir=rtl] .mdc-dialog__button, .mdc-dialog__button[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\n.mdc-dialog__button:first-child {\n /* @noflip */\n /*rtl:ignore*/\n margin-left: 0;\n /* @noflip */\n /*rtl:ignore*/\n margin-right: 0;\n}\n[dir=rtl] .mdc-dialog__button:first-child, .mdc-dialog__button:first-child[dir=rtl] {\n /*rtl:begin:ignore*/\n /* @noflip */\n /*rtl:ignore*/\n margin-left: 0;\n /* @noflip */\n /*rtl:ignore*/\n margin-right: 0;\n /*rtl:end:ignore*/\n}\n\n[dir=rtl] .mdc-dialog__button, .mdc-dialog__button[dir=rtl] {\n /*rtl:begin:ignore*/\n /* @noflip */\n /*rtl:ignore*/\n text-align: left;\n /*rtl:end:ignore*/\n}\n\n.mdc-dialog--stacked .mdc-dialog__button:not(:first-child) {\n margin-top: 12px;\n}\n\n.mdc-dialog--open,\n.mdc-dialog--opening,\n.mdc-dialog--closing {\n display: flex;\n}\n\n.mdc-dialog--opening .mdc-dialog__scrim {\n transition: opacity 150ms linear;\n}\n.mdc-dialog--opening .mdc-dialog__container {\n transition: opacity 75ms linear, transform 150ms 0ms cubic-bezier(0, 0, 0.2, 1);\n}\n\n.mdc-dialog--closing .mdc-dialog__scrim,\n.mdc-dialog--closing .mdc-dialog__container {\n transition: opacity 75ms linear;\n}\n.mdc-dialog--closing .mdc-dialog__container {\n transform: none;\n}\n\n.mdc-dialog--open .mdc-dialog__scrim {\n opacity: 1;\n}\n.mdc-dialog--open .mdc-dialog__container {\n transform: none;\n opacity: 1;\n}\n.mdc-dialog--open.mdc-dialog__surface-scrim--shown .mdc-dialog__surface-scrim {\n opacity: 1;\n}\n.mdc-dialog--open.mdc-dialog__surface-scrim--hiding .mdc-dialog__surface-scrim {\n transition: opacity 75ms linear;\n}\n.mdc-dialog--open.mdc-dialog__surface-scrim--showing .mdc-dialog__surface-scrim {\n transition: opacity 150ms linear;\n}\n\n.mdc-dialog__surface-scrim {\n display: none;\n opacity: 0;\n position: absolute;\n width: 100%;\n height: 100%;\n z-index: 1;\n}\n.mdc-dialog__surface-scrim--shown .mdc-dialog__surface-scrim, .mdc-dialog__surface-scrim--showing .mdc-dialog__surface-scrim, .mdc-dialog__surface-scrim--hiding .mdc-dialog__surface-scrim {\n display: block;\n}\n\n.mdc-dialog-scroll-lock {\n overflow: hidden;\n}\n\n.mdc-dialog--no-content-padding .mdc-dialog__content {\n padding: 0;\n}\n\n.mdc-dialog--sheet .mdc-dialog__container .mdc-dialog__close {\n right: 12px;\n top: 9px;\n position: absolute;\n z-index: 1;\n}\n\n.mdc-dialog__scrim--removed {\n pointer-events: none;\n}\n.mdc-dialog__scrim--removed .mdc-dialog__scrim,\n.mdc-dialog__scrim--removed .mdc-dialog__surface-scrim {\n display: none;\n}","//\n// Copyright 2016 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:color';\n@use 'sass:map';\n@use '@material/animation/functions' as functions2;\n@use '@material/animation/variables' as variables2;\n@use '@material/base/mixins' as base-mixins;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/theme/css';\n@use '@material/theme/custom-properties';\n@use '@material/theme/theme';\n@use '@material/theme/keys';\n@use '@material/theme/shadow-dom';\n@use '@material/theme/theme-color';\n\n$custom-property-prefix: 'ripple';\n\n$fade-in-duration: 75ms !default;\n$fade-out-duration: 150ms !default;\n$translate-duration: 225ms !default;\n$states-wash-duration: 15ms !default;\n\n// Notes on states:\n// * focus takes precedence over hover (i.e. if an element is both focused and hovered, only focus value applies)\n// * press state applies to a separate pseudo-element, so it has an additive effect on top of other states\n// * selected/activated are applied additively to hover/focus via calculations at preprocessing time\n\n$dark-ink-opacities: (\n hover: 0.04,\n focus: 0.12,\n press: 0.12,\n selected: 0.08,\n activated: 0.12,\n) !default;\n\n$light-ink-opacities: (\n hover: 0.08,\n focus: 0.24,\n press: 0.24,\n selected: 0.16,\n activated: 0.24,\n) !default;\n\n// Legacy\n\n$pressed-dark-ink-opacity: 0.16 !default;\n$pressed-light-ink-opacity: 0.32 !default;\n\n// State selector variables used for state selector mixins below.\n$_hover-selector: '&:hover';\n$_focus-selector: '&.mdc-ripple-upgraded--background-focused, &:not(.mdc-ripple-upgraded):focus';\n$_active-selector: '&:not(:disabled):active';\n\n$light-theme: (\n focus-state-layer-color: theme-color.$on-surface,\n focus-state-layer-opacity: map.get($dark-ink-opacities, focus),\n hover-state-layer-color: theme-color.$on-surface,\n hover-state-layer-opacity: map.get($dark-ink-opacities, hover),\n pressed-state-layer-color: theme-color.$on-surface,\n pressed-state-layer-opacity: map.get($dark-ink-opacities, press),\n);\n\n@mixin theme($theme) {\n @include keys.declare-custom-properties(\n $theme,\n $prefix: $custom-property-prefix\n );\n\n @if shadow-dom.$css-selector-fallback-declarations {\n .mdc-ripple-surface {\n @include theme-styles($theme);\n }\n }\n}\n\n$_ripple-theme: (\n hover-state-layer-color: null,\n focus-state-layer-color: null,\n pressed-state-layer-color: null,\n hover-state-layer-opacity: null,\n focus-state-layer-opacity: null,\n pressed-state-layer-opacity: null,\n);\n\n@mixin theme-styles($theme, $ripple-target: '&') {\n $theme: keys.create-theme-properties(\n $theme,\n $prefix: $custom-property-prefix\n );\n\n // TODO(b/191298796): Support states layer color for every interactive states.\n // Use only hover state layer color, ignoring focus and pressed color.\n @include internal-theme-styles($theme, $ripple-target);\n}\n\n@mixin internal-theme-styles($theme, $ripple-target: '&') {\n @include theme.validate-theme-styles($_ripple-theme, $theme);\n\n @include states-base-color(\n map.get($theme, hover-state-layer-color),\n $ripple-target: $ripple-target\n );\n @include states-hover-opacity(\n map.get($theme, hover-state-layer-opacity),\n $ripple-target: $ripple-target\n );\n @include states-focus-opacity(\n map.get($theme, focus-state-layer-opacity),\n $ripple-target: $ripple-target\n );\n @include states-press-opacity(\n map.get($theme, pressed-state-layer-opacity),\n $ripple-target: $ripple-target\n );\n}\n\n@mixin states-base-color(\n $color,\n $query: feature-targeting.all(),\n $ripple-target: '&'\n) {\n $feat-color: feature-targeting.create-target($query, color);\n\n @if $color {\n @if not custom-properties.is-custom-prop($color) {\n $color: custom-properties.create(\n ripple-color,\n theme-color.get-custom-property($color)\n );\n }\n\n #{$ripple-target}::before,\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-color) {\n @include theme.property(background-color, $color);\n }\n }\n }\n}\n\n///\n/// Customizes ripple opacities in `hover`, `focus`, or `press` states\n/// @param {map} $opacity-map - map specifying custom opacity of zero or more states\n/// @param {bool} $has-nested-focusable-element - whether the component contains a focusable element in the root\n/// @param {string} $ripple-target - the optional selector for the ripple element\n///\n@mixin states-opacities(\n $opacity-map: (),\n $has-nested-focusable-element: false,\n $ripple-target: '&',\n $query: feature-targeting.all()\n) {\n // Ensure sufficient specificity to override base state opacities\n @if map.get($opacity-map, hover) {\n @include states-hover-opacity(\n map.get($opacity-map, hover),\n $ripple-target: $ripple-target,\n $query: $query\n );\n }\n\n @if map.get($opacity-map, focus) {\n @include states-focus-opacity(\n map.get($opacity-map, focus),\n $ripple-target: $ripple-target,\n $has-nested-focusable-element: $has-nested-focusable-element,\n $query: $query\n );\n }\n\n @if map.get($opacity-map, press) {\n @include states-press-opacity(\n map.get($opacity-map, press),\n $ripple-target: $ripple-target,\n $query: $query\n );\n }\n}\n\n@mixin states-hover-opacity(\n $opacity,\n $query: feature-targeting.all(),\n $ripple-target: '&'\n) {\n $feat-color: feature-targeting.create-target($query, color);\n\n @if $opacity and not custom-properties.is-custom-prop($opacity) {\n $opacity: custom-properties.create(ripple-hover-opacity, $opacity);\n }\n\n // Background wash styles, for both CSS-only and upgraded stateful surfaces\n &:hover,\n &.mdc-ripple-surface--hover {\n @include states-background-selector($ripple-target) {\n // Opacity falls under color because the chosen opacity is color-dependent in typical usage\n @include feature-targeting.targets($feat-color) {\n @include theme.property(opacity, $opacity);\n }\n }\n }\n}\n\n@mixin states-focus-opacity(\n $opacity,\n $has-nested-focusable-element: false,\n $query: feature-targeting.all(),\n $ripple-target: '&'\n) {\n // Focus overrides hover by reusing the ::before pseudo-element.\n // :focus-within generally works on non-MS browsers and matches when a *child* of the element has focus.\n // It is useful for cases where a component has a focusable element within the root node, e.g. text field,\n // but undesirable in general in case of nested stateful components.\n // We use a modifier class for JS-enabled surfaces to support all use cases in all browsers.\n @if $has-nested-focusable-element {\n // JS-enabled selectors.\n &.mdc-ripple-upgraded--background-focused,\n // CSS-only selectors.\n &:not(.mdc-ripple-upgraded):focus,\n &:focus-within {\n @include states-background-selector($ripple-target) {\n @include states-focus-opacity-properties_(\n $opacity: $opacity,\n $query: $query\n );\n }\n }\n } @else {\n // JS-enabled selectors.\n &.mdc-ripple-upgraded--background-focused,\n // CSS-only selectors.\n &:not(.mdc-ripple-upgraded):focus {\n @include states-background-selector($ripple-target) {\n @include states-focus-opacity-properties_(\n $opacity: $opacity,\n $query: $query\n );\n }\n }\n }\n}\n\n@mixin states-focus-opacity-properties_($opacity, $query) {\n $feat-animation: feature-targeting.create-target($query, animation);\n // Opacity falls under color because the chosen opacity is color-dependent in typical usage\n $feat-color: feature-targeting.create-target($query, color);\n\n @if $opacity {\n @if not custom-properties.is-custom-prop($opacity) {\n $opacity: custom-properties.create(ripple-focus-opacity, $opacity);\n }\n\n // Note that this duration is only effective on focus, not blur\n @include feature-targeting.targets($feat-animation) {\n transition-duration: 75ms;\n }\n\n @include feature-targeting.targets($feat-color) {\n @include theme.property(opacity, $opacity);\n }\n }\n}\n\n@mixin states-press-opacity(\n $opacity,\n $query: feature-targeting.all(),\n $ripple-target: '&'\n) {\n $feat-animation: feature-targeting.create-target($query, animation);\n $feat-color: feature-targeting.create-target($query, color);\n\n // Styles for non-upgraded (CSS-only) stateful surfaces\n\n @if $opacity {\n @if not custom-properties.is-custom-prop($opacity) {\n $opacity: custom-properties.create(ripple-press-opacity, $opacity);\n }\n\n &:not(.mdc-ripple-upgraded) {\n // Apply press additively by using the ::after pseudo-element\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-animation) {\n transition: opacity $fade-out-duration linear;\n }\n }\n\n &:active {\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-animation) {\n transition-duration: $fade-in-duration;\n }\n\n // Opacity falls under color because the chosen opacity is color-dependent in typical usage\n @include feature-targeting.targets($feat-color) {\n @include theme.property(opacity, $opacity);\n }\n }\n }\n }\n\n &.mdc-ripple-upgraded {\n @include feature-targeting.targets($feat-color) {\n // Upgraded ripple should always emit custom property, regardless of\n // configuration, since ripple itself feature detects custom property\n // support at runtime.\n @include custom-properties.configure($emit-custom-properties: true) {\n @include theme.property(\n custom-properties.create(ripple-fg-opacity, $opacity)\n );\n }\n }\n }\n }\n}\n\n// Simple mixin for base states which automatically selects opacity values based on whether the ink color is\n// light or dark.\n@mixin states(\n $color: theme-color.prop-value(on-surface),\n $has-nested-focusable-element: false,\n $query: feature-targeting.all(),\n $ripple-target: '&',\n $opacity-map: null\n) {\n @include states-interactions_(\n $color: $color,\n $has-nested-focusable-element: $has-nested-focusable-element,\n $query: $query,\n $ripple-target: $ripple-target,\n $opacity-map: $opacity-map\n );\n}\n\n// Simple mixin for activated states which automatically selects opacity values based on whether the ink color is\n// light or dark.\n@mixin states-activated(\n $color,\n $has-nested-focusable-element: false,\n $query: feature-targeting.all(),\n $ripple-target: '&'\n) {\n $feat-color: feature-targeting.create-target($query, color);\n $activated-opacity: states-opacity($color, activated);\n\n &--activated {\n // Stylelint seems to think that '&' qualifies as a type selector here?\n @include states-background-selector($ripple-target) {\n // Opacity falls under color because the chosen opacity is color-dependent.\n @include feature-targeting.targets($feat-color) {\n @include theme.property(\n opacity,\n custom-properties.create(\n --mdc-ripple-activated-opacity,\n $activated-opacity\n )\n );\n }\n }\n\n @include states-interactions_(\n $color: $color,\n $has-nested-focusable-element: $has-nested-focusable-element,\n $opacity-modifier: $activated-opacity,\n $query: $query,\n $ripple-target: $ripple-target\n );\n }\n}\n\n// Simple mixin for selected states which automatically selects opacity values based on whether the ink color is\n// light or dark.\n@mixin states-selected(\n $color,\n $has-nested-focusable-element: false,\n $query: feature-targeting.all(),\n $ripple-target: '&'\n) {\n $feat-color: feature-targeting.create-target($query, color);\n $selected-opacity: states-opacity($color, selected);\n\n &--selected {\n @include states-background-selector($ripple-target) {\n // Opacity falls under color because the chosen opacity is color-dependent.\n @include feature-targeting.targets($feat-color) {\n @include theme.property(\n opacity,\n custom-properties.create(\n --mdc-ripple-selected-opacity,\n $selected-opacity\n )\n );\n }\n }\n\n @include states-interactions_(\n $color: $color,\n $has-nested-focusable-element: $has-nested-focusable-element,\n $opacity-modifier: $selected-opacity,\n $query: $query,\n $ripple-target: $ripple-target\n );\n }\n}\n\n@mixin states-interactions_(\n $color,\n $has-nested-focusable-element,\n $opacity-modifier: 0,\n $query: feature-targeting.all(),\n $ripple-target: '&',\n $opacity-map: null\n) {\n @include target-selector($ripple-target) {\n @include states-base-color($color, $query);\n }\n\n @if $opacity-map == null {\n $opacity-map: (\n hover: states-opacity($color, hover) + $opacity-modifier,\n focus: states-opacity($color, focus) + $opacity-modifier,\n press: states-opacity($color, press) + $opacity-modifier,\n );\n }\n\n @include states-opacities(\n $opacity-map,\n $has-nested-focusable-element: $has-nested-focusable-element,\n $ripple-target: $ripple-target,\n $query: $query\n );\n}\n\n// Wraps content in the `ripple-target` selector if it exists.\n@mixin target-selector($ripple-target: '&') {\n @if $ripple-target == '&' {\n @content;\n } @else {\n #{$ripple-target} {\n @content;\n }\n }\n}\n\n/// Selector for hover, active and focus states.\n@mixin states-selector() {\n #{$_hover-selector},\n #{$_focus-selector},\n #{$_active-selector} {\n @content;\n }\n}\n\n@mixin hover() {\n #{$_hover-selector} {\n @content;\n }\n}\n\n// Selector for focus state. Using ':not(.mdc-ripple-upgraded)' to continue\n// applying focus styles on JS-disabled components, and control focus\n// on JS-enabled components with '.mdc-ripple-upgraded--background-focused'.\n@mixin focus() {\n #{$_focus-selector} {\n @content;\n }\n}\n\n// Selector for active state. Using `:active:active` to override focus styles.\n@mixin pressed() {\n #{$_active-selector} {\n @content;\n }\n}\n\n// @deprecated Use `pressed()` mixin - renamed for consistency.\n@mixin active() {\n @include pressed() {\n @content;\n }\n}\n\n/// Keep the ripple (State overlay) behind the content.\n@mixin behind-content(\n $ripple-target,\n $content-root-selector: '&',\n $query: feature-targeting.all()\n) {\n // Needed for IE11. Without this, IE11 renders the state layer completely\n // underneath the container, making it invisible.\n $feat-structure: feature-targeting.create-target($query, structure);\n\n #{$content-root-selector} {\n @include feature-targeting.targets($feat-structure) {\n z-index: 0;\n }\n }\n\n #{$ripple-target}::before,\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-structure) {\n @include theme.property(\n z-index,\n custom-properties.create(--mdc-ripple-z-index, -1)\n );\n }\n }\n}\n\n@function states-opacity($color, $state) {\n $color-value: theme-color.prop-value($color);\n $opacity-map: if(\n theme-color.tone($color-value) == 'light',\n $light-ink-opacities,\n $dark-ink-opacities\n );\n\n @if not map.has-key($opacity-map, $state) {\n @error \"Invalid state: '#{$state}'. Choose one of: #{map.keys($opacity-map)}\";\n }\n\n @return map.get($opacity-map, $state);\n}\n\n@mixin states-background-selector($ripple-target) {\n #{$ripple-target}::before {\n @content;\n }\n}\n","//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:math';\n@use 'sass:list';\n@use 'sass:map';\n@use 'sass:meta';\n@use 'sass:string';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/theme/custom-properties';\n@use '@material/theme/keys';\n@use '@material/theme/theme';\n\n/// @deprecated Avoid calling this function directly. Instead, configure the\n/// `$styles-