@material/dialog
Version:
The Material Components Web dialog component
1 lines • 107 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/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,iCCndI,sBAYF,gDDqdF,+BAEI,iCAIJ,uCAEI,iCAYJ,+BAEI,sBAYJ,iCAEI,qBAIJ,+BCzgBI,WAYF,wCC4EA,+HDxFE,sBAYF,4ECqdF,gKDjeI,aAYF,8CCqdF,wMA9QI,yBDnNA,aAYF,8CCiOE,yFAEI,gCAKF,gGAEI,wBAhRO,CD0Bb,aAYF,8CCqPA,mDDrPA,8DDyhBF,uMAKI,6BAIJ,sDAEI,wCACA,gBAIJ,wFG/UI,kHAqGS,CHuPb,iCClkBI,kBAYF,2CD8aF,qBGpNI,uHAqGS,CHmHb,mBIxLE,kCACA,mCHvQE,+BAYF,+GAZE,kBAYF,6DAZE,iBAYF,8DAZE,gBAYF,6DAZE,wBAYF,wEAZE,wBAYF,0JAZE,uBAYF,uEDsbF,qBI5LE,kCACA,mCHvQE,+BAYF,2GAZE,eAYF,sDAZE,mBAYF,4DAZE,gBAYF,yDAZE,yBAYF,qEAZE,wBAYF,kJAZE,uBAYF,mEIlBF,uBAGM,kBACA,sBACA,oBJCF,UAYF,gDIFI,sDJVF,sBAYF,0DDzBF,+BAGI,eACA,MACA,OACA,mBACA,uBACA,sBACA,WACA,YAIJ,YASI,aCVA,UAYF,qCD2gBF,iCAEI,4BAiDJ,iCAEI,eM9mBM,CN6nBJ,yBANN,iCAOQ,4BATa,EAaf,yBAXN,iCAYQ,eMloBE,EN+oBV,iCAeM,4BAjBe,CAwKrB,wDAII,eAIF,yBARF,wDAUM,iBACA,YAoIN,2ECv5BE,aD22BF,+CAnGA,wDAoGE,yBAJoB,EAMtB,+CAtGA,wDAuGE,WAjFsB,EAuFxB,gDA7GA,wDA8GE,8BAJqB,EAMvB,gDAhHA,wDAiHE,gBA5FuB,EAFvB,yBA4HF,2ECv5BE,aD8yBA,gDAtCF,wDA0CM,YACA,iBACA,gBACA,YCrzBJ,gBDk4BF,2EACE,SCn4BA,WDs4BF,4EACE,mBAEA,2BAEF,2EC34BE,mCD+zBA,yBAvDF,wDA2DM,YACA,iBACA,gBACA,YCt0BJ,gBDk4BF,2EACE,SCn4BA,WDs4BF,4EACE,mBAEA,2BAEF,2EC34BE,mCDg1BA,yBAxEF,wDA2EM,0BAoEN,2ECv5BE,aDWE,yDAEI,UAMR,mBAEI,UACA,WAMJ,uBAEI,aACA,mBACA,mBACA,6BACA,sBACA,YACA,kDACA,UAGA,oBAIJ,qBG2LE,kBHtLE,aACA,sBACA,YACA,cACA,sBACA,eACA,gBACA,oBAEA,gBGgMJ,4CF1PE,uBEgQI,MAEA,OIhQF,6DP4DE,iBQ1CJ,sERwBF,qBAwBM,8BAIJ,6BQhHA,kBACA,sBACA,WACA,YACA,MACA,OACA,6BACA,sBACA,WACA,oBA+CA,0CRwDA,6BQjGE,yBRsGE,mFALJ,6BAOM,cAMR,mBIiNE,aJ9MY,CI6QV,aJxQA,kBACA,cACA,sBACA,eACA,mBIuRJ,2BAyCA,qBACA,QACA,WJ5UU,CI6UV,WAxCI,iBG1XA,yDPmGE,iBAKN,2CAEI,kBAGA,oBAKF,4CAEI,qBACA,oCACA,oBACA,8BACA,mBAEA,UQ5GJ,0CRoGA,4CAWM,gCAwxBR,+DCv5BE,YDwIA,2CAEI,gBACA,UACA,gBAIJ,kEAEI,gBACA,gBAIJ,2CAEI,QAIJ,oEAQI,iCQrJJ,0CR6IA,oEAUM,6BAMR,qBAEI,YACA,sBACA,SACA,cAIF,kCAEI,aAKJ,iCAEI,gBAKN,iFAKI,cAIJ,gEAII,gBACA,mBAIJ,iEAGI,gBAIJ,yFAKI,UAIJ,qBAEI,aACA,kBACA,cACA,eACA,mBACA,yBACA,sBACA,gBACA,SACA,WM1RY,CN2RZ,iCQlOF,0CRsNF,qBAcM,6BAIJ,0CAEI,sBACA,qBAKN,oBChQE,+BD4QE,eAEA,iBO5QA,2DNFF,+BDqQA,gCCrQA,6BMEE,mFNFF,6BMEE,2DPgRE,gBAIJ,2DAEI,gBAKN,4DAII,aAKF,wCAEI,gCAIJ,4CAEI,ySAOJ,oFAGI,+BAIJ,4CAGI,sCAMJ,qCAEI,UAIJ,yCAEI,sCACA,UAKF,8EAEI,UACA,UAMJ,+EAEI,+BAMJ,gFAEI,gCAMR,2BAEI,aACA,UACA,kBACA,WACA,YAGF,0LAII,cAQN,wBAEI,gBAKF,qDAEI,UAMJ,sCAEI,UMpbiB,CNqbjB,OMpbe,CNqbf,kBAKA,U","file":"mdc.dialog.min.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 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-keys($_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 &.mdc-ripple-upgraded:focus-within,\n // CSS-only selectors.\n &:not(.mdc-ripple-upgraded):focus,\n &:not(.mdc-ripple-upgraded):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-t