| 1 | {"version":3,"sources":["webpack:///./packages/mdc-slider/styles.scss","webpack:///./packages/material-components-web/node_modules/@material/animation/_animation.scss","webpack:///styles.scss","webpack:///./packages/mdc-slider/_slider.scss","webpack:///./packages/material-components-web/node_modules/@material/theme/_css.scss","webpack:///./packages/material-components-web/node_modules/@material/theme/_gss.scss","webpack:///./packages/material-components-web/node_modules/@material/ripple/_ripple-theme.scss","webpack:///./packages/material-components-web/node_modules/@material/rtl/_rtl.scss","webpack:///./packages/material-components-web/node_modules/@material/dom/_dom.scss","webpack:///./packages/mdc-slider/_slider-theme.scss","webpack:///./packages/material-components-web/node_modules/@material/typography/_typography.scss","webpack:///./packages/material-components-web/node_modules/@material/elevation/_elevation-theme.scss"],"names":[],"mappings":";;;;;;;AAgTE;EACE;IACE,+DC3R2B;YD2R3B,uDC3R2B;IDgS3B;YAAA;EEnTJ;EFsTE;IACE;YAAA;EEpTJ;AACF;AFwSE;EACE;IACE,+DC3R2B;YD2R3B,uDC3R2B;IDgS3B;YAAA;EEnTJ;EFsTE;IACE;YAAA;EEpTJ;AACF;AFwTE;EACE;IACE;YAAA;IACA;EEtTJ;EFyTE;IACE;EEvTJ;AACF;AF+SE;EACE;IACE;YAAA;IACA;EEtTJ;EFyTE;IACE;EEvTJ;AACF;AF0TE;EACE;IACE;YAAA;IACA;EExTJ;EF2TE;IACE;EEzTJ;AACF;AFiTE;EACE;IACE;YAAA;IACA;EExTJ;EF2TE;IACE;EEzTJ;AACF;AC4FE;EHJE;EACA;EACA;EACA;EACA;EACA;EAEA;EAGE;AExFN;AF4FE;EAGI;EACA;EACA;EACA;EACA;AE5FN;AFgGE;EAGI;EI5EA;ECZF;EDwBA;AF7BJ;AF0GE;EIzFI;ECZF;EDwBA;AFxBJ;AFiHI;EAEI;UAAA;AEhHR;AFoHI;EAEI;EKpHJ;EAAc;ELsHV;EACA;UAAA;EACA;UAAA;AElHR;AFwHI;EAEI;EKhIJ;EAAc;ELkIV;AEtHR;AF4HI;EAEI;UAAA;AE3HR;AFmII;EAEI;UAAA;EAKA;UAAA;AEtIR;AFgLE;EAGI;EKtMF;EAAc;ELwMZ;EACA,WAZK;EAaL,YAbK;AElKX;AFoLI;EAGI;EKlNJ;EAAc;ELoNV;EACA;EACA;AEnLR;AFuLI;EAEI;EACA;AEtLR;AIwDI;EFxFE;ECZF;EDwBA;AFyBJ;AI4bE;EFjeI;ECZF;EDwBA;AF8BJ;AIubE;EA9QI;EFnNA;ECZF;EDwBA;AFoCJ;AI6LM;EAEI;AJ5LV;AIiMQ;EAEI,yBAhRO;EF0Bb;ECZF;EDwBA;AF6CJ;AIwMI;EFrPA;AFgDJ;;ACjEE;EAMI;EACA,YA7Be;EA8Bf;EACA;EACA;AD+DN;ACNE;EAEI,WArFmB;EAsFnB;EACA;EACA;UAAA;EACA;ADON;ACHE;;EAGI;EACA;EACA;EACA;ADIN;ACAE;EAMI;EACA,WA/GiB;EAgHjB;EACA;ADHN;ACOE;EAGI;EACA;EACA;EACA;EACA;EE7GF;EAAc;EF+GZ;EE/GF;EAAc;EFiHZ;ADLN;AKvFM;EACE;EFtBJ;EAAc;EFqHV;EErHJ;EAAc;EFuHV;EI/FA;AL8FR;;ACME;EAMI;EACA,WAjJmB;EAkJnB;EACA;ADRN;ACAI;EKlJA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ANqJJ;AMtGI;EL0FA;IKnIE;ENmJJ;AACF;AOjIE;ELNI;ECZF;EDwBA;AFgIJ;AOtIE;ELNI;ECZF;EDwBA;AFqIJ;AOpGE;EL7CI;ECZF;EDwBA;EKqCE,aA3EmB;APiLzB;AO1GE;EL7CI;ECZF;EDwBA;EKqCE,aA3EmB;APuLzB;ACqGE;EAEI;EE3QF;EAAc;EDOZ;ECZF;EAKA;EAAc;EDmBd;EDgQE;EACA;EEpRF;EAAc;EDmBd;EAZE;UAAA;ECZF;EDwBA;UAAA;AFmKJ;AC4GE;EAEI;EAAA;EAAA;EAIA;EACA;EACA;EACA;EACA;EACA;UAAA;EACA;UAAA;AD9GN;ACkHI;EAEI;EACA;EACA;EACA;EACA;EACA;EEzTJ;EAAc;EDOZ;ECZF;EAKA;EAAc;EDmBd;ED6SI;EEhUJ;EAAc;EDmBd;EAZE;UAAA;ECZF;EDwBA;UAAA;EDwTI;ADpHR;ACwHI;EKpWA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AN+OJ;AMhMI;EL4SA;IKrVE;EN6OJ;AACF;AC6GI;EAEI;AD5GR;ACgHI;EAEI;EAAA;EAAA;EAIA;UAAA;ADlHR;ACuHE;EACE;;IAGI;EDtHN;AACF;AC0HE;EOlGE;EACA;ENvQE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;UAAA;EAZE;ECZF;EDwBA;AF2PJ;AO9CE;EL7ME;EKiNE,YA3PoB;APyS1B;AOzCE;ELtNE;AFkQJ;AO7BE;ELjPI;ECZF;EDwBA;AFuQJ;AC3HE;EAEI;EACA,YAtLe;EEoBjB;EAAc;EFoKZ;EACA;EACA;EACA;KAAA;MAAA;UAAA;EACA,WA5Le;ADyTrB;AC1HI;EAEI;AD2HR;ACvHI;EAII;EACA;EACA;ADsHR;ACjHE;EQgDI;EACA,yHAqGS;ERjJT;EACA;EACA;EACA,YAvNQ;EEmBV;EAAc;EFsMZ;EACA;EACA;EACA;UAAA;EACA,WA7NQ;AD+Ud;AOtOI;EL/EE;ECZF;EDwBA;EAZE;ECZF;EDwBA;AFiTJ;AOxOM;EAGE;APwOR;AOjPI;EL/EE;ECZF;EDwBA;EAZE;ECZF;EDwBA;AF4TJ;AOnPM;EAGE;APmPR;AInPI;EFxFE;ECZF;EDwBA;AFoUJ;AIiJE;EFjeI;ECZF;EDwBA;AFyUJ;AI4IE;EA9QI;EFnNA;ECZF;EDwBA;AF+UJ;AI9GM;EAEI;AJ+GV;AI1GQ;EAEI,yBAhRO;EF0Bb;ECZF;EDwBA;AFwVJ;AInGI;EFrPA;AF2VJ;AC/IE;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ADgJN;AC5IE;;EAGI;EACA;EACA;AD6IN;AOjOE;ELtJI;ECZF;EDwBA;EK8IE,YAjLc;APoZpB;AOvOE;ELtJI;ECZF;EDwBA;EK8IE,YAjLc;AP0ZpB;AOhME;ELnMI;ECZF;EDwBA;EK2LE,YA9Nc;APgapB;AOtME;ELnMI;ECZF;EDwBA;EK2LE,YA9Nc;APsapB;ACtYM;;EAGI;EAAA;EAAA;ADuYV;ACnYM;EACE;;IAGI;EDoYV;AACF;;AC9XE;EAkWE;EAIA;AD6BJ;AC1BE;EAEI;AD2BN;;AClYE;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ADoYN,C","file":"mdc.slider.css","sourcesContent":["//\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:math';\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/theme/custom-properties';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/rtl/rtl';\n@use '@material/theme/theme';\n@use './ripple-theme';\n\n@mixin core-styles($query: feature-targeting.all()) {\n @include static-styles($query: $query);\n\n .mdc-ripple-surface {\n @include ripple-theme.states($query: $query);\n }\n}\n\n@mixin static-styles($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-ripple-surface {\n @include surface($query: $query);\n @include radius-bounded($query: $query);\n @include surface-styles($query: $query);\n }\n\n .mdc-ripple-surface[data-mdc-ripple-is-unbounded],\n .mdc-ripple-upgraded--unbounded {\n @include radius-unbounded($query: $query);\n @include unbounded-styles($query: $query);\n }\n}\n\n/// Sets all states (including hover, focus, press, activated and selected) with\n/// given color as base color.\n///\n/// This mixin is for internal use only. Use `ripple-theme.states($color)` mixin\n/// to set interactive states (hover, focus & press) color.\n///\n/// @param {Color|String} $color - Target base color. Can be valid CSS color or\n/// a color string literal (i.e., `primary`, `secondary`, etc).\n@mixin states-for-color($color, $query: feature-targeting.all()) {\n @include ripple-theme.states($color, $query: $query);\n @include ripple-theme.states-activated($color, $query: $query);\n @include ripple-theme.states-selected($color, $query: $query);\n}\n\n@mixin surface-styles($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n position: relative;\n outline: none;\n overflow: hidden;\n }\n}\n\n@mixin unbounded-styles($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n @include feature-targeting.targets($feat-structure) {\n overflow: visible;\n }\n}\n\n@mixin common($query: feature-targeting.all()) {\n $feat-animation: feature-targeting.create-target($query, animation);\n\n // Ensure that styles needed by any component using MDC Ripple are emitted, but only once.\n // (Every component using MDC Ripple imports these mixins, but doesn't necessarily import\n // mdc-ripple.scss.)\n @include feature-targeting.targets($feat-animation) {\n @include base-mixins.emit-once('mdc-ripple/common/animation') {\n @include keyframes_;\n }\n }\n}\n\n@mixin surface(\n $query: feature-targeting.all(),\n $ripple-target: '&',\n $include-will-change: true // TODO(b/151931961): Remove once resolved\n) {\n $feat-animation: feature-targeting.create-target($query, animation);\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n --mdc-ripple-fg-size: 0;\n --mdc-ripple-left: 0;\n --mdc-ripple-top: 0;\n --mdc-ripple-fg-scale: 1;\n --mdc-ripple-fg-translate-end: 0;\n --mdc-ripple-fg-translate-start: 0;\n\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n // TODO(b/151931961): Remove the following block once resolved\n @if $include-will-change {\n will-change: transform, opacity;\n }\n }\n\n #{$ripple-target}::before,\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-structure) {\n position: absolute;\n border-radius: 50%;\n opacity: 0;\n pointer-events: none;\n content: '';\n }\n }\n\n #{$ripple-target}::before {\n @include feature-targeting.targets($feat-animation) {\n // Also transition background-color to avoid unnatural color flashes when toggling activated/selected state\n transition: opacity ripple-theme.$states-wash-duration linear,\n background-color ripple-theme.$states-wash-duration linear;\n }\n\n @include feature-targeting.targets($feat-structure) {\n // Ensure that the ripple wash for hover/focus states is displayed on top of positioned child elements\n @include theme.property(\n z-index,\n custom-properties.create(--mdc-ripple-z-index, 1)\n );\n }\n }\n\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, 0)\n );\n }\n }\n\n // Common styles for upgraded surfaces (some of these depend on custom properties set via JS or other mixins)\n\n &.mdc-ripple-upgraded {\n #{$ripple-target}::before {\n @include feature-targeting.targets($feat-structure) {\n transform: scale(var(--mdc-ripple-fg-scale, 1));\n }\n }\n\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-structure) {\n top: 0;\n @include rtl.ignore-next-line();\n left: 0;\n transform: scale(0);\n transform-origin: center center;\n }\n }\n }\n\n &.mdc-ripple-upgraded--unbounded {\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-structure) {\n top: var(--mdc-ripple-top, 0);\n @include rtl.ignore-next-line();\n left: var(--mdc-ripple-left, 0);\n }\n }\n }\n\n &.mdc-ripple-upgraded--foreground-activation {\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-animation) {\n animation: mdc-ripple-fg-radius-in ripple-theme.$translate-duration\n forwards,\n mdc-ripple-fg-opacity-in ripple-theme.$fade-in-duration forwards;\n }\n }\n }\n\n &.mdc-ripple-upgraded--foreground-deactivation {\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-animation) {\n animation: mdc-ripple-fg-opacity-out ripple-theme.$fade-out-duration;\n }\n\n @include feature-targeting.targets($feat-structure) {\n // Retain transform from mdc-ripple-fg-radius-in activation\n transform: translate(var(--mdc-ripple-fg-translate-end, 0))\n scale(var(--mdc-ripple-fg-scale, 1));\n }\n }\n }\n}\n\n@mixin radius-bounded(\n $radius: 100%,\n $query: feature-targeting.all(),\n $ripple-target: '&'\n) {\n $feat-struture: feature-targeting.create-target($query, structure);\n\n #{$ripple-target}::before,\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-struture) {\n top: calc(50% - #{$radius});\n @include rtl.ignore-next-line();\n left: calc(50% - #{$radius});\n width: $radius * 2;\n height: $radius * 2;\n }\n }\n\n &.mdc-ripple-upgraded {\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-struture) {\n width: var(--mdc-ripple-fg-size, $radius);\n height: var(--mdc-ripple-fg-size, $radius);\n }\n }\n }\n}\n\n@mixin radius-unbounded(\n $radius: 100%,\n $query: feature-targeting.all(),\n $ripple-target: '&'\n) {\n $feat-struture: feature-targeting.create-target($query, structure);\n\n #{$ripple-target}::before,\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-struture) {\n top: calc(50% - #{math.div($radius, 2)});\n @include rtl.ignore-next-line();\n left: calc(50% - #{math.div($radius, 2)});\n width: $radius;\n height: $radius;\n }\n }\n\n &.mdc-ripple-upgraded {\n #{$ripple-target}::before,\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-struture) {\n top: var(--mdc-ripple-top, calc(50% - #{math.div($radius, 2)}));\n @include rtl.ignore-next-line();\n left: var(--mdc-ripple-left, calc(50% - #{math.div($radius, 2)}));\n width: var(--mdc-ripple-fg-size, $radius);\n height: var(--mdc-ripple-fg-size, $radius);\n }\n }\n\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-struture) {\n width: var(--mdc-ripple-fg-size, $radius);\n height: var(--mdc-ripple-fg-size, $radius);\n }\n }\n }\n}\n\n// Common styles for a ripple target element.\n// Used for components which have an inner ripple target element.\n@mixin target-common($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n // Necessary for clicks on other inner elements (e.g. close icon in chip)\n // to go through.\n pointer-events: none;\n }\n}\n\n@mixin keyframes_ {\n @keyframes mdc-ripple-fg-radius-in {\n from {\n animation-timing-function: variables2.$standard-curve-timing-function;\n // NOTE: For these keyframes, we do not need custom property fallbacks because they are only\n // used in conjunction with `.mdc-ripple-upgraded`. Since MDCRippleFoundation checks to ensure\n // that custom properties are supported within the browser before adding this class, we can\n // safely use them without a fallback.\n transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);\n }\n\n to {\n transform: translate(var(--mdc-ripple-fg-translate-end, 0))\n scale(var(--mdc-ripple-fg-scale, 1));\n }\n }\n\n @keyframes mdc-ripple-fg-opacity-in {\n from {\n animation-timing-function: linear;\n opacity: 0;\n }\n\n to {\n opacity: var(--mdc-ripple-fg-opacity, 0);\n }\n }\n\n @keyframes mdc-ripple-fg-opacity-out {\n from {\n animation-timing-function: linear;\n opacity: var(--mdc-ripple-fg-opacity, 0);\n }\n\n to {\n opacity: 0;\n }\n }\n}\n","//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n$deceleration-curve-timing-function: cubic-bezier(0, 0, 0.2, 1) !default;\n$standard-curve-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default;\n$acceleration-curve-timing-function: cubic-bezier(0.4, 0, 1, 1) !default;\n$sharp-curve-timing-function: cubic-bezier(0.4, 0, 0.6, 1) !default;\n\n@function enter($name, $duration, $delay: 0ms) {\n @return $name $duration $delay $deceleration-curve-timing-function;\n}\n\n@function exit-permanent($name, $duration, $delay: 0ms) {\n @return $name $duration $delay $acceleration-curve-timing-function;\n}\n\n@function exit-temporary($name, $duration, $delay: 0ms) {\n @return $name $duration $delay $sharp-curve-timing-function;\n}\n\n@function standard($name, $duration, $delay: 0ms) {\n @return $name $duration $delay $standard-curve-timing-function;\n}\n\n@function linear($name, $duration, $delay: 0ms) {\n @return $name $duration $delay linear;\n}\n","@keyframes mdc-ripple-fg-radius-in {\n from {\n animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);\n }\n to {\n transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));\n }\n}\n@keyframes mdc-ripple-fg-opacity-in {\n from {\n animation-timing-function: linear;\n opacity: 0;\n }\n to {\n opacity: var(--mdc-ripple-fg-opacity, 0);\n }\n}\n@keyframes mdc-ripple-fg-opacity-out {\n from {\n animation-timing-function: linear;\n opacity: var(--mdc-ripple-fg-opacity, 0);\n }\n to {\n opacity: 0;\n }\n}\n.mdc-slider__thumb {\n --mdc-ripple-fg-size: 0;\n --mdc-ripple-left: 0;\n --mdc-ripple-top: 0;\n --mdc-ripple-fg-scale: 1;\n --mdc-ripple-fg-translate-end: 0;\n --mdc-ripple-fg-translate-start: 0;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n will-change: transform, opacity;\n}\n.mdc-slider__thumb::before, .mdc-slider__thumb::after {\n position: absolute;\n border-radius: 50%;\n opacity: 0;\n pointer-events: none;\n content: \"\";\n}\n.mdc-slider__thumb::before {\n transition: opacity 15ms linear, background-color 15ms linear;\n z-index: 1;\n /* @alternate */\n z-index: var(--mdc-ripple-z-index, 1);\n}\n.mdc-slider__thumb::after {\n z-index: 0;\n /* @alternate */\n z-index: var(--mdc-ripple-z-index, 0);\n}\n.mdc-slider__thumb.mdc-ripple-upgraded::before {\n transform: scale(var(--mdc-ripple-fg-scale, 1));\n}\n.mdc-slider__thumb.mdc-ripple-upgraded::after {\n top: 0;\n /* @noflip */\n /*rtl:ignore*/\n left: 0;\n transform: scale(0);\n transform-origin: center center;\n}\n.mdc-slider__thumb.mdc-ripple-upgraded--unbounded::after {\n top: var(--mdc-ripple-top, 0);\n /* @noflip */\n /*rtl:ignore*/\n left: var(--mdc-ripple-left, 0);\n}\n.mdc-slider__thumb.mdc-ripple-upgraded--foreground-activation::after {\n animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;\n}\n.mdc-slider__thumb.mdc-ripple-upgraded--foreground-deactivation::after {\n animation: mdc-ripple-fg-opacity-out 150ms;\n transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));\n}\n.mdc-slider__thumb::before, .mdc-slider__thumb::after {\n top: calc(50% - 50%);\n /* @noflip */\n /*rtl:ignore*/\n left: calc(50% - 50%);\n width: 100%;\n height: 100%;\n}\n.mdc-slider__thumb.mdc-ripple-upgraded::before, .mdc-slider__thumb.mdc-ripple-upgraded::after {\n top: var(--mdc-ripple-top, calc(50% - 50%));\n /* @noflip */\n /*rtl:ignore*/\n left: var(--mdc-ripple-left, calc(50% - 50%));\n width: var(--mdc-ripple-fg-size, 100%);\n height: var(--mdc-ripple-fg-size, 100%);\n}\n.mdc-slider__thumb.mdc-ripple-upgraded::after {\n width: var(--mdc-ripple-fg-size, 100%);\n height: var(--mdc-ripple-fg-size, 100%);\n}\n.mdc-slider__thumb::before, .mdc-slider__thumb::after {\n background-color: #6200ee;\n /* @alternate */\n background-color: var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee));\n}\n.mdc-slider__thumb:hover::before, .mdc-slider__thumb.mdc-ripple-surface--hover::before {\n opacity: 0.04;\n /* @alternate */\n opacity: var(--mdc-ripple-hover-opacity, 0.04);\n}\n.mdc-slider__thumb.mdc-ripple-upgraded--background-focused::before, .mdc-slider__thumb:not(.mdc-ripple-upgraded):focus::before {\n transition-duration: 75ms;\n opacity: 0.12;\n /* @alternate */\n opacity: var(--mdc-ripple-focus-opacity, 0.12);\n}\n.mdc-slider__thumb:not(.mdc-ripple-upgraded)::after {\n transition: opacity 150ms linear;\n}\n.mdc-slider__thumb:not(.mdc-ripple-upgraded):active::after {\n transition-duration: 75ms;\n opacity: 0.12;\n /* @alternate */\n opacity: var(--mdc-ripple-press-opacity, 0.12);\n}\n.mdc-slider__thumb.mdc-ripple-upgraded {\n --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12);\n}\n\n.mdc-slider {\n cursor: pointer;\n height: 48px;\n margin: 0 24px;\n position: relative;\n touch-action: pan-y;\n}\n.mdc-slider .mdc-slider__track {\n height: 4px;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n width: 100%;\n}\n.mdc-slider .mdc-slider__track--active,\n.mdc-slider .mdc-slider__track--inactive {\n display: flex;\n height: 100%;\n position: absolute;\n width: 100%;\n}\n.mdc-slider .mdc-slider__track--active {\n border-radius: 3px;\n height: 6px;\n overflow: hidden;\n top: -1px;\n}\n.mdc-slider .mdc-slider__track--active_fill {\n border-top: 6px solid;\n box-sizing: border-box;\n height: 100%;\n width: 100%;\n position: relative;\n /* @noflip */\n /*rtl:ignore*/\n -webkit-transform-origin: left;\n /* @noflip */\n /*rtl:ignore*/\n transform-origin: left;\n}\n[dir=rtl] .mdc-slider .mdc-slider__track--active_fill, .mdc-slider .mdc-slider__track--active_fill[dir=rtl] {\n /*rtl:begin:ignore*/\n /* @noflip */\n /*rtl:ignore*/\n -webkit-transform-origin: right;\n /* @noflip */\n /*rtl:ignore*/\n transform-origin: right;\n /*rtl:end:ignore*/\n}\n\n.mdc-slider .mdc-slider__track--inactive {\n border-radius: 2px;\n height: 4px;\n left: 0;\n top: 0;\n}\n.mdc-slider .mdc-slider__track--inactive::before {\n position: absolute;\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n border: 1px solid transparent;\n border-radius: inherit;\n content: \"\";\n pointer-events: none;\n}\n@media screen and (forced-colors: active) {\n .mdc-slider .mdc-slider__track--inactive::before {\n border-color: CanvasText;\n }\n}\n.mdc-slider .mdc-slider__track--active_fill {\n border-color: #6200ee;\n /* @alternate */\n border-color: var(--mdc-theme-primary, #6200ee);\n}\n.mdc-slider.mdc-slider--disabled .mdc-slider__track--active_fill {\n border-color: #000;\n /* @alternate */\n border-color: var(--mdc-theme-on-surface, #000);\n}\n.mdc-slider .mdc-slider__track--inactive {\n background-color: #6200ee;\n /* @alternate */\n background-color: var(--mdc-theme-primary, #6200ee);\n opacity: 0.24;\n}\n.mdc-slider.mdc-slider--disabled .mdc-slider__track--inactive {\n background-color: #000;\n /* @alternate */\n background-color: var(--mdc-theme-on-surface, #000);\n opacity: 0.24;\n}\n.mdc-slider .mdc-slider__value-indicator-container {\n bottom: 44px;\n /* @noflip */\n /*rtl:ignore*/\n left: 50%;\n /* @alternate */\n /* @noflip */\n /*rtl:ignore*/\n left: var(--slider-value-indicator-container-left, 50%);\n pointer-events: none;\n position: absolute;\n /* @noflip */\n /*rtl:ignore*/\n right: var(--slider-value-indicator-container-right);\n transform: translateX(-50%);\n /* @alternate */\n transform: var(--slider-value-indicator-container-transform, translateX(-50%));\n}\n.mdc-slider .mdc-slider__value-indicator {\n transition: transform 100ms 0ms cubic-bezier(0.4, 0, 1, 1);\n align-items: center;\n border-radius: 4px;\n display: flex;\n height: 32px;\n padding: 0 12px;\n transform: scale(0);\n transform-origin: bottom;\n}\n.mdc-slider .mdc-slider__value-indicator::before {\n border-left: 6px solid transparent;\n border-right: 6px solid transparent;\n border-top: 6px solid;\n bottom: -5px;\n content: \"\";\n height: 0;\n /* @noflip */\n /*rtl:ignore*/\n left: 50%;\n /* @alternate */\n /* @noflip */\n /*rtl:ignore*/\n left: var(--slider-value-indicator-caret-left, 50%);\n position: absolute;\n /* @noflip */\n /*rtl:ignore*/\n right: var(--slider-value-indicator-caret-right);\n transform: translateX(-50%);\n /* @alternate */\n transform: var(--slider-value-indicator-caret-transform, translateX(-50%));\n width: 0;\n}\n.mdc-slider .mdc-slider__value-indicator::after {\n position: absolute;\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n border: 1px solid transparent;\n border-radius: inherit;\n content: \"\";\n pointer-events: none;\n}\n@media screen and (forced-colors: active) {\n .mdc-slider .mdc-slider__value-indicator::after {\n border-color: CanvasText;\n }\n}\n.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator-container {\n pointer-events: auto;\n}\n.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator {\n transition: transform 100ms 0ms cubic-bezier(0, 0, 0.2, 1);\n transform: scale(1);\n}\n@media (prefers-reduced-motion) {\n .mdc-slider .mdc-slider__value-indicator,\n.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator {\n transition: none;\n }\n}\n.mdc-slider .mdc-slider__value-indicator-text {\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-subtitle2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));\n font-size: 0.875rem;\n /* @alternate */\n font-size: var(--mdc-typography-subtitle2-font-size, 0.875rem);\n line-height: 1.375rem;\n /* @alternate */\n line-height: var(--mdc-typography-subtitle2-line-height, 1.375rem);\n font-weight: 500;\n /* @alternate */\n font-weight: var(--mdc-typography-subtitle2-font-weight, 500);\n letter-spacing: 0.0071428571em;\n /* @alternate */\n letter-spacing: var(--mdc-typography-subtitle2-letter-spacing, 0.0071428571em);\n text-decoration: inherit;\n /* @alternate */\n text-decoration: var(--mdc-typography-subtitle2-text-decoration, inherit);\n text-transform: inherit;\n /* @alternate */\n text-transform: var(--mdc-typography-subtitle2-text-transform, inherit);\n}\n.mdc-slider .mdc-slider__value-indicator {\n background-color: #000;\n opacity: 0.6;\n}\n.mdc-slider .mdc-slider__value-indicator::before {\n border-top-color: #000;\n}\n.mdc-slider .mdc-slider__value-indicator {\n color: #fff;\n /* @alternate */\n color: var(--mdc-theme-on-primary, #fff);\n}\n.mdc-slider .mdc-slider__thumb {\n display: flex;\n height: 48px;\n /* @noflip */\n /*rtl:ignore*/\n left: -24px;\n outline: none;\n position: absolute;\n user-select: none;\n width: 48px;\n}\n.mdc-slider .mdc-slider__thumb--top {\n z-index: 1;\n}\n.mdc-slider .mdc-slider__thumb--top .mdc-slider__thumb-knob, .mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob, .mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob {\n border-style: solid;\n border-width: 1px;\n box-sizing: content-box;\n}\n.mdc-slider .mdc-slider__thumb-knob {\n /* @alternate */\n box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);\n border: 10px solid;\n border-radius: 50%;\n box-sizing: border-box;\n height: 20px;\n /* @noflip */\n /*rtl:ignore*/\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: 20px;\n}\n.mdc-slider .mdc-slider__thumb-knob {\n background-color: #6200ee;\n /* @alternate */\n background-color: var(--mdc-theme-primary, #6200ee);\n border-color: #6200ee;\n /* @alternate */\n border-color: var(--mdc-theme-primary, #6200ee);\n}\n.mdc-slider .mdc-slider__thumb--top .mdc-slider__thumb-knob, .mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob, .mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob {\n border-color: #fff;\n}\n.mdc-slider.mdc-slider--disabled .mdc-slider__thumb-knob {\n background-color: #000;\n /* @alternate */\n background-color: var(--mdc-theme-on-surface, #000);\n border-color: #000;\n /* @alternate */\n border-color: var(--mdc-theme-on-surface, #000);\n}\n.mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top .mdc-slider__thumb-knob, .mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob, .mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob {\n border-color: #fff;\n}\n.mdc-slider .mdc-slider__thumb::before, .mdc-slider .mdc-slider__thumb::after {\n background-color: #6200ee;\n /* @alternate */\n background-color: var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee));\n}\n.mdc-slider .mdc-slider__thumb:hover::before, .mdc-slider .mdc-slider__thumb.mdc-ripple-surface--hover::before {\n opacity: 0.04;\n /* @alternate */\n opacity: var(--mdc-ripple-hover-opacity, 0.04);\n}\n.mdc-slider .mdc-slider__thumb.mdc-ripple-upgraded--background-focused::before, .mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded):focus::before {\n transition-duration: 75ms;\n opacity: 0.12;\n /* @alternate */\n opacity: var(--mdc-ripple-focus-opacity, 0.12);\n}\n.mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded)::after {\n transition: opacity 150ms linear;\n}\n.mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded):active::after {\n transition-duration: 75ms;\n opacity: 0.12;\n /* @alternate */\n opacity: var(--mdc-ripple-press-opacity, 0.12);\n}\n.mdc-slider .mdc-slider__thumb.mdc-ripple-upgraded {\n --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12);\n}\n.mdc-slider .mdc-slider__tick-marks {\n align-items: center;\n box-sizing: border-box;\n display: flex;\n height: 100%;\n justify-content: space-between;\n padding: 0 1px;\n position: absolute;\n width: 100%;\n}\n.mdc-slider .mdc-slider__tick-mark--active,\n.mdc-slider .mdc-slider__tick-mark--inactive {\n border-radius: 50%;\n height: 2px;\n width: 2px;\n}\n.mdc-slider .mdc-slider__tick-mark--active {\n background-color: #fff;\n /* @alternate */\n background-color: var(--mdc-theme-on-primary, #fff);\n opacity: 0.6;\n}\n.mdc-slider.mdc-slider--disabled .mdc-slider__tick-mark--active {\n background-color: #fff;\n /* @alternate */\n background-color: var(--mdc-theme-on-primary, #fff);\n opacity: 0.6;\n}\n.mdc-slider .mdc-slider__tick-mark--inactive {\n background-color: #6200ee;\n /* @alternate */\n background-color: var(--mdc-theme-primary, #6200ee);\n opacity: 0.6;\n}\n.mdc-slider.mdc-slider--disabled .mdc-slider__tick-mark--inactive {\n background-color: #000;\n /* @alternate */\n background-color: var(--mdc-theme-on-surface, #000);\n opacity: 0.6;\n}\n.mdc-slider--discrete .mdc-slider__thumb,\n.mdc-slider--discrete .mdc-slider__track--active_fill {\n transition: transform 80ms ease;\n}\n@media (prefers-reduced-motion) {\n .mdc-slider--discrete .mdc-slider__thumb,\n.mdc-slider--discrete .mdc-slider__track--active_fill {\n transition: none;\n }\n}\n\n.mdc-slider--disabled {\n opacity: 0.38;\n cursor: auto;\n}\n.mdc-slider--disabled .mdc-slider__thumb {\n pointer-events: none;\n}\n\n.mdc-slider__input {\n cursor: pointer;\n left: 0;\n margin: 0;\n height: 100%;\n opacity: 0;\n pointer-events: none;\n position: absolute;\n top: 0;\n width: 100%;\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// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:math';\n@use '@material/animation/animation';\n@use '@material/dom/mixins' as dom-mixins;\n@use '@material/elevation/mixins' as elevation-mixins;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/ripple/ripple';\n@use '@material/ripple/ripple-theme';\n@use '@material/rtl/rtl';\n@use '@material/theme/css';\n@use '@material/theme/theme-color';\n@use '@material/typography/typography';\n@use './slider-theme';\n\n// Thumb variables.\n$_thumb-ripple-size: 48px;\n$_thumb-size: 20px;\n$_value-indicator-caret-width: 6px;\n\n// Track variables.\n$_track-active-height: 6px;\n$_track-inactive-height: 4px;\n\n/// Core styles for slider component.\n@mixin core-styles($query: feature-targeting.all()) {\n @include ripple($query: $query);\n @include without-ripple($query: $query);\n}\n\n// This API is intended for use by frameworks that may want to separate the\n// ripple-related styles from the other slider styles.\n// It is recommended that most users use `core-styles` instead.\n@mixin without-ripple($query: feature-targeting.all()) {\n $feat-animation: feature-targeting.create-target($query, animation);\n $feat-color: feature-targeting.create-target($query, color);\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-slider {\n @include _track($query: $query);\n @include _thumb($query: $query);\n @include _tick-marks($query: $query);\n\n @include feature-targeting.targets($feat-structure) {\n cursor: pointer;\n height: $_thumb-ripple-size;\n margin: 0 math.div($_thumb-ripple-size, 2);\n position: relative;\n touch-action: pan-y;\n }\n\n &--discrete {\n .mdc-slider__thumb,\n .mdc-slider__track--active_fill {\n @include feature-targeting.targets($feat-animation) {\n transition: transform 80ms ease;\n }\n }\n\n @media (prefers-reduced-motion) {\n .mdc-slider__thumb,\n .mdc-slider__track--active_fill {\n @include feature-targeting.targets($feat-animation) {\n transition: none;\n }\n }\n }\n }\n }\n\n .mdc-slider--disabled {\n @include _disabled($query: $query);\n }\n\n .mdc-slider__input {\n @include feature-targeting.targets($feat-structure) {\n cursor: pointer;\n left: 0;\n margin: 0;\n height: 100%;\n opacity: 0;\n pointer-events: none;\n position: absolute;\n top: 0;\n width: 100%;\n }\n }\n}\n\n// This API is intended for use by frameworks that may want to separate the\n// ripple-related styles from the other slider styles.\n// It is recommended that most users use `core-styles` instead.\n@mixin ripple($query: feature-targeting.all()) {\n @include ripple.common($query); // COPYBARA_COMMENT_THIS_LINE\n\n .mdc-slider__thumb {\n @include ripple.surface($query: $query);\n @include ripple.radius-unbounded($query: $query);\n @include ripple-theme.states($color: slider-theme.$color, $query: $query);\n }\n}\n\n@mixin _track($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-slider__track {\n @include feature-targeting.targets($feat-structure) {\n height: $_track-inactive-height;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n width: 100%;\n }\n }\n\n .mdc-slider__track--active,\n .mdc-slider__track--inactive {\n @include feature-targeting.targets($feat-structure) {\n display: flex;\n height: 100%;\n position: absolute;\n width: 100%;\n }\n }\n\n .mdc-slider__track--active {\n @include feature-targeting.targets($feat-structure) {\n // Set border-radius on the outer `track--active` element, and apply\n // transform: scale(...) to the inner `track--active_fill` element,\n // such that the track grows/shrinks as needed, but the border-radius\n // is not affected by the scaling.\n border-radius: 3px;\n height: $_track-active-height;\n overflow: hidden;\n top: math.div($_track-inactive-height - $_track-active-height, 2);\n }\n }\n\n .mdc-slider__track--active_fill {\n @include feature-targeting.targets($feat-structure) {\n // Use border rather than background-color to fill track, for HCM.\n border-top: $_track-active-height solid;\n box-sizing: border-box;\n height: 100%;\n width: 100%;\n position: relative;\n @include rtl.ignore-next-line();\n -webkit-transform-origin: left;\n @include rtl.ignore-next-line();\n transform-origin: left;\n\n @include rtl.rtl {\n @include rtl.ignore-next-line();\n -webkit-transform-origin: right;\n @include rtl.ignore-next-line();\n transform-origin: right;\n }\n }\n }\n\n .mdc-slider__track--inactive {\n &::before {\n @include dom-mixins.transparent-border($query: $query); // For HCM.\n }\n\n @include feature-targeting.targets($feat-structure) {\n border-radius: 2px;\n height: $_track-inactive-height;\n left: 0;\n top: 0;\n }\n }\n\n @include slider-theme.track-active-color(\n $color-or-map: (\n default: slider-theme.$color,\n disabled: slider-theme.$disabled-color,\n ),\n $query: $query\n );\n @include slider-theme.track-inactive-color(\n $color-or-map: (\n default: slider-theme.$color,\n disabled: slider-theme.$disabled-color,\n ),\n $query: $query\n );\n}\n\n@mixin _thumb($query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include _value-indicator($query: $query);\n\n .mdc-slider__thumb {\n @include feature-targeting.targets($feat-structure) {\n display: flex;\n height: $_thumb-ripple-size;\n @include rtl.ignore-next-line();\n left: math.div(-$_thumb-ripple-size, 2);\n outline: none;\n position: absolute;\n user-select: none;\n width: $_thumb-ripple-size;\n }\n\n &--top {\n @include feature-targeting.targets($feat-structure) {\n z-index: 1;\n }\n }\n\n &--top .mdc-slider__thumb-knob,\n &--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,\n &--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob {\n @include feature-targeting.targets($feat-structure) {\n border-style: solid;\n border-width: 1px;\n box-sizing: content-box;\n }\n }\n }\n\n .mdc-slider__thumb-knob {\n @include elevation-mixins.elevation($z-value: 1, $query: $query);\n\n @include feature-targeting.targets($feat-structure) {\n // Use border rather than background-color to fill thumb, for HCM.\n border: math.div($_thumb-size, 2) solid;\n border-radius: 50%;\n box-sizing: border-box;\n height: $_thumb-size;\n @include rtl.ignore-next-line();\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: $_thumb-size;\n }\n }\n\n @include slider-theme.thumb-color(\n $color-or-map: (\n default: slider-theme.$color,\n disabled: slider-theme.$disabled-color,\n ),\n $query: $query\n );\n @include slider-theme.thumb-ripple-color(\n $color: slider-theme.$color,\n $query: $query\n );\n}\n\n@mixin _tick-marks($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n $feat-color: feature-targeting.create-target($query, color);\n\n .mdc-slider__tick-marks {\n @include feature-targeting.targets($feat-structure) {\n align-items: center;\n box-sizing: border-box;\n display: flex;\n height: 100%;\n justify-content: space-between;\n padding: 0 1px;\n position: absolute;\n width: 100%;\n }\n }\n\n .mdc-slider__tick-mark--active,\n .mdc-slider__tick-mark--inactive {\n @include feature-targeting.targets($feat-structure) {\n border-radius: 50%;\n height: 2px;\n width: 2px;\n }\n }\n\n @include slider-theme.tick-mark-active-color(\n $color-or-map: (\n default: slider-theme.$tick-mark-active-color,\n disabled: on-primary,\n ),\n $query: $query\n );\n @include slider-theme.tick-mark-inactive-color(\n $color-or-map: (\n default: slider-theme.$tick-mark-inactive-color,\n disabled: slider-theme.$disabled-color,\n ),\n $query: $query\n );\n}\n\n@mixin _value-indicator($query: feature-targeting.all()) {\n $feat-animation: feature-targeting.create-target($query, animation);\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-slider__value-indicator-container {\n @include feature-targeting.targets($feat-structure) {\n bottom: math.div($_thumb-ripple-size, 2) + math.div($_thumb-size, 2) +\n $_value-indicator-caret-width + 4px;\n @include css.declaration(\n left,\n var(--slider-value-indicator-container-left, 50%),\n 50%,\n $gss: (noflip: true)\n );\n pointer-events: none;\n position: absolute;\n @include css.declaration(\n right,\n var(--slider-value-indicator-container-right),\n $gss: (noflip: true)\n );\n @include css.declaration(\n transform,\n var(--slider-value-indicator-container-transform, translateX(-50%)),\n translateX(-50%)\n );\n }\n }\n\n .mdc-slider__value-indicator {\n @include feature-targeting.targets($feat-animation) {\n transition: animation.exit-permanent(transform, 100ms);\n }\n\n @include feature-targeting.targets($feat-structure) {\n align-items: center;\n border-radius: 4px;\n display: flex;\n height: 32px;\n padding: 0 12px;\n transform: scale(0);\n transform-origin: bottom;\n }\n\n // Caret: https://css-tricks.com/snippets/css/css-triangle/\n &::before {\n @include feature-targeting.targets($feat-structure) {\n border-left: $_value-indicator-caret-width solid transparent;\n border-right: $_value-indicator-caret-width solid transparent;\n border-top: $_value-indicator-caret-width solid;\n bottom: -$_value-indicator-caret-width + 1;\n content: '';\n height: 0;\n @include css.declaration(\n left,\n var(--slider-value-indicator-caret-left, 50%),\n 50%,\n $gss: (noflip: true)\n );\n position: absolute;\n @include css.declaration(\n right,\n var(--slider-value-indicator-caret-right),\n $gss: (noflip: true)\n );\n @include css.declaration(\n transform,\n var(--slider-value-indicator-caret-transform, translateX(-50%)),\n translateX(-50%)\n );\n width: 0;\n }\n }\n\n &::after {\n @include dom-mixins.transparent-border($query: $query); // For HCM.\n }\n }\n\n .mdc-slider__thumb--with-indicator {\n .mdc-slider__value-indicator-container {\n @include feature-targeting.targets($feat-structure) {\n pointer-events: auto;\n }\n }\n\n .mdc-slider__value-indicator {\n @include feature-targeting.targets($feat-animation) {\n transition: animation.enter(transform, 100ms);\n }\n\n @include feature-targeting.targets($feat-structure) {\n transform: scale(1);\n }\n }\n }\n\n @media (prefers-reduced-motion) {\n .mdc-slider__value-indicator,\n .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator {\n @include feature-targeting.targets($feat-animation) {\n transition: none;\n }\n }\n }\n\n .mdc-slider__value-indicator-text {\n @include typography.typography(subtitle2, $query);\n }\n\n @include slider-theme.value-indicator-color(\n $color: slider-theme.$value-indicator-color,\n $opacity: slider-theme.$value-indicator-opacity,\n $query: $query\n );\n @include slider-theme.value-indicator-text-color(\n $color: slider-theme.$value-indicator-text-color,\n $query: $query\n );\n}\n\n// Styles for slider in disabled state.\n@mixin _disabled($query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-color) {\n opacity: 0.38;\n }\n\n @include feature-targeting.targets($feat-structure) {\n cursor: auto;\n }\n\n .mdc-slider__thumb {\n @include feature-targeting.targets($feat-structure) {\n pointer-events: none;\n }\n }\n}\n","//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use 'sass:list';\n@use 'sass:map';\n@use 'sass:meta';\n@use './gss';\n\n/// When true, add an additional property/value declaration before declarations\n/// that use advanced features such as custom properties or CSS functions. This\n/// adds fallback support for older browsers such as IE11 that do not support\n/// these features at the cost of additional CSS. Set this variable to false to\n/// disable generating fallback declarations.\n$enable-fallback-declarations: true !default;\n\n/// Writes a CSS property/value declaration. This mixin is used throughout the\n/// theme package for consistency for dynamically setting CSS property values.\n///\n/// This mixin may optionally take a fallback value. For advanced features such\n/// as custom properties or CSS functions like min and max, a fallback value is\n/// recommended to support older browsers.\n///\n/// @param {String} $property - The CSS property of the declaration.\n/// @param {*} $value - The value of the CSS declaration. The value should be\n/// resolved by other theme functions first (i.e. custom property Maps and\n/// Material theme keys are not supported in this mixin). If the value is\n/// null, no declarations will be emitted.\n/// @param {*} $fallback - An optional fallback value for older browsers. If\n/// provided, a second property/value declaration will be added before the\n/// main property/value declaration.\n/// @param {Map} $gss - An optional Map of GSS annotations to add.\n/// @param {Bool} $important - If true, add `!important` to the declaration.\n@mixin declaration(\n $property,\n $value,\n $fallback-value: null,\n $gss: (),\n $important: false\n) {\n // Normally setting a null value to a property will not emit CSS, so mixins\n // wouldn't need to check this. However, Sass will throw an error if the\n // interpolated property is a custom property.\n @if $value != null {\n $important-rule: if($important, ' !important', '');\n\n @if $fallback-value and $enable-fallback-declarations {\n @include gss.annotate($gss);\n #{$property}: #{$fallback-value} #{$important-rule};\n\n // Add @alternate to annotations.\n $gss: map.merge(\n $gss,\n (\n alternate: true,\n )\n );\n }\n\n @include gss.annotate($gss);\n #{$property}: #{$value}#{$important-rule};\n }\n}\n\n/// Unpacks shorthand values for CSS properties (i.e. lists of 1-3 values).\n/// If a list of 4 values is given, it is returned as-is.\n///\n/// Examples:\n///\n/// unpack-value(4px) => 4px 4px 4px 4px\n/// unpack-value(4px 2px) => 4px 2px 4px 2px\n/// unpack-value(4px 2px 2px) => 4px 2px 2px 2px\n/// unpack-value(4px 2px 0 2px) => 4px 2px 0 2px\n///\n/// @param {Number | Map | List} $value - List of 1 to 4 value numbers.\n/// @return {List} a List of 4 value numbers.\n@function unpack-value($value) {\n @if meta.type-of($value) == 'map' or list.length($value) == 1 {\n @return $value $value $value $value;\n } @else if list.length($value) == 4 {\n @return $value;\n } @else if list.length($value) == 3 {\n @return list.nth($value, 1) list.nth($value, 2) list.nth($value, 3)\n list.nth($value, 2);\n } @else if list.length($value) == 2 {\n @return list.nth($value, 1) list.nth($value, 2) list.nth($value, 1)\n list.nth($value, 2);\n }\n\n @error \"Invalid CSS property value: '#{$value}' is more than 4 values\";\n}\n","//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use 'sass:list';\n@use 'sass:map';\n@use 'sass:meta';\n\n/// Adds optional GSS annotation comments. Useful for theme mixins where one or\n/// more properties are set indirectly.\n///\n/// Annotations may be provided as a Map of annotations or as named arguments.\n///\n/// @example - scss\n/// @include annotate((noflip: true));\n/// left: 0;\n///\n/// @example - scss\n/// @include annotate($noflip: true);\n/// left: 0;\n///\n/// @example - css\n/// /* @noflip */ /*rtl:ignore*/\n/// left: 0;\n///\n/// @param {Map} $annotations - Map of annotations. Values must be set to `true`\n/// for an annotation to be added.\n@mixin annotate($annotations...) {\n $keywords: meta.keywords($annotations);\n @if list.length($annotations) > 0 {\n $annotations: list.nth($annotations, 1);\n } @else {\n $annotations: $keywords;\n }\n\n @if (map.get($annotations, alternate) == true) {\n /* @alternate */\n }\n\n // noflip must be the last tag right before the property\n @if (map.get($annotations, noflip) == true) {\n /* @noflip */ /*rtl:ignore*/\n }\n}\n","//\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 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@use 'sass:list';\n@use 'sass:meta';\n@use 'sass:selector';\n@use '@material/theme/gss';\n@use '@material/theme/selector-ext';\n@use '@material/theme/theme';\n\n$include: true !default;\n\n/// Creates a rule that will be applied when a component is within the context\n/// of an RTL layout.\n///\n/// @example - scss\n/// .mdc-foo {\n/// padding-left: 4px;\n///\n/// @include rtl {\n/// padding-left: auto;\n/// padding-right: 4px;\n/// }\n/// }\n///\n/// @example - css\n/// .mdc-foo {\n/// padding-left: 4px;\n/// }\n///\n/// [dir=\"rtl\"] .mdc-foo,\n/// .mdc-foo[dir=\"rtl\"] {\n/// padding-left: auto;\n/// padding-right: 4px;\n/// }\n///\n/// Note that this mixin works by checking for an ancestor element with\n/// `[dir=\"rtl\"]`. As a result, nested `dir` values are not supported:\n///\n/// @example - html\n/// <html dir=\"rtl\">\n/// <!-- ... -->\n/// <div dir=\"ltr\">\n/// <div class=\"mdc-foo\">Styled incorrectly as RTL!</div>\n/// </div>\n/// </html>\n///\n/// In the future, selectors such as the `:dir` pseudo-class\n/// (http://mdn.io/css/:dir) will help us mitigate this.\n///\n/// @content Content to be styled in an RTL context.\n@mixin rtl() {\n @if ($include) {\n $dir-rtl: '[dir=rtl]';\n\n $rtl-selectors: list.join(\n selector.nest($dir-rtl, &),\n selector-ext.append-strict(&, $dir-rtl)\n );\n\n @at-root {\n #{$rtl-selectors} {\n /*rtl:begin:ignore*/\n @content;\n /*rtl:end:ignore*/\n }\n }\n }\n}\n\n// Takes a base box-model property name (`margin`, `border`, `padding`, etc.) along with a\n// default direction (`left` or `right`) and value, and emits rules which apply the given value to the\n// specified direction by default and the opposite direction in RTL.\n//\n// For example:\n//\n// ```scss\n// .mdc-foo {\n// @include rtl-reflexive-box(margin, left, 8px);\n// }\n// ```\n//\n// is equivalent to:\n//\n// ```scss\n// .mdc-foo {\n// margin-left: 8px;\n// margin-right: 0;\n//\n// @include rtl {\n// margin-left: 0;\n// margin-right: 8px;\n// }\n// }\n// ```\n//\n// whereas:\n//\n// ```scss\n// .mdc-foo {\n// @include rtl-reflexive-box(margin, right, 8px);\n// }\n// ```\n//\n// is equivalent to:\n//\n// ```scss\n// .mdc-foo {\n// margin-left: 0;\n// margin-right: 8px;\n//\n// @include rtl {\n// margin-left: 8px;\n// margin-right: 0;\n// }\n// }\n// ```\n//\n// You can also pass an optional 4th `$root-selector` argument which will be forwarded to `mdc-rtl`,\n// e.g. `@include rtl-reflexive-box(margin, left, 8px, '.mdc-component')`.\n//\n// Note that this function will always zero out the original value in an RTL context.\n// If you're trying to flip the values, use `mdc-rtl-reflexive-property()` instead.\n@mixin reflexive-box(\n $base-property,\n $default-direction,\n $value,\n $replace: null\n) {\n @if (list.index((right, left), $default-direction) == null) {\n @error \"Invalid default direction: '#{$default-direction}'. Please specifiy either 'right' or 'left'.\";\n }\n\n $left-value: $value;\n $right-value: 0;\n\n @if ($default-direction == right) {\n $left-value: 0;\n $right-value: $value;\n }\n\n @include reflexive-property(\n $base-property,\n $left-value,\n $right-value,\n $replace: $replace\n );\n}\n\n// Takes a base property and emits rules that assign <base-property>-left to <left-value> and\n// <base-property>-right to <right-value> in a LTR context, and vice versa in a RTL context.\n// For example:\n//\n// ```scss\n// .mdc-foo {\n// @include rtl-reflexive-property(margin, auto, 12px);\n// }\n// ```\n//\n// is equivalent to:\n//\n// ```scss\n// .mdc-foo {\n// margin-left: auto;\n// margin-right: 12px;\n//\n// @include rtl {\n// margin-left: 12px;\n// margin-right: auto;\n// }\n// }\n// ```\n//\n// An optional 4th `$root-selector` argument can be given, which will be passed to `mdc-rtl`.\n@mixin reflexive-property(\n $base-property,\n $left-value,\n $right-value,\n $replace: null\n) {\n $prop-left: #{$base-property}-left;\n $prop-right: #{$base-property}-right;\n\n @include reflexive(\n $prop-left,\n $left-value,\n $prop-right,\n $right-value,\n $replace: $replace\n );\n}\n\n// Takes an argument specifying a horizontal position property (either 'left' or 'right') as well\n// as a value, and applies that value to the specified position in a LTR context, and flips it in a\n// RTL context. For example:\n//\n// ```scss\n// .mdc-foo {\n// @include rtl-reflexive-position(left, 0);\n// }\n// ```\n//\n// is equivalent to:\n//\n// ```scss\n// .mdc-foo {\n// left: 0;\n// right: initial;\n//\n// @include rtl {\n// left: initial;\n// right: 0;\n// }\n// }\n// ```\n//\n// An optional third $root-selector argument may also be given, which is passed to `mdc-rtl`.\n@mixin reflexive-position($position-property, $value, $replace: null) {\n @if (list.index((right, left), $position-property) == null) {\n @error \"Invalid position #{position-property}. Please specifiy either right or left\";\n }\n\n // TODO: 'initial' is not supported in IE 11. https://caniuse.com/#feat=css-initial-value\n $left-value: $value;\n $right-value: initial;\n\n @if ($position-property == right) {\n $right-value: $value;\n $left-value: initial;\n }\n\n @include reflexive(\n left,\n $left-value,\n right,\n $right-value,\n $replace: $replace\n );\n}\n\n// Takes pair of properties with values as arguments and flips it in RTL context.\n// For example:\n//\n// ```scss\n// .mdc-foo {\n// @include rtl-reflexive(left, 2px, right, 5px);\n// }\n// ```\n//\n// is equivalent to:\n//\n// ```scss\n// .mdc-foo {\n// left: 2px;\n// right: 5px;\n//\n// @include rtl {\n// right: 2px;\n// left: 5px;\n// }\n// }\n// ```\n//\n// An optional fifth `$root-selector` argument may also be given, which is passed to `mdc-rtl`.\n@mixin reflexive(\n $left-property,\n $left-value,\n $right-property,\n $right-value,\n $replace: null\n) {\n $left-replace: null;\n $right-replace: null;\n @if $replace {\n @if meta.type-of($left-value) == 'string' {\n $left-replace: $replace;\n }\n\n @if meta.type-of($right-value) == 'string' {\n $right-replace: $replace;\n }\n\n @if $left-replace == null and $right-replace == null {\n @error 'mdc-rtl: $replace may only be used with strings but neither left nor right values are strings.';\n }\n\n // If any replacements are null, treat the entire value as null (do not\n // emit anything).\n @each $name, $replacement in $replace {\n @if $replacement == null {\n $left-value: null;\n $right-value: null;\n }\n }\n }\n\n // Do not emit if either value are null\n @if $left-value and $right-value {\n @include _property($left-property, $left-value, $replace: $left-replace);\n @include _property($right-property, $right-value, $replace: $right-replace);\n\n @include rtl {\n @include _property(\n $left-property,\n $right-value,\n $replace: $right-replace\n );\n @include _property($right-property, $left-value, $replace: $left-replace);\n }\n }\n}\n\n///\n/// Adds RTL ignore annotation when `$mdc-rtl-include` is true.\n///\n@mixin ignore-next-line() {\n @include gss.annotate(\n (\n noflip: $include,\n )\n );\n}\n\n///\n/// Adds `@noflip` annotation when `$mdc-rtl-include` is true.\n///\n/// @param {String} $property\n/// @param {String} $value\n/// @param {Map} $replace\n///\n@mixin _property($property, $value, $replace: null) {\n @include theme.property(\n $property,\n $value,\n $replace: $replace,\n $gss: (noflip: $include)\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@use '@material/feature-targeting/feature-targeting';\n///\n/// Emits necessary layout styles to set a transparent border around an element\n/// without interfering with the rest of its component layout. The border is\n/// only visible in high-contrast mode. The target element should be a child of\n/// a relatively positioned top-level element (i.e. a ::before pseudo-element).\n///\n/// @param {number} $border-width - The width of the transparent border.\n/// @param {string} $border-style - The style of the transparent border.\n///\n@mixin transparent-border(\n $border-width: 1px,\n $border-style: solid,\n $query: feature-targeting.all()\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n position: absolute;\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n border: $border-width $border-style transparent;\n border-radius: inherit;\n content: '';\n pointer-events: none;\n }\n\n // Used to satisfy Firefox v94 which does not render transparent borders in HCM (b/206440838).\n @include forced-colors-mode($exclude-ie11: true) {\n @include feature-targeting.targets($feat-structure) {\n border-color: CanvasText;\n }\n }\n}\n\n///\n/// Visually hides text content for accessibility. This text should only be\n/// visible to screen reader users.\n/// See https://a11yproject.com/posts/how-to-hide-content/\n///\n@mixin visually-hidden($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n clip: rect(1px, 1px, 1px, 1px);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap; /* added line */\n width: 1px;\n }\n}\n\n/// Selects for IE11 support.\n///\n/// @content styles to emit for IE11 support\n@mixin ie11-support {\n @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n @content;\n }\n}\n\n/// Selects for `forced-colors` high contrast mode.\n///\n/// While in `forced-colors` mode, only system colors should be used.\n///\n/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#system_colors\n/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors\n/// @content styles to emit in `forced-colors` mode\n@mixin forced-colors-mode($exclude-ie11: false) {\n @if $exclude-ie11 {\n @media screen and (forced-colors: active) {\n @content;\n }\n } @else {\n @media screen and (forced-colors: active), (-ms-high-contrast: active) {\n @content;\n }\n }\n}\n","//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/ripple/ripple-theme';\n@use '@material/theme/state';\n@use '@material/theme/theme';\n\n/// Default color for slider (track, thumb, ripple).\n$color: primary;\n$disabled-color: on-surface;\n\n// Thumb variables.\n$value-indicator-color: #000;\n$value-indicator-opacity: 0.6;\n$value-indicator-text-color: on-primary;\n\n// Track variables.\n$track-inactive-opacity: 0.24;\n$tick-mark-active-color: on-primary;\n$tick-mark-inactive-color: primary;\n$tick-mark-opacity: 0.6;\n\n/// Customizes active track color, using a Color or state Map.\n/// - To set only the default color, provide a single Color.\n/// - To set one or more state colors, provide a state Map with optional keys.\n/// - Supported state Map keys: `default`, `disabled`.\n///\n/// @example\n/// @include track-active-color(blue);\n/// @include track-active-color((disabled: gray));\n///\n/// @param {Color | Map} $color-or-map - The label's color or a state Map\n@mixin track-active-color($color-or-map, $query: feature-targeting.all()) {\n @include _set-track-active-color(\n state.get-default-state($color-or-map),\n $query\n );\n\n $_disabled-color: state.get-disabled-state($color-or-map);\n @if $_disabled-color {\n &.mdc-slider--disabled {\n @include _set-track-active-color($_disabled-color, $query);\n }\n }\n}\n\n@mixin _set-track-active-color($color, $query) {\n $feat-color: feature-targeting.create-target($query, color);\n\n .mdc-slider__track--active_fill {\n @include feature-targeting.targets($feat-color) {\n @include theme.property(border-color, $color);\n }\n }\n}\n\n/// Customizes inactive track color, using a Color or state Map.\n/// - To set only the default color, provide a single Color.\n/// - To set one or more state colors, provide a state Map with optional keys.\n/// - Supported state Map keys: `default`, `disabled`.\n///\n/// @example\n/// @include track-inactive-color(blue);\n/// @include track-inactive-color((disabled: gray));\n///\n/// @param {Color | Map} $color-or-map - The label's color or a state Map\n@mixin track-inactive-color(\n $color-or-map,\n $opacity: $track-inactive-opacity,\n $query: feature-targeting.all()\n) {\n @include _set-track-inactive-color(\n state.get-default-state($color-or-map),\n $opacity,\n $query\n );\n\n $_disabled-color: state.get-disabled-state($color-or-map);\n @if $_disabled-color {\n &.mdc-slider--disabled {\n @include _set-track-inactive-color($_disabled-color, $opacity, $query);\n }\n }\n}\n\n@mixin _set-track-inactive-color($color, $opacity, $query) {\n $feat-color: feature-targeting.create-target($query, color);\n\n .mdc-slider__track--inactive {\n @include feature-targeting.targets($feat-color) {\n @include theme.property(background-color, $color);\n\n opacity: $opacity;\n }\n }\n}\n\n/// Customizes thumb color, using a Color or state Map.\n/// - To set only the default color, provide a single Color.\n/// - To set one or more state colors, provide a state Map with optional keys.\n/// - Supported state Map keys: `default`, `disabled`.\n///\n/// @example\n/// @include thumb-color(blue);\n/// @include thumb-color((disabled: gray));\n///\n/// @param {Color | Map} $color-or-map - The label's color or a state Map\n@mixin thumb-color($color-or-map, $query: feature-targeting.all()) {\n @include _set-thumb-color(state.get-default-state($color-or-map), $query);\n\n $_disabled-color: state.get-disabled-state($color-or-map);\n @if $_disabled-color {\n &.mdc-slider--disabled {\n @include _set-thumb-color($_disabled-color, $query);\n }\n }\n}\n\n@mixin _set-thumb-color($color, $query) {\n $feat-color: feature-targeting.create-target($query, color);\n\n @include feature-targeting.targets($feat-color) {\n .mdc-slider__thumb-knob {\n @include theme.property(background-color, $color);\n @include theme.property(border-color, $color);\n }\n\n .mdc-slider__thumb--top {\n .mdc-slider__thumb-knob,\n &.mdc-slider__thumb:hover .mdc-slider__thumb-knob,\n &.mdc-slider__thumb--focused .mdc-slider__thumb-knob {\n border-color: #fff;\n }\n }\n }\n}\n\n///\n/// Customizes thumb ripple color.\n/// @param {Color | String} $color Either a valid color value or a key from\n/// `$theme-variables.property-values`.\n///\n@mixin thumb-ripple-color($color, $query: feature-targeting.all()) {\n .mdc-slider__thumb {\n @include ripple-theme.states($color: $color, $query: $query);\n }\n}\n\n/// Customizes thumb color when thumb is activated (hover, focused, or pressed\n/// state).\n///\n/// @param {Color} $color - The thumb's color\n@mixin thumb-activated-color($color, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n\n .mdc-slider__thumb:hover,\n .mdc-slider__thumb--focused {\n @include _set-thumb-color($color, $query);\n }\n}\n\n/// Customizes color of active tick marks, using a Color or state Map.\n/// - To set only the default color, provide a single Color.\n/// - To set one or more state colors, provide a state Map with optional keys.\n/// - Supported state Map keys: `default`, `disabled`.\n///\n/// @example\n/// @include tick-mark-active-color(blue);\n/// @include tick-mark-active-color((disabled: gray));\n///\n/// @param {Color | Map} $color-or-map - The label's color or a state Map\n@mixin tick-mark-active-color(\n $color-or-map,\n $opacity: $tick-mark-opacity,\n $query: feature-targeting.all()\n) {\n @include _set-tick-mark-active-color(\n state.get-default-state($color-or-map),\n $opacity,\n $query\n );\n\n $_disabled-color: state.get-disabled-state($color-or-map);\n @if $_disabled-color {\n &.mdc-slider--disabled {\n @include _set-tick-mark-active-color($_disabled-color, $opacity, $query);\n }\n }\n}\n\n@mixin _set-tick-mark-active-color($color, $opacity, $query) {\n $feat-color: feature-targeting.create-target($query, color);\n\n .mdc-slider__tick-mark--active {\n @include feature-targeting.targets($feat-color) {\n @include theme.property(background-color, $color);\n\n opacity: $opacity;\n }\n }\n}\n\n/// Customizes color of inactive tick marks, using a Color or state Map.\n/// - To set only the default color, provide a single Color.\n/// - To set one or more state colors, provide a state Map with optional keys.\n/// - Supported state Map keys: `default`, `disabled`.\n///\n/// @example\n/// @include tick-mark-inactive-color(blue);\n/// @include tick-mark-inactive-color((disabled: gray));\n///\n/// @param {Color | Map} $color-or-map - The label's color or a state Map\n@mixin tick-mark-inactive-color(\n $color-or-map,\n $opacity: $tick-mark-opacity,\n $query: feature-targeting.all()\n) {\n @include _set-tick-mark-inactive-color(\n state.get-default-state($color-or-map),\n $opacity,\n $query\n );\n\n $_disabled-color: state.get-disabled-state($color-or-map);\n @if $_disabled-color {\n &.mdc-slider--disabled {\n @include _set-tick-mark-inactive-color(\n $_disabled-color,\n $opacity,\n $query\n );\n }\n }\n}\n\n@mixin _set-tick-mark-inactive-color($color, $opacity, $query) {\n $feat-color: feature-targeting.create-target($query, color);\n\n .mdc-slider__tick-mark--inactive {\n @include feature-targeting.targets($feat-color) {\n @include theme.property(background-color, $color);\n\n opacity: $opacity;\n }\n }\n}\n\n///\n/// Customizes color and opacity of the value indicator.\n/// @param {Color | String} $color Either a valid color value or a key from\n/// `$theme-variables.property-values`.\n/// @param {number} $opacity\n///\n@mixin value-indicator-color(\n $color,\n $opacity,\n $query: feature-targeting.all()\n) {\n $feat-color: feature-targeting.create-target($query, color);\n\n .mdc-slider__value-indicator {\n @include feature-targeting.targets($feat-color) {\n @include theme.property(background-color, $color);\n\n opacity: $opacity;\n }\n }\n\n // Caret.\n .mdc-slider__value-indicator::before {\n @include feature-targeting.targets($feat-color) {\n @include theme.property(border-top-color, $color);\n }\n }\n}\n\n///\n/// Customizes color of the value indicator text.\n/// @param {Color | String} $color Either a valid color value or a key from\n/// `$theme-variables.property-values`.\n///\n@mixin value-indicator-text-color($color, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n\n .mdc-slider__value-indicator {\n @include feature-targeting.targets($feat-color) {\n @include theme.property(color, $color);\n }\n }\n}\n","//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:math';\n@use 'sass:list';\n@use 'sass:map';\n@use 'sass:string';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/theme/custom-properties';\n@use '@material/theme/keys';\n@use '@material/theme/theme';\n\n/// @deprecated Avoid calling this function directly. Instead, configure the\n/// `$styles-<style>` variable Maps.\n@function set-styles_($base-styles, $scale-styles, $override-styles) {\n $options: (\n custom-property-prefix: typography,\n );\n\n $base-styles: keys.set-values($base-styles, $options: $options);\n\n @each $style, $style-props in $scale-styles {\n @each $base-key in map.keys($base-styles) {\n // Ignore the return result, it's not needed\n $unused: keys.add-link(keys.combine($style, $base-key), $base-key);\n }\n\n // Merge base properties for all styles.\n $style-props: map.merge($base-styles, $style-props);\n\n // Merge overrides onto each style.\n $style-props: map.merge($style-props, map.get($override-styles, $style));\n\n // Register keys for this style\n @each $property, $value in $style-props {\n $unused: keys.set-value(\n keys.combine($style, $property),\n $value,\n $options: $options\n );\n }\n\n // Override original styles with new styles.\n $scale-styles: map.merge($scale-styles, (#{$style}: $style-props));\n }\n\n @return $scale-styles;\n}\n\n@function get-letter-spacing_($tracking, $font-size) {\n @return math.div($tracking, $font-size * 16) * 1em;\n}\n\n@function px-to-rem($px) {\n @if custom-properties.is-custom-prop($px) {\n @return custom-properties.set-fallback(\n $px,\n _px-to-rem(custom-properties.get-fallback($px))\n );\n }\n @return _px-to-rem($px);\n}\n\n@function _px-to-rem($px) {\n @if $px == null {\n @return null;\n }\n @return math.div($px, 16px) * 1rem;\n}\n\n$font-family: string.unquote('Roboto, sans-serif') !default;\n\n// Override styles\n$styles-headline1: () !default;\n$styles-headline2: () !default;\n$styles-headline3: () !default;\n$styles-headline4: () !default;\n$styles-headline5: () !default;\n$styles-headline6: () !default;\n$styles-subtitle1: () !default;\n$styles-subtitle2: () !default;\n$styles-body1: () !default;\n$styles-body2: () !default;\n$styles-caption: () !default;\n$styles-button: () !default;\n$styles-overline: () !default;\n\n/// @deprecated Do not override this variable. Use the $styles-<style> override\n/// Map variables instead, or $font-family to set the base font family.\n$base: (\n font-family: $font-family,\n) !default;\n\n$font-weight-values: (\n thin: 100,\n light: 300,\n regular: 400,\n medium: 500,\n bold: 700,\n black: 900,\n) !default;\n\n/// @deprecated Do not override this variable. Use the $styles-<style> override\n/// Map variables instead.\n$styles: set-styles_(\n $base,\n (\n headline1: (\n font-size: px-to-rem(96px),\n line-height: px-to-rem(96px),\n font-weight: map.get($font-weight-values, light),\n letter-spacing: get-letter-spacing_(-1.5, 6),\n text-decoration: inherit,\n text-transform: inherit,\n ),\n headline2: (\n font-size: px-to-rem(60px),\n line-height: px-to-rem(60px),\n font-weight: map.get($font-weight-values, light),\n letter-spacing: get-letter-spacing_(-0.5, 3.75),\n text-decoration: inherit,\n text-transform: inherit,\n ),\n headline3: (\n font-size: px-to-rem(48px),\n line-height: px-to-rem(50px),\n font-weight: map.get($font-weight-values, regular),\n letter-spacing: normal,\n text-decoration: inherit,\n text-transform: inherit,\n ),\n headline4: (\n font-size: px-to-rem(34px),\n line-height: px-to-rem(40px),\n font-weight: map.get($font-weight-values, regular),\n letter-spacing: get-letter-spacing_(0.25, 2.125),\n text-decoration: inherit,\n text-transform: inherit,\n ),\n headline5: (\n font-size: px-to-rem(24px),\n line-height: px-to-rem(32px),\n font-weight: map.get($font-weight-values, regular),\n letter-spacing: normal,\n text-decoration: inherit,\n text-transform: inherit,\n ),\n headline6: (\n font-size: px-to-rem(20px),\n line-height: px-to-rem(32px),\n font-weight: map.get($font-weight-values, medium),\n letter-spacing: get-letter-spacing_(0.25, 1.25),\n text-decoration: inherit,\n text-transform: inherit,\n ),\n subtitle1: (\n font-size: px-to-rem(16px),\n line-height: px-to-rem(28px),\n font-weight: map.get($font-weight-values, regular),\n letter-spacing: get-letter-spacing_(0.15, 1),\n text-decoration: inherit,\n text-transform: inherit,\n ),\n subtitle2: (\n font-size: px-to-rem(14px),\n line-height: px-to-rem(22px),\n font-weight: map.get($font-weight-values, medium),\n letter-spacing: get-letter-spacing_(0.1, 0.875),\n text-decoration: inherit,\n text-transform: inherit,\n ),\n body1: (\n font-size: px-to-rem(16px),\n line-height: px-to-rem(24px),\n font-weight: map.get($font-weight-values, regular),\n letter-spacing: get-letter-spacing_(0.5, 1),\n text-decoration: inherit,\n text-transform: inherit,\n ),\n body2: (\n font-size: px-to-rem(14px),\n line-height: px-to-rem(20px),\n font-weight: map.get($font-weight-values, regular),\n letter-spacing: get-letter-spacing_(0.25, 0.875),\n text-decoration: inherit,\n text-transform: inherit,\n ),\n caption: (\n font-size: px-to-rem(12px),\n line-height: px-to-rem(20px),\n font-weight: map.get($font-weight-values, regular),\n letter-spacing: get-letter-spacing_(0.4, 0.75),\n text-decoration: inherit,\n text-transform: inherit,\n ),\n button: (\n font-size: px-to-rem(14px),\n line-height: px-to-rem(36px),\n font-weight: map.get($font-weight-values, medium),\n letter-spacing: get-letter-spacing_(1.25, 0.875),\n text-decoration: none,\n text-transform: uppercase,\n ),\n overline: (\n font-size: px-to-rem(12px),\n line-height: px-to-rem(32px),\n font-weight: map.get($font-weight-values, medium),\n letter-spacing: get-letter-spacing_(2, 0.75),\n text-decoration: none,\n text-transform: uppercase,\n ),\n ),\n (\n headline1: $styles-headline1,\n headline2: $styles-headline2,\n headline3: $styles-headline3,\n headline4: $styles-headline4,\n headline5: $styles-headline5,\n headline6: $styles-headline6,\n subtitle1: $styles-subtitle1,\n subtitle2: $styles-subtitle2,\n body1: $styles-body1,\n body2: $styles-body2,\n caption: $styles-caption,\n button: $styles-button,\n overline: $styles-overline,\n )\n) !default;\n\n// A copy of the styles Map that is used to detect compile-time changes for\n// Angular support.\n$_styles-copy: $styles;\n\n@function is-typography-style($style) {\n @return map.has-key($styles, $style);\n}\n\n@function get-typography-styles() {\n @return map.keys($styles);\n}\n\n@mixin core-styles($query: feature-targeting.all()) {\n .mdc-typography {\n @include base($query: $query);\n }\n\n @each $style in get-typography-styles() {\n .mdc-typography--#{$style} {\n @include typography($style, $query: $query);\n }\n }\n}\n\n@mixin base($query: feature-targeting.all()) {\n $feat-typography: feature-targeting.create-target($query, typography);\n\n @include smooth-font($query: $query);\n @include feature-targeting.targets($feat-typography) {\n @include theme.property(font-family, font-family);\n }\n}\n\n@mixin typography($style, $query: feature-targeting.all(), $exclude-props: ()) {\n $feat-typography: feature-targeting.create-target($query, typography);\n\n @if not is-typography-style($style) {\n @error \"Invalid style specified! #{$style} doesn't exist. Choose one of #{get-typography-styles()}\";\n }\n\n @include smooth-font($query: $query);\n @include feature-targeting.targets($feat-typography) {\n @each $key in keys.get-keys($style) {\n // <style>-<property>: headline1-font-size\n // Slice the string past the first key separator to retrieve the\n // property name\n $property: string.slice($key, string.index($key, '-') + 1);\n @if list.index($exclude-props, $property) == null {\n $current-global-value: map.get($styles, $style, $property);\n $configured-global-value: map.get($_styles-copy, $style, $property);\n @if $current-global-value != $configured-global-value {\n // A compile time change was made to $mdc-typography-styles. To\n // support Angular, use this value instead of the key's value.\n @if $current-global-value {\n // Only emit if the overridden value exists\n $custom-prop: keys.create-custom-property($key);\n $custom-prop: custom-properties.set-fallback(\n $custom-prop,\n $current-global-value\n );\n @include theme.property($property, $custom-prop);\n }\n } @else {\n // Otherwise, use the key, which may be different from the original\n // configured global value.\n @include theme.property($property, $key);\n }\n }\n }\n }\n}\n\n/// Applies antialiasing via font-smoothing to text.\n@mixin smooth-font($query: feature-targeting.all()) {\n $feat-typography: feature-targeting.create-target($query, typography);\n\n @include feature-targeting.targets($feat-typography) {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n }\n}\n\n// Element must be `display: block` or `display: inline-block` for this to work.\n@mixin overflow-ellipsis($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n }\n}\n\n/// Sets a container's baseline that text content will align to.\n///\n/// If the `$display` is set to a flexbox display, only `$top` baseline may be\n/// set. A separate element must be added as a child of the container with a\n/// `$bottom` baseline.\n///\n/// @param {Number} $top - the distance from the top of the container to the\n/// text's baseline.\n/// @param {Number} $bottom - the distance from the text's baseline to the\n/// bottom of the container.\n/// @param {String} $display - the display type of the container. May be `flex`,\n/// `inline-flex`, `block`, or `inline-block`.\n@mixin baseline(\n $top: 0,\n $bottom: 0,\n $display: block,\n $query: feature-targeting.all()\n) {\n $validDisplayTypes: (flex, inline-flex, block, inline-block);\n\n @if list.index($validDisplayTypes, $display) == null {\n @error \"mdc-typography: invalid display specified! #{$display} must be one of #{$validDisplayTypes}\";\n }\n\n $isFlexbox: $display == 'flex' or $display == 'inline-flex';\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n display: $display;\n\n @if $isFlexbox {\n align-items: baseline;\n }\n }\n\n @if $top > 0 {\n @include baseline-top($top, $query: $query);\n }\n\n @if $bottom > 0 {\n @if $isFlexbox {\n @error \"mdc-typography: invalid baseline with display type. #{$display} cannot specifiy $bottom. Add a separate child element with its own $bottom.\";\n }\n\n @include baseline-bottom($bottom, $query: $query);\n }\n}\n\n/// Sets the baseline of flow text content.\n///\n/// Separate `$top` and `$bottom` baselines may be specified. You should ensure\n/// that the `$top` baseline matches the previous text content's $bottom\n/// baseline to ensure text is positioned appropriately.\n///\n/// See go/css-baseline for reference on how this mixin works.\n///\n/// This is intended for text flow content only (e.g. `<h1>`, `<p>`, `<span>`,\n/// or `<div>` with only text content). Use `baseline()` to set the baseline of\n/// containers that are flexbox or have non-flow content children.\n///\n/// @param {Number} $top - the distance from the top of the container to the\n/// text's baseline.\n/// @param {Number} $bottom - the distance from the text's baseline to the\n/// bottom of the container.\n/// @param {Boolean} $lineHeight - the line-height to use for the text. This\n/// is the distance between baselines of multiple lines of text.\n/// @param {String} $display - the display type of the container. May be `block`\n/// or `inline-block`.\n@mixin text-baseline(\n $top: 0,\n $bottom: 0,\n $display: block,\n $lineHeight: normal,\n $query: feature-targeting.all()\n) {\n $validDisplayTypes: (block, inline-block);\n\n @if list.index($validDisplayTypes, $display) == null {\n @error \"mdc-typography: invalid display specified! #{$display} must be one of #{$validDisplayTypes}\";\n }\n\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include baseline(\n $display: $display,\n $top: $top,\n $bottom: $bottom,\n $query: $query\n );\n @include feature-targeting.targets($feat-structure) {\n @if $top > 0 {\n margin-top: 0;\n /* @alternate */\n line-height: #{$lineHeight};\n }\n\n @if $bottom > 0 {\n margin-bottom: -1 * $bottom;\n }\n }\n}\n\n/// Creates a baseline strut from the top of a container. This mixin is for\n/// advanced users, prefer `baseline()`.\n///\n/// @param {Number} $distance - The distance from the top of the container to\n/// the text's baseline.\n@mixin baseline-top($distance, $query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n &::before {\n @include feature-targeting.targets($feat-structure) {\n @include baseline-strut_($distance);\n\n vertical-align: 0;\n }\n }\n}\n\n/// Creates a baseline strut from the baseline to the bottom of a container.\n/// This mixin is for advanced users, prefer `baseline()`.\n///\n/// @param {Number} $distance - The distance from the text's baseline to the\n/// bottom of the container.\n@mixin baseline-bottom($distance, $query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n &::after {\n @include feature-targeting.targets($feat-structure) {\n @include baseline-strut_($distance);\n\n vertical-align: -1 * $distance;\n }\n }\n}\n\n/// Adds an invisible, zero-width prefix to a container's text.\n/// This ensures that the baseline is always where the text would be, instead\n/// of defaulting to the container bottom when text is empty. Do not use this\n/// mixin if the `baseline` mixin is already applied.\n@mixin zero-width-prefix($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n &::before {\n @include feature-targeting.targets($feat-structure) {\n content: '\\200b';\n }\n }\n}\n\n@mixin baseline-strut_($distance) {\n display: inline-block;\n width: 0;\n height: $distance;\n content: '';\n}\n\n@function get-font($typography) {\n @return map.get($styles, $typography, font-family);\n}\n\n@function get-line-height($typography) {\n @return map.get($styles, $typography, line-height);\n}\n\n@function get-size($typography) {\n @return map.get($styles, $typography, font-size);\n}\n\n@function get-weight($typography) {\n @return map.get($styles, $typography, font-weight);\n}\n\n@function get-tracking($typography) {\n @return map.get($styles, $typography, letter-spacing);\n}\n\n$_typography-theme: (\n font: null,\n line-height: null,\n size: null,\n weight: null,\n tracking: null,\n);\n\n@mixin theme-styles($theme) {\n @include theme.validate-theme-keys($_typography-theme, $theme);\n\n @include theme.property(font-family, map.get($theme, font));\n @include theme.property(line-height, map.get($theme, line-height));\n @include theme.property(font-size, map.get($theme, size));\n @include theme.property(font-weight, map.get($theme, weight));\n @include theme.property(letter-spacing, map.get($theme, tracking));\n}\n","//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:map';\n@use 'sass:math';\n@use 'sass:meta';\n@use '@material/animation/variables' as animation-variables;\n@use '@material/theme/custom-properties';\n@use '@material/base/mixins' as base-mixins;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/rtl/rtl';\n@use '@material/theme/css';\n@use '@material/theme/theme';\n@use '@material/theme/theme-color';\n\n$baseline-color: black !default;\n$umbra-opacity: 0.2 !default;\n$penumbra-opacity: 0.14 !default;\n$ambient-opacity: 0.12 !default;\n\n$umbra-map: (\n 0: '0px 0px 0px 0px',\n 1: '0px 2px 1px -1px',\n 2: '0px 3px 1px -2px',\n 3: '0px 3px 3px -2px',\n 4: '0px 2px 4px -1px',\n 5: '0px 3px 5px -1px',\n 6: '0px 3px 5px -1px',\n 7: '0px 4px 5px -2px',\n 8: '0px 5px 5px -3px',\n 9: '0px 5px 6px -3px',\n 10: '0px 6px 6px -3px',\n 11: '0px 6px 7px -4px',\n 12: '0px 7px 8px -4px',\n 13: '0px 7px 8px -4px',\n 14: '0px 7px 9px -4px',\n 15: '0px 8px 9px -5px',\n 16: '0px 8px 10px -5px',\n 17: '0px 8px 11px -5px',\n 18: '0px 9px 11px -5px',\n 19: '0px 9px 12px -6px',\n 20: '0px 10px 13px -6px',\n 21: '0px 10px 13px -6px',\n 22: '0px 10px 14px -6px',\n 23: '0px 11px 14px -7px',\n 24: '0px 11px 15px -7px',\n) !default;\n\n$penumbra-map: (\n 0: '0px 0px 0px 0px',\n 1: '0px 1px 1px 0px',\n 2: '0px 2px 2px 0px',\n 3: '0px 3px 4px 0px',\n 4: '0px 4px 5px 0px',\n 5: '0px 5px 8px 0px',\n 6: '0px 6px 10px 0px',\n 7: '0px 7px 10px 1px',\n 8: '0px 8px 10px 1px',\n 9: '0px 9px 12px 1px',\n 10: '0px 10px 14px 1px',\n 11: '0px 11px 15px 1px',\n 12: '0px 12px 17px 2px',\n 13: '0px 13px 19px 2px',\n 14: '0px 14px 21px 2px',\n 15: '0px 15px 22px 2px',\n 16: '0px 16px 24px 2px',\n 17: '0px 17px 26px 2px',\n 18: '0px 18px 28px 2px',\n 19: '0px 19px 29px 2px',\n 20: '0px 20px 31px 3px',\n 21: '0px 21px 33px 3px',\n 22: '0px 22px 35px 3px',\n 23: '0px 23px 36px 3px',\n 24: '0px 24px 38px 3px',\n) !default;\n\n$ambient-map: (\n 0: '0px 0px 0px 0px',\n 1: '0px 1px 3px 0px',\n 2: '0px 1px 5px 0px',\n 3: '0px 1px 8px 0px',\n 4: '0px 1px 10px 0px',\n 5: '0px 1px 14px 0px',\n 6: '0px 1px 18px 0px',\n 7: '0px 2px 16px 1px',\n 8: '0px 3px 14px 2px',\n 9: '0px 3px 16px 2px',\n 10: '0px 4px 18px 3px',\n 11: '0px 4px 20px 3px',\n 12: '0px 5px 22px 4px',\n 13: '0px 5px 24px 4px',\n 14: '0px 5px 26px 4px',\n 15: '0px 6px 28px 5px',\n 16: '0px 6px 30px 5px',\n 17: '0px 6px 32px 5px',\n 18: '0px 7px 34px 6px',\n 19: '0px 7px 36px 6px',\n 20: '0px 8px 38px 7px',\n 21: '0px 8px 40px 7px',\n 22: '0px 8px 42px 7px',\n 23: '0px 9px 44px 8px',\n 24: '0px 9px 46px 8px',\n) !default;\n\n// The css property used for elevation. In most cases this should not be changed. It is exposed\n// as a variable for abstraction / easy use when needing to reference the property directly, for\n// example in a `will-change` rule.\n$property: box-shadow !default;\n\n// The default color for the elevation overlay.\n$overlay-color: #fff;\n\n// The css property used for elevation overlay transitions. In most cases this should not be changed. It is exposed\n// as a variable for abstraction / easy use when needing to reference the property directly, for\n// example in a `will-change` rule.\n$overlay-property: opacity !default;\n\n// The default duration value for elevation transitions.\n$transition-duration: 280ms !default;\n\n// The default easing value for elevation transitions.\n$transition-timing-function: animation-variables.$standard-curve-timing-function !default;\n\n///\n/// Sets the elevation transition value.\n///\n/// @param {String} $duration - The duration of the transition.\n/// @param {String} $easing - The easing function for the transition.\n/// @return {String}\n///\n@function transition-value(\n $duration: $transition-duration,\n $easing: $transition-timing-function\n) {\n @return #{$property} #{$duration} #{$easing};\n}\n\n///\n/// Sets the elevation overlay transition value.\n///\n/// @param {String} $duration - The duration of the transition.\n/// @param {String} $easing - The easing function for the transition.\n/// @return {String}\n///\n@function overlay-transition-value(\n $duration: $transition-duration,\n $easing: $transition-timing-function\n) {\n @return #{$overlay-property} #{$duration} #{$easing};\n}\n\n///\n/// Creates a box-shadow from the Material elevation system.\n/// @param {Number} $level - the level of the Material elevation system.\n/// @param {String} $color - the color of the shadow.\n/// @param {Number} $opacity-boost [0] - optional opacity boost for the shadow.\n/// @return {List} the complete box shadow.\n///\n@function _box-shadow($level, $color, $opacity-boost: 0) {\n $color: theme-color.prop-value($color);\n $umbra-z-value: map.get($umbra-map, $level);\n $penumbra-z-value: map.get($penumbra-map, $level);\n $ambient-z-value: map.get($ambient-map, $level);\n\n $umbra-color: rgba($color, $umbra-opacity + $opacity-boost);\n $penumbra-color: rgba($color, $penumbra-opacity + $opacity-boost);\n $ambient-color: rgba($color, $ambient-opacity + $opacity-boost);\n\n @return (\n #{'#{$umbra-z-value} #{$umbra-color}'},\n #{'#{$penumbra-z-value} #{$penumbra-color}'},\n #{$ambient-z-value} $ambient-color\n );\n}\n\n// Returns the correct box-shadow specified by $z-value.\n// The $z-value must be between 0 and 24.\n// If $color has an alpha channel, it will be ignored and overridden. To increase the opacity of the shadow, use\n// $opacity-boost.\n@function elevation-box-shadow(\n $z-value,\n $color: $baseline-color,\n $opacity-boost: 0\n) {\n @if meta.type-of($z-value) != number or not math.is-unitless($z-value) {\n @error \"$z-value must be a unitless number, but received '#{$z-value}'\";\n }\n\n @if $z-value < 0 or $z-value > 24 {\n @error \"$z-value must be between 0 and 24, but received '#{$z-value}'\";\n }\n\n @return _box-shadow($z-value, $color, $opacity-boost);\n}\n\n///\n/// Returns a shadow or null if params are invalid.\n/// @param {Number} $level - the level of the Material elevation system.\n/// @param {String} $color - the color of the shadow.\n/// @return {List|null} the complete box shadow or null.\n///\n@function _shadow($level, $color) {\n @if $level == null and $color == null {\n // Do not emit a warning if both are null, which means the user did not\n // provide tokens.\n @return null;\n }\n\n @if $level == null or $color == null {\n // If one of the tokens is null, emit a warning: the user may not realize\n // that both are required.\n @warn \"both $level and $color are required; received $level: '#{$level}', $color: '#{$color}'\";\n @return null;\n }\n\n @if $level < 0 or $level > 24 {\n @warn \"$level must be between 0 and 24; received '#{$level}'\";\n @return null;\n }\n\n @return _box-shadow($level, $color);\n}\n\n@function get-elevation($level) {\n @return (box-shadow: elevation-box-shadow($level));\n}\n\n///\n/// Sets the shadow of the element.\n///\n/// @param {String} $box-shadow - The shadow to apply to the element.\n///\n@mixin _box-shadow($shadow, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n\n @include feature-targeting.targets($feat-color) {\n @include theme.property(box-shadow, $shadow);\n }\n}\n\n///\n/// Sets the shadow of the element.\n///\n/// @param {String} $box-shadow - The shadow to apply to the element.\n///\n@mixin shadow($box-shadow, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n\n @include feature-targeting.targets($feat-color) {\n @if custom-properties.is-custom-prop($box-shadow) {\n // TODO(b/185188458): Use theme.property() once resolved.\n $fallback: custom-properties.get-fallback($box-shadow);\n\n // var(--<box-shadow-prop>, var(--m-elevation-box-shadow-for-gss))\n $gss-custom-prop: custom-properties.create(\n custom-properties.get-varname($box-shadow),\n custom-properties.create(elevation-box-shadow-for-gss)\n );\n\n $value: custom-properties.create-var($gss-custom-prop);\n @if $value == null {\n // Custom properties are disabled, since $gss-custom-prop\n // does not have a fallback. Avoid emitting two non-custom\n // prop declarations by setting $fallback to null.\n $value: $fallback;\n $fallback: null;\n }\n\n @include custom-properties.declaration(\n custom-properties.create(elevation-box-shadow-for-gss, $fallback)\n );\n @include css.declaration(box-shadow, $value, $fallback-value: $fallback);\n } @else {\n /* @alternate */\n box-shadow: $box-shadow;\n }\n }\n}\n\n///\n/// Sets the elevation overlay surface required positioning.\n///\n@mixin overlay-surface-position($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n /* @alternate */\n position: relative;\n }\n}\n\n///\n/// Sets the dimensions of the elevation overlay, including positioning and sizing.\n///\n/// @param {Number} $width - The width of the elevation overlay\n/// @param {Number} [$height] - The height of the elevation overlay\n/// @param {Boolean} [$has-content-sizing] - Set to false if the container has no content sizing\n///\n@mixin overlay-dimensions(\n $width,\n $height: $width,\n $has-content-sizing: true,\n $query: feature-targeting.all()\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-elevation-overlay {\n @include feature-targeting.targets($feat-structure) {\n @include theme.property(width, $width);\n @include theme.property(height, $height);\n\n @if $has-content-sizing {\n top: 0;\n @include rtl.ignore-next-line();\n left: 0;\n } @else {\n top: 50%;\n @include rtl.ignore-next-line();\n left: 50%;\n transform: translate(-50%, -50%);\n }\n }\n }\n}\n\n///\n/// Sets the elevation overlay fill color.\n/// Expected to be called directly on the elevation overlay element.\n///\n/// @param {Color} $color - The color of the elevation overlay.\n///\n@mixin overlay-fill-color($color, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n\n @include feature-targeting.targets($feat-color) {\n @include theme.property(background-color, $color);\n }\n}\n\n///\n/// Applies the given color to the container of the overlay.\n/// @param {color} $color - the color of the overlay container\n///\n@mixin overlay-container-color($color, $query: feature-targeting.all()) {\n .mdc-elevation-overlay {\n @include overlay-fill-color($color, $query: $query);\n }\n}\n\n///\n/// Sets the elevation overlay opacity.\n/// Expected to be called from a parent element.\n///\n/// @param {Number} $opacity - The opacity of the elevation overlay.\n///\n@mixin overlay-opacity($opacity, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n\n .mdc-elevation-overlay {\n @include feature-targeting.targets($feat-color) {\n @include theme.property(opacity, $opacity);\n }\n }\n}\n\n// Applies the correct CSS rules to an element to give it the elevation specified by $z-value.\n// The $z-value must be between 0 and 24.\n// If $color has an alpha channel, it will be ignored and overridden. To increase the opacity of the shadow, use\n// $opacity-boost.\n@mixin elevation(\n $z-value,\n $color: $baseline-color,\n $opacity-boost: 0,\n $query: feature-targeting.all()\n) {\n $box-shadow: elevation-box-shadow(\n $z-value,\n $color: $color,\n $opacity-boost: $opacity-boost\n );\n\n @include shadow($box-shadow, $query: $query);\n}\n\n///\n/// Represents the configurable values of the elevation theme.\n///\n$_theme-values: (\n shadow: null,\n overlay-opacity: null,\n overlay-color: null,\n);\n\n///\n/// Applies the shadow theme with the given $resolver function.\n/// @param {Function} $resolver - a function that returns a valid theme config.\n/// @see resolver for an example and expected arguments and return value.\n/// Accepts the following optional keyword args:\n/// @param {Number} $elevation - the level in the elevation system.\n/// @param {String} $shadow-color - the color used for the shadow.\n///\n@mixin with-resolver($resolver, $query: feature-targeting.all(), $args...) {\n @if $resolver {\n @include _theme(meta.call($resolver, $args...), $query: $query);\n }\n}\n\n///\n/// Applies the given theme with validation.\n/// @param {Map} $theme - @see $_theme-values for accepted theme properties.\n///\n@mixin theme($theme: (), $query: feature-targeting.all()) {\n @include theme.validate-theme($_theme-values, $theme);\n @include _theme($theme, $query: $query);\n}\n\n///\n/// Applies the given theme.\n/// @param {Map} $theme - @see $_theme-values for accepted theme properties.\n///\n@mixin _theme($theme: (), $query: feature-targeting.all()) {\n @include shadow(map.get($theme, shadow), $query: $query);\n @include overlay-opacity(map.get($theme, overlay-opacity), $query: $query);\n @include overlay-container-color(\n map.get($theme, overlay-color),\n $query: $query\n );\n}\n\n///\n/// Transforms the following optional parameters into a theme config.\n/// @param {Number} $elevation - the level of the elevation system in Material.\n/// @param {String} $shadow-color - the color to be used by the shadow.\n/// @return {Map} @see $_theme-values for accepted theme properties.\n///\n@function resolver($args...) {\n $opts: meta.keywords($args);\n $elevation: map.get($opts, elevation);\n $shadow-color: map.get($opts, shadow-color);\n @if custom-properties.is-custom-prop($elevation) {\n @return _resolve-custom-props($elevation, $shadow-color);\n }\n\n @return (shadow: _shadow($elevation, $shadow-color));\n}\n\n@function _resolve-custom-props($elevation, $shadow-color) {\n $fallback-dp: custom-properties.get-fallback($elevation);\n $fallback-shadow-color: custom-properties.get-fallback($shadow-color);\n $shadow: custom-properties.set-fallback(\n $elevation,\n _shadow($fallback-dp, $fallback-shadow-color)\n );\n @return (shadow: $shadow);\n}\n"],"sourceRoot":""} |