@material/dialog
Version:
The Material Components Web dialog component
1 lines • 126 kB
Source Map (JSON)
{"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/elevation/_elevation-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/rtl/_rtl.scss","webpack:///./packages/material-components-web/node_modules/@material/dom/_dom.scss"],"names":[],"mappings":";;;;;;;AAqhBE;ECndI;ECZF;EDwBA;AE1EJ;AH+hBE;EAEI;AG9hBN;AHkiBE;EAEI;AGjiBN;AH6iBE;EAEI;AG5iBN;AHwjBE;EAEI;AGvjBN;AH2jBE;ECzgBI;ECZF;EDwBA;AEzDJ;ACqII;EHxFE;ECZF;EDwBA;AEpDJ;ACygBE;EHjeI;ECZF;EDwBA;AE/CJ;ACogBE;EA9QI;EHnNA;ECZF;EDwBA;AEzCJ;AC0QM;EAEI;ADzQV;AC8QQ;EAEI,yBAhRO;EH0Bb;ECZF;EDwBA;AEhCJ;ACqRI;EHrPA;AE7BJ;AHsjBE;EAKI;AGxjBN;AH4jBE;EAEI;EACA;AG3jBN;AH+jBE;EKhVI;EACA,yHAqGS;AFjVf;AHwkBE;EClkBI;ECZF;EDwBA;AEbJ;;AH2bE;EKrNI;EACA,8HAqGS;AFvUf;;AH0bE;EMxLE;EACA;ELvQE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;UAAA;EAZE;ECZF;EDwBA;AEkBJ;;AHoaE;EM5LE;EACA;ELvQE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;UAAA;EAZE;ECZF;EDwBA;AE4CJ;;AH+YE;EAEI;AG7YN;;AIlEE;EAGM;EACA;EACA;ENCF;ECZF;EDwBA;EMFI;ENVF;ECZF;EDwBA;AE6DJ;;AHtFE;;EAGI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AGwFN;;AHpFE;EASI;ECVA;ECZF;EDwBA;AEgFJ;AH2bE;EAEI;AG1bN;AH2eE;EAEI,gBQ9mBM;ALoIZ;AHyfQ;EANN;IAOQ,6BATa;EG7erB;AACF;AHyfQ;EAXN;IAYQ,gBQloBE;EL4IV;AACF;AHkgBE;EAeM,6BAjBe;AG7fvB;AHohBE;EAIE;IAEI;IAWA;EGhiBN;AACF;AH+pBE;EAII;AGhqBN;AHoqBI;EARF;IAUM;IACA;EGlqBN;EHsyBA;ICv5BE;EEoHF;AACF;AHsvBE;EAnGA;IAoGE,0BAJoB;EG/uBtB;AACF;AHovBE;EAtGA;IAuGE,YAjFsB;EGhqBxB;AACF;AHsvBE;EA7GA;IA8GE,+BAJqB;EG/uBvB;AACF;AHovBE;EAhHA;IAiHE,iBA5FuB;EGrpBzB;AACF;AHkpBI;EA4HF;ICv5BE;EE6IF;AACF;AHgqBI;EAtCF;IA0CM;IACA;IACA;IACA;ICrzBJ;EEsJF;EH4uBA;IACE;ICn4BA;EE0JF;EH4uBA;IACE;IAEA;EG3uBF;EH6uBA;IC34BE;EEiKF;AACF;AH6pBI;EAvDF;IA2DM;IACA;IACA;IACA;ICt0BJ;EE0KF;EHwtBA;IACE;ICn4BA;EE8KF;EHwtBA;IACE;IAEA;EGvtBF;EHytBA;IC34BE;EEqLF;AACF;AH0pBI;EAxEF;IA2EM;EGzpBN;EH6tBA;ICv5BE;EE6LF;AACF;AHnLM;EAEI;AGoLV;;AH9KE;EAEI;EACA;AGgLN;;AH1KE;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;UAAA;EACA;EAGA;AG0KN;;AHtKE;EK0LE;EACA;ELtLE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;AGsKN;AE0BE;EJ1PE;EAAA;EIgQI;EHnRJ;EAAc;EGqRV;AF1BR;AMtOM;EACE;EPtBJ;EAAc;EFiFV;ESzDA;AN0OR;;AO3NI;EVwBF;IAwBM;EGgLN;AACF;AH7KI;EUhHA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;APgSJ;AOjPI;EVwDA;IUjGE;EP8RJ;AACF;AHzLQ;EALJ;IAOM;EG2LR;AACF;;AHtLE;EMiNE,cN9MY;EM6QV;EACA;ENzQA;EACA;EACA;EACA;EACA;AGqLN;AGkGE;EAyCA;EACA;EACA,YN5UU;EM6UV;EAxCI;AH/FN;AM3RM;EACE;EPtBJ;EAAc;EFwHV;EShGA;AN+RR;;AH1LE;EAEI;EAGA;AG0LN;;AHrLI;EAEI;EACA;EACA;EACA;EACA;EAEA;AGsLR;AOlSI;EVoGA;IAWM;EGuLR;AACF;AHgmBE;ECv5BE;AE0TJ;AHlLI;EAEI;EACA;EACA;AGmLR;AH/KI;EAEI;EACA;AGgLR;AH5KI;EAEI;AG6KR;AHzKI;EAQI;AGoKR;AOzTI;EV6IA;IAUM;EGsKR;AACF;;AHjKE;EAEI;EACA;EACA;EACA;AGmKN;AH/JI;EAEI;AGgKR;AH3JI;EAEI;AG4JR;;AHvJE;;EAKI;AGuJN;;AHnJE;EAII;EACA;AGmJN;;AH/IE;EAGI;AGgJN;;AH5IE;EAKI;AG2IN;;AHvIE;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YQ1RY;ER2RZ;AGyIN;AO3WI;EVsNF;IAcM;EG2IN;AACF;AHxII;EAEI;EACA;AGyIR;;AHpIE;EEnRE;EAAc;EDmBd;ECnBA;EAAc;EDmBd;ED4QE;EE/RF;EAAc;EFiSZ;AGmIN;AM/YM;EACE;EPtBJ;EAAc;EDmBd;ECnBA;EAAc;EDmBd;EQKI;ANsZR;;AHtJI;EExRA;EAAc;EDmBd;ECnBA;EAAc;EDmBd;AEoaJ;AMlaM;EACE;EPtBJ;EAAc;EDmBd;ECnBA;EAAc;EDmBd;EQKI;ANyaR;;AM5aM;EACE;EPtBJ;EAAc;EFqSV;ES7QA;ANibR;;AHhKI;EAEI;AGkKR;;AH7JE;;;EAII;AG+JN;;AH1JI;EAEI;AG4JR;AHxJI;EAEI;EAAA;EAAA;AGyJR;;AHlJI;;EAGI;AGoJR;AHhJI;EAGI;UAAA;AGgJR;;AH1II;EAEI;AG4IR;AHxII;EAEI;UAAA;EACA;AGyIR;AHpIM;EAEI;EACA;AGqIV;AH/HM;EAEI;AGgIV;AH1HM;EAEI;AG2HV;;AHrHE;EAEI;EACA;EACA;EACA;EACA;AGuHN;AHpHI;EAII;AGmHR;;AH3GE;EAEI;AG6GN;;AHxGI;EAEI;AG0GR;;AHpGI;EAEI,WQpbiB;ERqbjB,QQpbe;ERqbf;EAKA;AGkGR,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// Selector '.mdc-*' should only be used in this project.\n// stylelint-disable selector-class-pattern --\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\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 .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 z-index: 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 }\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__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\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.prop(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@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 max-width($max-width, $margin, $query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n $max-size-calc-expr: calc(100vw - #{$margin * 2});\n\n .mdc-dialog__surface {\n @include feature-targeting.targets($feat-structure) {\n @if $max-width {\n $max-width-breakpoint: $max-width + ($margin * 2);\n\n // Fit snugly within the viewport at smaller screen sizes.\n @media (max-width: $max-width-breakpoint) {\n max-width: $max-size-calc-expr;\n }\n\n // Once the screen gets big enough, apply a fixed maximum width.\n @media (min-width: $max-width-breakpoint) {\n max-width: $max-width;\n }\n } @else {\n max-width: $max-size-calc-expr;\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 /* stylelint-disable */\n // Disable stylelint here, as nesting depth > 3 is required to\n // work around IE 11.\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 /* stylelint-enable*/\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 (horizontal)\n @media (max-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 // X-Small Screens\n @media (max-width: 600px) {\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 /* @alternate */\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 /* @alternate */\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@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n .mdc-dialog .mdc-dialog__container {\n /* stylelint-disable */\n /* stylelint-enable*/\n }\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) {\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