@material/top-app-bar
Version:
The Material Components for the web top app bar component
1 lines • 90.7 kB
Source Map (JSON)
{"version":3,"sources":["webpack:///./packages/mdc-top-app-bar/mdc-top-app-bar.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-top-app-bar.scss","webpack:///./packages/mdc-top-app-bar/_mixins.scss","webpack:///./packages/material-components-web/node_modules/@material/ripple/_ripple-theme.scss","webpack:///./packages/mdc-top-app-bar/_variables.scss","webpack:///./packages/material-components-web/node_modules/@material/typography/_typography.scss","webpack:///./packages/material-components-web/node_modules/@material/rtl/_rtl.scss","webpack:///./packages/material-components-web/node_modules/@material/elevation/_elevation-theme.scss"],"names":[],"mappings":";;;;;;;AAiCA;ECiCM;ECZF;EDwBA;EAAA;EDzCF;EACA;EACA;EACA;EACA;EACA;EACA;AG/BF;AC0CE;;EHYI;ECZF;EDwBA;AE5DJ;AEwII;;;EJxFE;ECZF;EDwBA;AErDJ;AE0gBE;;;EJjeI;ECZF;EDwBA;AE9CJ;AEmgBE;;;EA9QI;EJnNA;ECZF;EDwBA;AEtCJ;AEuQM;;EAEI;AFrQV;AE0QQ;;EAEI,yBAhRO;EJ0Bb;ECZF;EDwBA;AE3BJ;AEgRI;;EJrPA;AEvBJ;AHVE;EACE;EACA;EACA;EACA;EACA,YM3BS;AHuCb;AHTE;EACE;EACA;EACA;EACA;EACA;EAEA;AGUJ;AHRI;EACE;EACA;AGUN;AHPI;EACE;EACA;AGSN;AHLE;EO+PE;EACA;ENvQE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;UAAA;EAZE;ECZF;EDwBA;ECnBA;EAAc;EDmBd;ECnBA;EAAc;EDmBd;EDDA;EACA;EACA;EACA;AGiCJ;AKjCM;EACE;ENtBJ;EAAc;EDmBd;ECnBA;EAAc;EDmBd;EOKI;ALwCR;;ACjDE;EFfE;EAAc;EDmBd;ECnBA;EAAc;EDmBd;ECnBA;EAAc;EDmBd;ECnBA;EAAc;EDmBd;AE4DJ;AK1DM;EACE;ENtBJ;EAAc;EDmBd;ECnBA;EAAc;EDmBd;ECnBA;EAAc;EDmBd;ECnBA;EAAc;EDmBd;EOKI;ALuER;;AHlEA;EACE;EE9BE;EAAc;EFgChB;EEhCE;EAAc;EFkChB;EACA;EACA;AGuEF;AKtFM;EACE;ENtBJ;EAAc;EFwCd;EExCA;EAAc;EF0Cd;EQlBI;AL6FR;;AHxEE;EACE,YM1EgB;AHqJpB;AHxEE;EACE,YM7EqB;AHuJzB;AHvEE;EACE;EAEA;AGwEJ;;AHpEA;ESgLM;EACA,0HAqGS;ETnRb,WMtFsB;ENuFtB;AGuEF;AHrEE;EACE;AGuEJ;AHpEE;EACE;AGsEJ;;AHjEA;EACE;AGoEF;AHlEE;EE/EE;EAAc;EDmBd;ECnBA;EAAc;EDmBd;AEsIJ;AKpIM;EACE;ENtBJ;EAAc;EDmBd;ECnBA;EAAc;EDmBd;EOKI;AL2IR;;AH9EE;EACE,YMlGe;AHmLnB;AH9EE;EACE;AGgFJ;AH7EE;EE7FE;EAAc;EDmBd;ECnBA;EAAc;EDmBd;AE+JJ;AK7JM;EACE;ENtBJ;EAAc;EDmBd;ECnBA;EAAc;EDmBd;EOKI;ALoKR;;AHrFE;EACE,aM3HmB;AHmNvB;AHrFE;EACE;EACA,mBM/H6B;AHsNjC;AHpFE;;EAEE;AGsFJ;;AHlFA;EACE;AGqFF;;AHlFA;ESkHM;EACA,0HAqGS;ETrNb;AGqFF;;AHhFE;EACE;AGmFJ;AHhFE;EACE;AGkFJ;AH/EE;EE1IE;EAAc;EDmBd;ECnBA;EAAc;EDmBd;ED0HA,mBMpJmC;AHyOvC;AK7MM;EACE;ENtBJ;EAAc;EDmBd;ECnBA;EAAc;EDmBd;EOKI;ALoNR;;AH3FA;EACE,iBMtLW;AHoRb;;AH3FA;EACE,iBMlKiB;AHgQnB;;AH3FA;EACE,iBMtLkB;AHoRpB;;AH3FA;EACE,kBMjLqB;AH+QvB;;AH3FA;EACE;AG8FF;;ACnOE;EACE;IACE,YE3Dc;EHiSlB;;ECnOE;IACE,YE9DmB;EHoSvB;;ECnOE;IACE;EDsOJ;;EClOE;IACE;EDqOJ;EClOI;IF/CF;IAAc;IDmBd;ICnBA;IAAc;IDmBd;EEsQF;EKpQI;IACE;INtBJ;IAAc;IDmBd;ICnBA;IAAc;IDmBd;IOKI;EL2QN;;EC1OI;IACE,mBEzEgC;EHsTtC;;ECzOE;IACE,iBE3Fc;EHuUlB;AACF,C","file":"mdc.top-app-bar.css","sourcesContent":["//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/elevation/mixins' as elevation-mixins;\n@use '@material/animation/variables' as animation-variables;\n@use '@material/rtl/rtl';\n@use '@material/typography/typography';\n@use './mixins';\n@use './variables';\n\n// postcss-bem-linter: define top-app-bar\n.mdc-top-app-bar {\n @include mixins.fill-color-accessible(primary);\n @include mixins.icon-ink-color(on-primary);\n\n display: flex;\n position: fixed;\n flex-direction: column;\n justify-content: space-between;\n box-sizing: border-box;\n width: 100%;\n z-index: 4;\n\n &__row {\n display: flex;\n position: relative;\n box-sizing: border-box;\n width: 100%;\n height: variables.$row-height;\n }\n\n &__section {\n display: inline-flex;\n flex: 1 1 auto;\n align-items: center;\n min-width: 0;\n padding: variables.$section-vertical-padding\n variables.$section-horizontal-padding;\n z-index: 1;\n\n &--align-start {\n justify-content: flex-start;\n order: -1;\n }\n\n &--align-end {\n justify-content: flex-end;\n order: 1;\n }\n }\n\n &__title {\n @include typography.typography(headline6);\n @include rtl.reflexive-box(padding, left, variables.$title-left-padding);\n\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n z-index: 1;\n }\n}\n\n@at-root {\n @include mixins.short-shape-radius(24px);\n}\n\n.mdc-top-app-bar--short {\n top: 0;\n @include rtl.ignore-next-line();\n right: auto;\n @include rtl.ignore-next-line();\n left: 0;\n width: 100%;\n transition: width 250ms animation-variables.$standard-curve-timing-function;\n\n @include rtl.rtl {\n @include rtl.ignore-next-line();\n right: 0;\n @include rtl.ignore-next-line();\n left: auto;\n }\n\n .mdc-top-app-bar__row {\n height: variables.$mobile-row-height;\n }\n\n .mdc-top-app-bar__section {\n padding: variables.$mobile-section-padding;\n }\n\n .mdc-top-app-bar__title {\n transition: opacity 200ms\n animation-variables.$standard-curve-timing-function;\n opacity: 1;\n }\n}\n\n.mdc-top-app-bar--short-collapsed {\n @include elevation-mixins.elevation(4);\n\n width: variables.$short-collapsed-width;\n transition: width 300ms animation-variables.$standard-curve-timing-function;\n\n .mdc-top-app-bar__title {\n display: none;\n }\n\n .mdc-top-app-bar__action-item {\n transition: padding 150ms\n animation-variables.$standard-curve-timing-function;\n }\n}\n\n.mdc-top-app-bar--short-collapsed.mdc-top-app-bar--short-has-action-item {\n width: variables.$short-collapsed-width * 2;\n\n .mdc-top-app-bar__section--align-end {\n @include rtl.reflexive-box(padding, right, 12px);\n }\n}\n\n.mdc-top-app-bar--dense {\n .mdc-top-app-bar__row {\n height: variables.$dense-row-height;\n }\n\n .mdc-top-app-bar__section {\n padding: 0 variables.$dense-section-horizontal-padding;\n }\n\n .mdc-top-app-bar__title {\n @include rtl.reflexive-box(\n padding,\n left,\n variables.$dense-title-left-padding\n );\n }\n}\n\n.mdc-top-app-bar--prominent {\n .mdc-top-app-bar__row {\n height: variables.$prominent-row-height;\n }\n\n .mdc-top-app-bar__title {\n align-self: flex-end;\n padding-bottom: variables.$prominent-title-bottom-padding;\n }\n\n .mdc-top-app-bar__action-item,\n .mdc-top-app-bar__navigation-icon {\n align-self: flex-start;\n }\n}\n\n.mdc-top-app-bar--fixed {\n transition: box-shadow 200ms linear;\n}\n\n.mdc-top-app-bar--fixed-scrolled {\n @include elevation-mixins.elevation(4);\n\n transition: box-shadow 200ms linear;\n}\n\n// Specific styles for dense and prominent styled top app bar\n.mdc-top-app-bar--dense.mdc-top-app-bar--prominent {\n .mdc-top-app-bar__row {\n height: variables.$dense-row-height * 2;\n }\n\n .mdc-top-app-bar__section {\n padding: 0 variables.$section-horizontal-padding;\n }\n\n .mdc-top-app-bar__title {\n @include rtl.reflexive-box(padding, left, variables.$title-left-padding);\n\n padding-bottom: variables.$dense-prominent-title-bottom-padding;\n }\n}\n\n.mdc-top-app-bar--fixed-adjust {\n padding-top: variables.$row-height;\n}\n\n.mdc-top-app-bar--dense-fixed-adjust {\n padding-top: variables.$dense-row-height;\n}\n\n.mdc-top-app-bar--short-fixed-adjust {\n padding-top: variables.$mobile-row-height;\n}\n\n.mdc-top-app-bar--prominent-fixed-adjust {\n padding-top: variables.$prominent-row-height;\n}\n\n.mdc-top-app-bar--dense-prominent-fixed-adjust {\n padding-top: variables.$dense-row-height * 2;\n}\n\n// Mobile Styles\n@include mixins.mobile-breakpoint_;\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-top-app-bar {\n background-color: #6200ee;\n /* @alternate */\n background-color: var(--mdc-theme-primary, #6200ee);\n color: white;\n display: flex;\n position: fixed;\n flex-direction: column;\n justify-content: space-between;\n box-sizing: border-box;\n width: 100%;\n z-index: 4;\n}\n.mdc-top-app-bar .mdc-top-app-bar__action-item,\n.mdc-top-app-bar .mdc-top-app-bar__navigation-icon {\n color: #fff;\n /* @alternate */\n color: var(--mdc-theme-on-primary, #fff);\n}\n.mdc-top-app-bar .mdc-top-app-bar__action-item::before, .mdc-top-app-bar .mdc-top-app-bar__action-item::after,\n.mdc-top-app-bar .mdc-top-app-bar__navigation-icon::before,\n.mdc-top-app-bar .mdc-top-app-bar__navigation-icon::after {\n background-color: #fff;\n /* @alternate */\n background-color: var(--mdc-ripple-color, var(--mdc-theme-on-primary, #fff));\n}\n.mdc-top-app-bar .mdc-top-app-bar__action-item:hover::before, .mdc-top-app-bar .mdc-top-app-bar__action-item.mdc-ripple-surface--hover::before,\n.mdc-top-app-bar .mdc-top-app-bar__navigation-icon:hover::before,\n.mdc-top-app-bar .mdc-top-app-bar__navigation-icon.mdc-ripple-surface--hover::before {\n opacity: 0.08;\n /* @alternate */\n opacity: var(--mdc-ripple-hover-opacity, 0.08);\n}\n.mdc-top-app-bar .mdc-top-app-bar__action-item.mdc-ripple-upgraded--background-focused::before, .mdc-top-app-bar .mdc-top-app-bar__action-item:not(.mdc-ripple-upgraded):focus::before,\n.mdc-top-app-bar .mdc-top-app-bar__navigation-icon.mdc-ripple-upgraded--background-focused::before,\n.mdc-top-app-bar .mdc-top-app-bar__navigation-icon:not(.mdc-ripple-upgraded):focus::before {\n transition-duration: 75ms;\n opacity: 0.24;\n /* @alternate */\n opacity: var(--mdc-ripple-focus-opacity, 0.24);\n}\n.mdc-top-app-bar .mdc-top-app-bar__action-item:not(.mdc-ripple-upgraded)::after,\n.mdc-top-app-bar .mdc-top-app-bar__navigation-icon:not(.mdc-ripple-upgraded)::after {\n transition: opacity 150ms linear;\n}\n.mdc-top-app-bar .mdc-top-app-bar__action-item:not(.mdc-ripple-upgraded):active::after,\n.mdc-top-app-bar .mdc-top-app-bar__navigation-icon:not(.mdc-ripple-upgraded):active::after {\n transition-duration: 75ms;\n opacity: 0.24;\n /* @alternate */\n opacity: var(--mdc-ripple-press-opacity, 0.24);\n}\n.mdc-top-app-bar .mdc-top-app-bar__action-item.mdc-ripple-upgraded,\n.mdc-top-app-bar .mdc-top-app-bar__navigation-icon.mdc-ripple-upgraded {\n --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24);\n}\n.mdc-top-app-bar__row {\n display: flex;\n position: relative;\n box-sizing: border-box;\n width: 100%;\n height: 64px;\n}\n.mdc-top-app-bar__section {\n display: inline-flex;\n flex: 1 1 auto;\n align-items: center;\n min-width: 0;\n padding: 8px 12px;\n z-index: 1;\n}\n.mdc-top-app-bar__section--align-start {\n justify-content: flex-start;\n order: -1;\n}\n.mdc-top-app-bar__section--align-end {\n justify-content: flex-end;\n order: 1;\n}\n.mdc-top-app-bar__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 /* @noflip */\n /*rtl:ignore*/\n padding-left: 20px;\n /* @noflip */\n /*rtl:ignore*/\n padding-right: 0;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n z-index: 1;\n}\n[dir=rtl] .mdc-top-app-bar__title, .mdc-top-app-bar__title[dir=rtl] {\n /*rtl:begin:ignore*/\n /* @noflip */\n /*rtl:ignore*/\n padding-left: 0;\n /* @noflip */\n /*rtl:ignore*/\n padding-right: 20px;\n /*rtl:end:ignore*/\n}\n\n.mdc-top-app-bar--short-collapsed {\n /* @noflip */\n /*rtl:ignore*/\n border-top-left-radius: 0;\n /* @noflip */\n /*rtl:ignore*/\n border-top-right-radius: 0;\n /* @noflip */\n /*rtl:ignore*/\n border-bottom-right-radius: 24px;\n /* @noflip */\n /*rtl:ignore*/\n border-bottom-left-radius: 0;\n}\n[dir=rtl] .mdc-top-app-bar--short-collapsed, .mdc-top-app-bar--short-collapsed[dir=rtl] {\n /*rtl:begin:ignore*/\n /* @noflip */\n /*rtl:ignore*/\n border-top-left-radius: 0;\n /* @noflip */\n /*rtl:ignore*/\n border-top-right-radius: 0;\n /* @noflip */\n /*rtl:ignore*/\n border-bottom-right-radius: 0;\n /* @noflip */\n /*rtl:ignore*/\n border-bottom-left-radius: 24px;\n /*rtl:end:ignore*/\n}\n\n.mdc-top-app-bar--short {\n top: 0;\n /* @noflip */\n /*rtl:ignore*/\n right: auto;\n /* @noflip */\n /*rtl:ignore*/\n left: 0;\n width: 100%;\n transition: width 250ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n[dir=rtl] .mdc-top-app-bar--short, .mdc-top-app-bar--short[dir=rtl] {\n /*rtl:begin:ignore*/\n /* @noflip */\n /*rtl:ignore*/\n right: 0;\n /* @noflip */\n /*rtl:ignore*/\n left: auto;\n /*rtl:end:ignore*/\n}\n\n.mdc-top-app-bar--short .mdc-top-app-bar__row {\n height: 56px;\n}\n.mdc-top-app-bar--short .mdc-top-app-bar__section {\n padding: 4px;\n}\n.mdc-top-app-bar--short .mdc-top-app-bar__title {\n transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);\n opacity: 1;\n}\n\n.mdc-top-app-bar--short-collapsed {\n /* @alternate */\n box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);\n width: 56px;\n transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.mdc-top-app-bar--short-collapsed .mdc-top-app-bar__title {\n display: none;\n}\n.mdc-top-app-bar--short-collapsed .mdc-top-app-bar__action-item {\n transition: padding 150ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.mdc-top-app-bar--short-collapsed.mdc-top-app-bar--short-has-action-item {\n width: 112px;\n}\n.mdc-top-app-bar--short-collapsed.mdc-top-app-bar--short-has-action-item .mdc-top-app-bar__section--align-end {\n /* @noflip */\n /*rtl:ignore*/\n padding-left: 0;\n /* @noflip */\n /*rtl:ignore*/\n padding-right: 12px;\n}\n[dir=rtl] .mdc-top-app-bar--short-collapsed.mdc-top-app-bar--short-has-action-item .mdc-top-app-bar__section--align-end, .mdc-top-app-bar--short-collapsed.mdc-top-app-bar--short-has-action-item .mdc-top-app-bar__section--align-end[dir=rtl] {\n /*rtl:begin:ignore*/\n /* @noflip */\n /*rtl:ignore*/\n padding-left: 12px;\n /* @noflip */\n /*rtl:ignore*/\n padding-right: 0;\n /*rtl:end:ignore*/\n}\n\n.mdc-top-app-bar--dense .mdc-top-app-bar__row {\n height: 48px;\n}\n.mdc-top-app-bar--dense .mdc-top-app-bar__section {\n padding: 0 4px;\n}\n.mdc-top-app-bar--dense .mdc-top-app-bar__title {\n /* @noflip */\n /*rtl:ignore*/\n padding-left: 12px;\n /* @noflip */\n /*rtl:ignore*/\n padding-right: 0;\n}\n[dir=rtl] .mdc-top-app-bar--dense .mdc-top-app-bar__title, .mdc-top-app-bar--dense .mdc-top-app-bar__title[dir=rtl] {\n /*rtl:begin:ignore*/\n /* @noflip */\n /*rtl:ignore*/\n padding-left: 0;\n /* @noflip */\n /*rtl:ignore*/\n padding-right: 12px;\n /*rtl:end:ignore*/\n}\n\n.mdc-top-app-bar--prominent .mdc-top-app-bar__row {\n height: 128px;\n}\n.mdc-top-app-bar--prominent .mdc-top-app-bar__title {\n align-self: flex-end;\n padding-bottom: 2px;\n}\n.mdc-top-app-bar--prominent .mdc-top-app-bar__action-item,\n.mdc-top-app-bar--prominent .mdc-top-app-bar__navigation-icon {\n align-self: flex-start;\n}\n\n.mdc-top-app-bar--fixed {\n transition: box-shadow 200ms linear;\n}\n\n.mdc-top-app-bar--fixed-scrolled {\n /* @alternate */\n box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);\n transition: box-shadow 200ms linear;\n}\n\n.mdc-top-app-bar--dense.mdc-top-app-bar--prominent .mdc-top-app-bar__row {\n height: 96px;\n}\n.mdc-top-app-bar--dense.mdc-top-app-bar--prominent .mdc-top-app-bar__section {\n padding: 0 12px;\n}\n.mdc-top-app-bar--dense.mdc-top-app-bar--prominent .mdc-top-app-bar__title {\n /* @noflip */\n /*rtl:ignore*/\n padding-left: 20px;\n /* @noflip */\n /*rtl:ignore*/\n padding-right: 0;\n padding-bottom: 9px;\n}\n[dir=rtl] .mdc-top-app-bar--dense.mdc-top-app-bar--prominent .mdc-top-app-bar__title, .mdc-top-app-bar--dense.mdc-top-app-bar--prominent .mdc-top-app-bar__title[dir=rtl] {\n /*rtl:begin:ignore*/\n /* @noflip */\n /*rtl:ignore*/\n padding-left: 0;\n /* @noflip */\n /*rtl:ignore*/\n padding-right: 20px;\n /*rtl:end:ignore*/\n}\n\n.mdc-top-app-bar--fixed-adjust {\n padding-top: 64px;\n}\n\n.mdc-top-app-bar--dense-fixed-adjust {\n padding-top: 48px;\n}\n\n.mdc-top-app-bar--short-fixed-adjust {\n padding-top: 56px;\n}\n\n.mdc-top-app-bar--prominent-fixed-adjust {\n padding-top: 128px;\n}\n\n.mdc-top-app-bar--dense-prominent-fixed-adjust {\n padding-top: 96px;\n}\n\n@media (max-width: 599px) {\n .mdc-top-app-bar__row {\n height: 56px;\n }\n\n .mdc-top-app-bar__section {\n padding: 4px;\n }\n\n .mdc-top-app-bar--short {\n transition: width 200ms cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .mdc-top-app-bar--short-collapsed {\n transition: width 250ms cubic-bezier(0.4, 0, 0.2, 1);\n }\n .mdc-top-app-bar--short-collapsed .mdc-top-app-bar__section--align-end {\n /* @noflip */\n /*rtl:ignore*/\n padding-left: 0;\n /* @noflip */\n /*rtl:ignore*/\n padding-right: 12px;\n }\n [dir=rtl] .mdc-top-app-bar--short-collapsed .mdc-top-app-bar__section--align-end, .mdc-top-app-bar--short-collapsed .mdc-top-app-bar__section--align-end[dir=rtl] {\n /*rtl:begin:ignore*/\n /* @noflip */\n /*rtl:ignore*/\n padding-left: 12px;\n /* @noflip */\n /*rtl:ignore*/\n padding-right: 0;\n /*rtl:end:ignore*/\n }\n\n .mdc-top-app-bar--prominent .mdc-top-app-bar__title {\n padding-bottom: 6px;\n }\n\n .mdc-top-app-bar--fixed-adjust {\n padding-top: 56px;\n }\n}","//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:list';\n@use 'sass:meta';\n@use '@material/animation/variables' as animation-variables;\n@use '@material/ripple/ripple-theme';\n@use '@material/theme/theme-color';\n@use '@material/theme/theme';\n@use '@material/shape/mixins' as shape-mixins;\n@use '@material/shape/functions';\n@use './variables';\n@use '@material/rtl/rtl';\n\n//\n// Public\n//\n\n@mixin ink-color($color) {\n @include theme.property(color, $color);\n}\n\n@mixin fill-color($color) {\n @include theme.property(background-color, $color);\n}\n\n@mixin fill-color-accessible($color) {\n @include fill-color($color);\n @include ink-color(theme-color.accessible-ink-color($color));\n}\n\n@mixin icon-ink-color($color) {\n .mdc-top-app-bar__action-item,\n .mdc-top-app-bar__navigation-icon {\n @include theme.property(color, $color);\n @include ripple-theme.states($color);\n }\n}\n\n@mixin short-shape-radius($radius, $rtl-reflexive: true) {\n @if meta.type-of($radius) == 'list' and list.length($radius) > 1 {\n @error \"Invalid radius: '#{$radius}' component doesn't allow customizing all corners\";\n }\n\n $radius: 0 0 $radius 0;\n\n $selector: if(\n &,\n '&.mdc-top-app-bar--short-collapsed',\n '.mdc-top-app-bar--short-collapsed'\n );\n\n #{$selector} {\n @include shape-mixins.radius(\n $radius,\n $rtl-reflexive,\n $component-height: variables.$dense-row-height\n );\n }\n}\n\n//\n// Private\n//\n\n@mixin mobile-breakpoint_($mobile-breakpoint: variables.$mobile-breakpoint) {\n @media (max-width: $mobile-breakpoint) {\n .mdc-top-app-bar__row {\n height: variables.$mobile-row-height;\n }\n\n .mdc-top-app-bar__section {\n padding: variables.$mobile-section-padding;\n }\n\n .mdc-top-app-bar--short {\n transition: width 200ms\n animation-variables.$standard-curve-timing-function;\n }\n\n .mdc-top-app-bar--short-collapsed {\n transition: width 250ms\n animation-variables.$standard-curve-timing-function;\n\n .mdc-top-app-bar__section--align-end {\n @include rtl.reflexive-box(\n padding,\n right,\n variables.$short-collapsed-right-icon-padding\n );\n }\n }\n\n .mdc-top-app-bar--prominent {\n .mdc-top-app-bar__title {\n padding-bottom: variables.$prominent-mobile-title-bottom-padding;\n }\n }\n\n .mdc-top-app-bar--fixed-adjust {\n padding-top: variables.$mobile-row-height;\n }\n }\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-targeting.targets($feat-color) {\n // Upgraded ripple should always emit custom property, regardless of\n // configuration, since ripple itself feature detects custom property\n // support at runtime.\n @include custom-properties.configure($emit-custom-properties: true) {\n @include theme.property(\n custom-properties.create(ripple-fg-opacity, $opacity)\n );\n }\n }\n }\n }\n}\n\n// Simple mixin for base states which automatically selects opacity values based on whether the ink color is\n// light or dark.\n@mixin states(\n $color: theme-color.prop-value(on-surface),\n $has-nested-focusable-element: false,\n $query: feature-targeting.all(),\n $ripple-target: '&',\n $opacity-map: null\n) {\n @include states-interactions_(\n $color: $color,\n $has-nested-focusable-element: $has-nested-focusable-element,\n $query: $query,\n $ripple-target: $ripple-target,\n $opacity-map: $opacity-map\n );\n}\n\n// Simple mixin for activated states which automatically selects opacity values based on whether the ink color is\n// light or dark.\n@mixin states-activated(\n $color,\n $has-nested-focusable-element: false,\n $query: feature-targeting.all(),\n $ripple-target: '&'\n) {\n $feat-color: feature-targeting.create-target($query, color);\n $activated-opacity: states-opacity($color, activated);\n\n &--activated {\n // Stylelint seems to think that '&' qualifies as a type selector here?\n @include states-background-selector($ripple-target) {\n // Opacity falls under color because the chosen opacity is color-dependent.\n @include feature-targeting.targets($feat-color) {\n @include theme.property(\n opacity,\n custom-properties.create(\n --mdc-ripple-activated-opacity,\n $activated-opacity\n )\n );\n }\n }\n\n @include states-interactions_(\n $color: $color,\n $has-nested-focusable-element: $has-nested-focusable-element,\n $opacity-modifier: $activated-opacity,\n $query: $query,\n $ripple-target: $ripple-target\n );\n }\n}\n\n// Simple mixin for selected states which automatically selects opacity values based on whether the ink color is\n// light or dark.\n@mixin states-selected(\n $color,\n $has-nested-focusable-element: false,\n $query: feature-targeting.all(),\n $ripple-target: '&'\n) {\n $feat-color: feature-targeting.create-target($query, color);\n $selected-opacity: states-opacity($color, selected);\n\n &--selected {\n @include states-background-selector($ripple-target) {\n // Opacity falls under color because the chosen opacity is color-dependent.\n @include feature-targeting.targets($feat-color) {\n @include theme.property(\n opacity,\n custom-properties.create(\n --mdc-ripple-selected-opacity,\n $selected-opacity\n )\n );\n }\n }\n\n @include states-interactions_(\n $color: $color,\n $has-nested-focusable-element: $has-nested-focusable-element,\n $opacity-modifier: $selected-opacity,\n $query: $query,\n $ripple-target: $ripple-target\n );\n }\n}\n\n@mixin states-interactions_(\n $color,\n $has-nested-focusable-element,\n $opacity-modifier: 0,\n $query: feature-targeting.all(),\n $ripple-target: '&',\n $opacity-map: null\n) {\n @include target-selector($ripple-target) {\n @include states-base-color($color, $query);\n }\n\n @if $opacity-map == null {\n $opacity-map: (\n hover: states-opacity($color, hover) + $opacity-modifier,\n focus: states-opacity($color, focus) + $opacity-modifier,\n press: states-opacity($color, press) + $opacity-modifier,\n );\n }\n\n @include states-opacities(\n $opacity-map,\n $has-nested-focusable-element: $has-nested-focusable-element,\n $ripple-target: $ripple-target,\n $query: $query\n );\n}\n\n// Wraps content in the `ripple-target` selector if it exists.\n@mixin target-selector($ripple-target: '&') {\n @if $ripple-target == '&' {\n @content;\n } @else {\n #{$ripple-target} {\n @content;\n }\n }\n}\n\n/// Selector for hover, active and focus states.\n@mixin states-selector() {\n #{$_hover-selector},\n #{$_focus-selector},\n #{$_active-selector} {\n @content;\n }\n}\n\n@mixin hover() {\n #{$_hover-selector} {\n @content;\n }\n}\n\n// Selector for focus state. Using ':not(.mdc-ripple-upgraded)' to continue\n// applying focus styles on JS-disabled components, and control focus\n// on JS-enabled components with '.mdc-ripple-upgraded--background-focused'.\n@mixin focus() {\n #{$_focus-selector} {\n @content;\n }\n}\n\n// Selector for active state. Using `:active:active` to override focus styles.\n@mixin pressed() {\n #{$_active-selector} {\n @content;\n }\n}\n\n// @deprecated Use `pressed()` mixin - renamed for consistency.\n@mixin active() {\n @include pressed() {\n @content;\n }\n}\n\n/// Keep the ripple (State overlay) behind the content.\n@mixin behind-content(\n $ripple-target,\n $content-root-selector: '&',\n $query: feature-targeting.all()\n) {\n // Needed for IE11. Without this, IE11 renders the state layer completely\n // underneath the container, making it invisible.\n $feat-structure: feature-targeting.create-target($query, structure);\n\n #{$content-root-selector} {\n @include feature-targeting.targets($feat-structure) {\n z-index: 0;\n }\n }\n\n #{$ripple-target}::before,\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-structure) {\n @include theme.property(\n z-index,\n custom-properties.create(--mdc-ripple-z-index, -1)\n );\n }\n }\n}\n\n@function states-opacity($color, $state) {\n $color-value: theme-color.prop-value($color);\n $opacity-map: if(\n theme-color.tone($color-value) == 'light',\n $light-ink-opacities,\n $dark-ink-opacities\n );\n\n @if not map.has-key($opacity-map, $state) {\n @error \"Invalid state: '#{$state}'. Choose one of: #{map.keys($opacity-map)}\";\n }\n\n @return map.get($opacity-map, $state);\n}\n\n@mixin states-background-selector($ripple-target) {\n #{$ripple-target}::before {\n @content;\n }\n}\n","//\n// Copyright 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// Default styles\n$row-height: 64px !default;\n$title-left-padding: 20px !default;\n$section-vertical-padding: 8px !default;\n$section-horizontal-padding: 12px !default;\n\n$mobile-breakpoint: 599px !default;\n\n// Default mobile styles\n$mobile-row-height: 56px !default;\n$mobile-section-padding: 4px !default;\n\n// Short top app bar\n$short-collapsed-border-radius: 4px !default;\n$short-collapsed-width: 56px !default;\n$short-collapsed-right-icon-padding: 12px !default;\n\n// Prominent styles\n$prominent-row-height: 128px !default;\n$prominent-title-bottom-padding: 2px !default;\n\n// Prominent mobile styles\n$prominent-mobile-title-bottom-padding: 6px !default;\n\n// Dense styles\n$dense-row-height: 48px !default;\n$dense-section-horizontal-padding: 4px !default;\n$dense-title-left-padding: 12px !default;\n\n// Dense & Prominent styles\n$dense-prominent-title-bottom-padding: 9px !default;\n","//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:math';\n@use 'sass:list';\n@use 'sass:map';\n@use 'sass