{"version":3,"sources":["webpack:///./packages/mdc-slider/styles.scss","webpack:///./packages/material-components-web/node_modules/@material/animation/_animation.scss","webpack:///./packages/material-components-web/node_modules/@material/theme/_gss.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/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"],"names":[],"mappings":";;;;;;;AAiTE;EACE;IACE,+DC5R2B;YD4R3B,uDC5R2B;ICoC7B;IAAc;IF8PZ;YAAA;EGnTJ;EHsTE;IEjQA;IAAc;IFmQZ;YAAA;EGnTJ;AACF;AHqSE;EACE;IACE,+DC5R2B;YD4R3B,uDC5R2B;ICoC7B;IAAc;IF8PZ;YAAA;EGnTJ;EHsTE;IEjQA;IAAc;IFmQZ;YAAA;EGnTJ;AACF;AHuTE;EACE;IACE;YAAA;IACA;EGrTJ;EHwTE;IACE;EGtTJ;AACF;AH8SE;EACE;IACE;YAAA;IACA;EGrTJ;EHwTE;IACE;EGtTJ;AACF;AHyTE;EACE;IACE;YAAA;IACA;EGvTJ;EH0TE;IACE;EGxTJ;AACF;AHgTE;EACE;IACE;YAAA;IACA;EGvTJ;EH0TE;IACE;EGxTJ;AACF;AC4CE;EJwCE;EACA;EACA;EACA;EACA;EACA;EAEA;EAGE;AGpFN;AHwFE;EAGI;EACA;EACA;EACA;EACA;AGxFN;AH4FE;EAGI;EK5EA;EHZF;EGwBA;AFzBJ;AHsGE;EKzFI;EHZF;EGwBA;AFpBJ;AH6GI;EAEI;UAAA;AG5GR;AHgHI;EAEI;EEpHJ;EAAc;EFsHV;EACA;UAAA;EACA;UAAA;AG9GR;AHoHI;EAEI;EEhIJ;EAAc;EFkIV;AGlHR;AHwHI;EAEI;UAAA;AGvHR;AH+HI;EAEI;UAAA;EEpJJ;EAAc;EF0JV;UAAA;AGjIR;AH2KE;EAGI;EEvMF;EAAc;EFyMZ;EACA,WAZK;EAaL,YAbK;AG7JX;AH+KI;EAGI;EEnNJ;EAAc;EFqNV;EACA;EACA;AG9KR;AHkLI;EAEI;EACA;AGjLR;AGkDI;EDxFE;EHZF;EGwBA;AF+BJ;AGqbE;EDheI;EHZF;EGwBA;AFoCJ;AGgbE;EA9QI;EDlNA;EHZF;EGwBA;AF0CJ;AGsLM;EAEI;AHrLV;AG0LQ;EAEI,yBA/QO;ED0Bb;EHZF;EGwBA;AFmDJ;AGiMI;EDpPA;AFsDJ;;AC9CE;EAMI;EACA,YAvDe;EAwDf;EACA;EACA;AD4CN;ACEE;EAEI;EACA;EACA;UAAA;EACA;ADDN;ACKE;;EAGI;EACA;EACA;EACA;ADJN;ACQE;EAEI;ADPN;ACWE;EAGI;EACA;EACA;EACA;EACA;EFnHF;EAAc;EEqHZ;EFrHF;EAAc;EEuHZ;ADTN;AIzFM;EACE;ELtBJ;EAAc;EE2HV;EF3HJ;EAAc;EE6HV;EGrGA;AJgGR;;ACUE;EAMI;EACA;ADZN;ACMI;EItJA;EACA;EACA;EACA;EACA;ENeA;EAAc;EMbd;EACA;EACA;EACA;EACA;ALoJJ;AKrGI;EJ6FA;IItIE;ELkJJ;AACF;ACoEE;EAEI;EFtNF;EAAc;EGOZ;EHZF;EAKA;EAAc;EGmBd;ED2ME;EACA;EF/NF;EAAc;EGmBd;EHnBA;EAAc;EGOZ;UAAA;EHZF;EAKA;EAAc;EGmBd;UAAA;AFmJJ;ACwEE;EAEI;EAAA;EAAA;EAIA;EACA;EACA;EACA;EACA;EACA;UAAA;EACA;UAAA;AD1EN;AC8EI;EAEI;EACA;EACA;EACA;EACA;EACA;EFrQJ;EAAc;EGOZ;EHZF;EAKA;EAAc;EGmBd;EDyPI;EF5QJ;EAAc;EGmBd;EHnBA;EAAc;EGOZ;UAAA;EHZF;EAKA;EAAc;EGmBd;UAAA;EDqQI;AD7ER;ACiFI;EI/SA;EACA;EACA;EACA;EACA;ENeA;EAAc;EMbd;EACA;EACA;EACA;EACA;ALkOJ;AKnLI;EJsPA;II/RE;ELgOJ;AACF;ACoEI;EAEI;ADnER;ACuEI;EAEI;EAAA;EAAA;EAIA;UAAA;ADzER;AC8EE;EACE;;IAGI;ED7EN;AACF;ACvFE;EAEI;EFtJF;EAAc;EEwJZ;EACA;EACA;EACA;KAAA;MAAA;UAAA;EACA,YAjLe;EAkLf,WAlLe;AD2QrB;ACtFI;EAEI;ADuFR;ACnFI;EAII;EACA;EACA;ADkFR;AC7EE;EAEI;EFnLF;EAAc;EEqLZ;EACA;EACA;EFvLF;EAAc;EEyLZ;UAAA;ADgFN;ACvEE;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ADwEN;AC1OM;;EAGI;EAAA;EAAA;AD2OV;ACvOM;EACE;;IAGI;EDwOV;AACF;;AClOE;EAuQE;ADjCJ;ACoCE;EAEI;ADnCN;;ACrOE;EAII;EACA,SAJO;EAKP;EACA,YALK;EAML;EACA;EACA;EACA,QAVO;EAWP,WAVK;AD+OX;;AMpBI;EJrRE;EHZF;EGwBA;EAZE;EHZF;EGwBA;AFsSJ;AMvBM;EAGE;ANuBR;AMhCI;EJrRE;EHZF;EGwBA;EAZE;EHZF;EGwBA;AFiTJ;AMlCM;EAGE;ANkCR;AGxOI;EDxFE;EHZF;EGwBA;AFyTJ;AG2JE;EDheI;EHZF;EGwBA;AF8TJ;AGsJE;EA9QI;EDlNA;EHZF;EGwBA;AFoUJ;AGpGM;EAEI;AHqGV;AGhGQ;EAEI,yBA/QO;ED0Bb;EHZF;EGwBA;AF6UJ;AGzFI;EDpPA;AFgVJ;AMhJE;EJ5MI;EHZF;EGwBA;AFqVJ;AMrJE;EJ5MI;EHZF;EGwBA;AF0VJ;AMnHE;EJnPI;EHZF;EGwBA;EI2OE,aAvQmB;AN4XzB;AMzHE;EJnPI;EHZF;EGwBA;EI2OE,aAvQmB;ANkYzB;AMtBE;EJ5VI;EHZF;EGwBA;EAZE;EHZF;EGwBA;AF8WJ;AM9BE;EJ5VI;EHZF;EGwBA;EAZE;EHZF;EGwBA;AFsXJ;AMME;EJxYI;EHZF;EGwBA;EAZE;EHZF;EGwBA;AF8XJ;AMFE;EJxYI;EHZF;EGwBA;EAZE;EHZF;EGwBA;AFsYJ;AMWE;EJ7ZI;EHZF;EGwBA;EIqZE,UArTQ;AN4Sd;AMcE;EJtaI;EHZF;EGwBA;AFiZJ;AMwBE;EJrbI;EHZF;EGwBA;AFsZJ;AM7SE;EJrHI;EHZF;EGwBA;AF2ZJ;AM5SE;EJ3HI;EHZF;EGwBA;EAZE;EHZF;EGwBA;AFmaJ;AMrSE;EJ1II;EHZF;EGwBA;AFwaJ;AMhSE;EJpJI;EHZF;EGwBA;AF6aJ;AM/RE;;EJ1JI;EHZF;EGwBA;EAZE;EHZF;EGwBA;AFsbJ;AMHE;EJnbE;AFybJ;AMQE;EJ7cI;EHZF;EGwBA;EAZE;EHZF;EGwBA;EAZE;EHZF;EGwBA;EAZE;EHZF;EGwBA;EAZE;EHZF;EGwBA;AF0cJ;AMUE;EJheI;EHZF;EGwBA;AF+cJ;AMeE;EJ1eI;EHZF;EGwBA;AFodJ;AMgBE;EJhfI;EHZF;EGwBA;EAZE;EHZF;EGwBA;EAZE;EHZF;EGwBA;EAAA;EAZE;EHZF;EGwBA;AFmeJ;AMgBE;;EJ/fI;EHZF;EGwBA;AFyeJ;AM6BE;EJlhBI;EHZF;EGwBA;AF8eJ;AMrOI;EJrRE;EHZF;EGwBA;EAZE;EHZF;EGwBA;AFsfJ;AMvOM;EAGE;ANuOR;AMhPI;EJrRE;EHZF;EGwBA;EAZE;EHZF;EGwBA;AFigBJ;AMlPM;EAGE;ANkPR;AMrPM;EAGE;ANqPR;AMuDM;EJ1kBA;EHZF;EGwBA;EAZE;EHZF;EGwBA;AF+gBJ,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        @include rtl.ignore-next-line();\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      @include rtl.ignore-next-line();\n      transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);\n    }\n\n    to {\n      @include rtl.ignore-next-line();\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","//\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","@keyframes mdc-ripple-fg-radius-in {\n  from {\n    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    /* @noflip */\n    /*rtl:ignore*/\n    transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);\n  }\n  to {\n    /* @noflip */\n    /*rtl:ignore*/\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  /* @noflip */\n  /*rtl:ignore*/\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  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  overflow: hidden;\n}\n.mdc-slider .mdc-slider__track--active_fill {\n  border-top-style: 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  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  /* @noflip */\n  /*rtl:ignore*/\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__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  /* @noflip */\n  /*rtl:ignore*/\n  transform: translateX(-50%);\n  /* @alternate */\n  /* @noflip */\n  /*rtl:ignore*/\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  /* @noflip */\n  /*rtl:ignore*/\n  transform: translateX(-50%);\n  /* @alternate */\n  /* @noflip */\n  /*rtl:ignore*/\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  /* @noflip */\n  /*rtl:ignore*/\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__thumb {\n  display: flex;\n  /* @noflip */\n  /*rtl:ignore*/\n  left: -24px;\n  outline: none;\n  position: absolute;\n  user-select: none;\n  height: 48px;\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  box-sizing: border-box;\n  /* @noflip */\n  /*rtl:ignore*/\n  left: 50%;\n  position: absolute;\n  top: 50%;\n  /* @noflip */\n  /*rtl:ignore*/\n  transform: translate(-50%, -50%);\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--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  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: 2px;\n  margin: 0;\n  height: 44px;\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  top: 2px;\n  width: 44px;\n}\n\n.mdc-slider .mdc-slider__thumb-knob {\n  background-color: #6200ee;\n  /* @alternate */\n  background-color: var(--mdc-slider-handle-color, var(--mdc-theme-primary, #6200ee));\n  border-color: #6200ee;\n  /* @alternate */\n  border-color: var(--mdc-slider-handle-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-slider-disabled-handle-color, var(--mdc-theme-on-surface, #000));\n  border-color: #000;\n  /* @alternate */\n  border-color: var(--mdc-slider-disabled-handle-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-slider-handle-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__track--active_fill {\n  border-color: #6200ee;\n  /* @alternate */\n  border-color: var(--mdc-slider-active-track-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-slider-disabled-active-track-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-slider-inactive-track-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-slider-disabled-inactive-track-color, var(--mdc-theme-on-surface, #000));\n  opacity: 0.24;\n}\n.mdc-slider .mdc-slider__tick-mark--active {\n  background-color: #fff;\n  /* @alternate */\n  background-color: var(--mdc-slider-with-tick-marks-active-container-color, var(--mdc-theme-on-primary, #fff));\n  opacity: 0.6;\n  /* @alternate */\n  opacity: var(--mdc-slider-with-tick-marks-active-container-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-slider-with-tick-marks-active-container-color, var(--mdc-theme-on-primary, #fff));\n  opacity: 0.6;\n  /* @alternate */\n  opacity: var(--mdc-slider-with-tick-marks-active-container-opacity, 0.6);\n}\n.mdc-slider .mdc-slider__tick-mark--inactive {\n  background-color: #6200ee;\n  /* @alternate */\n  background-color: var(--mdc-slider-with-tick-marks-inactive-container-color, var(--mdc-theme-primary, #6200ee));\n  opacity: 0.6;\n  /* @alternate */\n  opacity: var(--mdc-slider-with-tick-marks-inactive-container-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-slider-with-tick-marks-disabled-container-color, var(--mdc-theme-on-surface, #000));\n  opacity: 0.6;\n  /* @alternate */\n  opacity: var(--mdc-slider-with-tick-marks-inactive-container-opacity, 0.6);\n}\n.mdc-slider .mdc-slider__value-indicator {\n  background-color: #666666;\n  /* @alternate */\n  background-color: var(--mdc-slider-label-container-color, #666666);\n  opacity: 1;\n}\n.mdc-slider .mdc-slider__value-indicator::before {\n  border-top-color: #666666;\n  /* @alternate */\n  border-top-color: var(--mdc-slider-label-container-color, #666666);\n}\n.mdc-slider .mdc-slider__value-indicator {\n  color: #fff;\n  /* @alternate */\n  color: var(--mdc-slider-label-label-text-color, var(--mdc-theme-on-primary, #fff));\n}\n.mdc-slider .mdc-slider__track {\n  height: 4px;\n  /* @alternate */\n  height: var(--mdc-slider-inactive-track-height, 4px);\n}\n.mdc-slider .mdc-slider__track--active {\n  height: 6px;\n  /* @alternate */\n  height: var(--mdc-slider-active-track-height, 6px);\n  top: calc((4px - 6px) / 2);\n  /* @alternate */\n  top: calc((var(--mdc-slider-inactive-track-height, 4px) - var(--mdc-slider-active-track-height, 6px)) / 2);\n}\n.mdc-slider .mdc-slider__track--active_fill {\n  border-top-width: 6px;\n  /* @alternate */\n  border-top-width: var(--mdc-slider-active-track-height, 6px);\n}\n.mdc-slider .mdc-slider__track--inactive {\n  height: 4px;\n  /* @alternate */\n  height: var(--mdc-slider-inactive-track-height, 4px);\n}\n.mdc-slider .mdc-slider__tick-mark--active,\n.mdc-slider .mdc-slider__tick-mark--inactive {\n  height: 2px;\n  /* @alternate */\n  height: var(--mdc-slider-with-tick-marks-container-size, 2px);\n  width: 2px;\n  /* @alternate */\n  width: var(--mdc-slider-with-tick-marks-container-size, 2px);\n}\n.mdc-slider.mdc-slider--disabled {\n  opacity: 0.38;\n}\n.mdc-slider .mdc-slider__value-indicator-text {\n  letter-spacing: 0.0071428571em;\n  /* @alternate */\n  letter-spacing: var(--mdc-slider-label-label-text-tracking, 0.0071428571em);\n  font-size: 0.875rem;\n  /* @alternate */\n  font-size: var(--mdc-slider-label-label-text-size, 0.875rem);\n  font-family: Roboto, sans-serif;\n  /* @alternate */\n  font-family: var(--mdc-slider-label-label-text-font, Roboto, sans-serif);\n  font-weight: 500;\n  /* @alternate */\n  font-weight: var(--mdc-slider-label-label-text-weight, 500);\n  line-height: 1.375rem;\n  /* @alternate */\n  line-height: var(--mdc-slider-label-label-text-line-height, 1.375rem);\n}\n.mdc-slider .mdc-slider__track--active {\n  border-radius: 9999px;\n  /* @alternate */\n  border-radius: var(--mdc-slider-active-track-shape, 9999px);\n}\n.mdc-slider .mdc-slider__track--inactive {\n  border-radius: 9999px;\n  /* @alternate */\n  border-radius: var(--mdc-slider-inactive-track-shape, 9999px);\n}\n.mdc-slider .mdc-slider__thumb-knob {\n  border-radius: 50%;\n  /* @alternate */\n  border-radius: var(--mdc-slider-handle-shape, 50%);\n  width: 20px;\n  /* @alternate */\n  width: var(--mdc-slider-handle-width, 20px);\n  height: 20px;\n  /* @alternate */\n  height: var(--mdc-slider-handle-height, 20px);\n  border-style: solid;\n  border-width: calc(20px / 2) calc(20px / 2);\n  /* @alternate */\n  border-width: calc(var(--mdc-slider-handle-height, 20px) / 2) calc(var(--mdc-slider-handle-width, 20px) / 2);\n}\n.mdc-slider .mdc-slider__tick-mark--active,\n.mdc-slider .mdc-slider__tick-mark--inactive {\n  border-radius: 50%;\n  /* @alternate */\n  border-radius: var(--mdc-slider-with-tick-marks-container-shape, 50%);\n}\n.mdc-slider .mdc-slider__thumb-knob {\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  /* @alternate */\n  box-shadow: var(--mdc-slider-handle-elevation, 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}\n.mdc-slider .mdc-slider__thumb:hover .mdc-slider__thumb-knob {\n  background-color: #6200ee;\n  /* @alternate */\n  background-color: var(--mdc-slider-hover-handle-color, var(--mdc-theme-primary, #6200ee));\n  border-color: #6200ee;\n  /* @alternate */\n  border-color: var(--mdc-slider-hover-handle-color, var(--mdc-theme-primary, #6200ee));\n}\n.mdc-slider .mdc-slider__thumb:hover .mdc-slider__thumb--top .mdc-slider__thumb-knob, .mdc-slider .mdc-slider__thumb:hover .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob, .mdc-slider .mdc-slider__thumb:hover .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob {\n  border-color: #fff;\n}\n.mdc-slider .mdc-slider__thumb--focused .mdc-slider__thumb-knob {\n  background-color: #6200ee;\n  /* @alternate */\n  background-color: var(--mdc-slider-focus-handle-color, var(--mdc-theme-primary, #6200ee));\n  border-color: #6200ee;\n  /* @alternate */\n  border-color: var(--mdc-slider-focus-handle-color, var(--mdc-theme-primary, #6200ee));\n}\n.mdc-slider .mdc-slider__thumb--focused .mdc-slider__thumb--top .mdc-slider__thumb-knob, .mdc-slider .mdc-slider__thumb--focused .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob, .mdc-slider .mdc-slider__thumb--focused .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob {\n  border-color: #fff;\n}\n.mdc-slider .mdc-slider__thumb:not(:disabled):active .mdc-slider__thumb--top .mdc-slider__thumb-knob, .mdc-slider .mdc-slider__thumb:not(:disabled):active .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob, .mdc-slider .mdc-slider__thumb:not(:disabled):active .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob {\n  border-color: #fff;\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  /* @alternate */\n  border-color: var(--mdc-slider-with-overlap-handle-outline-color, #fff);\n  border-width: 1px;\n  /* @alternate */\n  border-width: var(--mdc-slider-with-overlap-handle-outline-width, 1px);\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/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-structure: feature-targeting.create-target($query, structure);\n\n  @include static-styles($query: $query);\n\n  .mdc-slider {\n    @include slider-theme.theme-styles(\n      slider-theme.$light-theme,\n      $query: $query\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 static-styles($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    $indent: 2px;\n    $size: $_thumb-ripple-size - 2 * $indent;\n    @include feature-targeting.targets($feat-structure) {\n      cursor: pointer;\n      left: $indent;\n      margin: 0;\n      height: $size;\n      opacity: 0;\n      pointer-events: none;\n      position: absolute;\n      top: $indent;\n      width: $size;\n    }\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      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      overflow: hidden;\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-style: 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      left: 0;\n      top: 0;\n    }\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      @include rtl.ignore-next-line();\n      left: math.div(-$_thumb-ripple-size, 2);\n      outline: none;\n      position: absolute;\n      user-select: none;\n      height: $_thumb-ripple-size;\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 feature-targeting.targets($feat-structure) {\n      box-sizing: border-box;\n      @include rtl.ignore-next-line();\n      left: 50%;\n      position: absolute;\n      top: 50%;\n      @include rtl.ignore-next-line();\n      transform: translate(-50%, -50%);\n    }\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\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        $gss: (noflip: true)\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          $gss: (noflip: true)\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\n// Styles for slider in disabled state.\n@mixin _disabled($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\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 2016 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:color';\n@use 'sass:map';\n@use '@material/animation/functions' as functions2;\n@use '@material/animation/variables' as variables2;\n@use '@material/base/mixins' as base-mixins;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/theme/css';\n@use '@material/theme/custom-properties';\n@use '@material/theme/theme';\n@use '@material/theme/keys';\n@use '@material/theme/shadow-dom';\n@use '@material/theme/theme-color';\n\n$custom-property-prefix: 'ripple';\n\n$fade-in-duration: 75ms !default;\n$fade-out-duration: 150ms !default;\n$translate-duration: 225ms !default;\n$states-wash-duration: 15ms !default;\n\n// Notes on states:\n// * focus takes precedence over hover (i.e. if an element is both focused and hovered, only focus value applies)\n// * press state applies to a separate pseudo-element, so it has an additive effect on top of other states\n// * selected/activated are applied additively to hover/focus via calculations at preprocessing time\n\n$dark-ink-opacities: (\n  hover: 0.04,\n  focus: 0.12,\n  press: 0.12,\n  selected: 0.08,\n  activated: 0.12,\n) !default;\n\n$light-ink-opacities: (\n  hover: 0.08,\n  focus: 0.24,\n  press: 0.24,\n  selected: 0.16,\n  activated: 0.24,\n) !default;\n\n// Legacy\n\n$pressed-dark-ink-opacity: 0.16 !default;\n$pressed-light-ink-opacity: 0.32 !default;\n\n// State selector variables used for state selector mixins below.\n$_hover-selector: '&:hover';\n$_focus-selector: '&.mdc-ripple-upgraded--background-focused, &:not(.mdc-ripple-upgraded):focus';\n$_active-selector: '&:not(:disabled):active';\n\n$light-theme: (\n  focus-state-layer-color: theme-color.$on-surface,\n  focus-state-layer-opacity: map.get($dark-ink-opacities, focus),\n  hover-state-layer-color: theme-color.$on-surface,\n  hover-state-layer-opacity: map.get($dark-ink-opacities, hover),\n  pressed-state-layer-color: theme-color.$on-surface,\n  pressed-state-layer-opacity: map.get($dark-ink-opacities, press),\n);\n\n@mixin theme($theme) {\n  @include keys.declare-custom-properties(\n    $theme,\n    $prefix: $custom-property-prefix\n  );\n\n  @if shadow-dom.$css-selector-fallback-declarations {\n    .mdc-ripple-surface {\n      @include theme-styles($theme);\n    }\n  }\n}\n\n$_ripple-theme: (\n  hover-state-layer-color: null,\n  focus-state-layer-color: null,\n  pressed-state-layer-color: null,\n  hover-state-layer-opacity: null,\n  focus-state-layer-opacity: null,\n  pressed-state-layer-opacity: null,\n);\n\n@mixin theme-styles($theme, $ripple-target: '&') {\n  $theme: keys.create-theme-properties(\n    $theme,\n    $prefix: $custom-property-prefix\n  );\n\n  // TODO(b/191298796): Support states layer color for every interactive states.\n  // Use only hover state layer color, ignoring focus and pressed color.\n  @include internal-theme-styles($theme, $ripple-target);\n}\n\n@mixin internal-theme-styles($theme, $ripple-target: '&') {\n  @include theme.validate-theme-styles($_ripple-theme, $theme);\n\n  @include states-base-color(\n    map.get($theme, hover-state-layer-color),\n    $ripple-target: $ripple-target\n  );\n  @include states-hover-opacity(\n    map.get($theme, hover-state-layer-opacity),\n    $ripple-target: $ripple-target\n  );\n  @include states-focus-opacity(\n    map.get($theme, focus-state-layer-opacity),\n    $ripple-target: $ripple-target\n  );\n  @include states-press-opacity(\n    map.get($theme, pressed-state-layer-opacity),\n    $ripple-target: $ripple-target\n  );\n}\n\n@mixin states-base-color(\n  $color,\n  $query: feature-targeting.all(),\n  $ripple-target: '&'\n) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @if $color {\n    @if not custom-properties.is-custom-prop($color) {\n      $color: custom-properties.create(\n        ripple-color,\n        theme-color.get-custom-property($color)\n      );\n    }\n\n    #{$ripple-target}::before,\n    #{$ripple-target}::after {\n      @include feature-targeting.targets($feat-color) {\n        @include theme.property(background-color, $color);\n      }\n    }\n  }\n}\n\n///\n/// Customizes ripple opacities in `hover`, `focus`, or `press` states\n/// @param {map} $opacity-map - map specifying custom opacity of zero or more states\n/// @param {bool} $has-nested-focusable-element - whether the component contains a focusable element in the root\n/// @param {string} $ripple-target - the optional selector for the ripple element\n///\n@mixin states-opacities(\n  $opacity-map: (),\n  $has-nested-focusable-element: false,\n  $ripple-target: '&',\n  $query: feature-targeting.all()\n) {\n  // Ensure sufficient specificity to override base state opacities\n  @if map.get($opacity-map, hover) {\n    @include states-hover-opacity(\n      map.get($opacity-map, hover),\n      $ripple-target: $ripple-target,\n      $query: $query\n    );\n  }\n\n  @if map.get($opacity-map, focus) {\n    @include states-focus-opacity(\n      map.get($opacity-map, focus),\n      $ripple-target: $ripple-target,\n      $has-nested-focusable-element: $has-nested-focusable-element,\n      $query: $query\n    );\n  }\n\n  @if map.get($opacity-map, press) {\n    @include states-press-opacity(\n      map.get($opacity-map, press),\n      $ripple-target: $ripple-target,\n      $query: $query\n    );\n  }\n}\n\n@mixin states-hover-opacity(\n  $opacity,\n  $query: feature-targeting.all(),\n  $ripple-target: '&'\n) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @if $opacity and not custom-properties.is-custom-prop($opacity) {\n    $opacity: custom-properties.create(ripple-hover-opacity, $opacity);\n  }\n\n  // Background wash styles, for both CSS-only and upgraded stateful surfaces\n  &:hover,\n  &.mdc-ripple-surface--hover {\n    @include states-background-selector($ripple-target) {\n      // Opacity falls under color because the chosen opacity is color-dependent in typical usage\n      @include feature-targeting.targets($feat-color) {\n        @include theme.property(opacity, $opacity);\n      }\n    }\n  }\n}\n\n@mixin states-focus-opacity(\n  $opacity,\n  $has-nested-focusable-element: false,\n  $query: feature-targeting.all(),\n  $ripple-target: '&'\n) {\n  // Focus overrides hover by reusing the ::before pseudo-element.\n  // :focus-within generally works on non-MS browsers and matches when a *child* of the element has focus.\n  // It is useful for cases where a component has a focusable element within the root node, e.g. text field,\n  // but undesirable in general in case of nested stateful components.\n  // We use a modifier class for JS-enabled surfaces to support all use cases in all browsers.\n  @if $has-nested-focusable-element {\n    // JS-enabled selectors.\n    &.mdc-ripple-upgraded--background-focused,\n    // CSS-only selectors.\n    &:not(.mdc-ripple-upgraded):focus,\n    &:focus-within {\n      @include states-background-selector($ripple-target) {\n        @include states-focus-opacity-properties_(\n          $opacity: $opacity,\n          $query: $query\n        );\n      }\n    }\n  } @else {\n    // JS-enabled selectors.\n    &.mdc-ripple-upgraded--background-focused,\n    // CSS-only selectors.\n    &:not(.mdc-ripple-upgraded):focus {\n      @include states-background-selector($ripple-target) {\n        @include states-focus-opacity-properties_(\n          $opacity: $opacity,\n          $query: $query\n        );\n      }\n    }\n  }\n}\n\n@mixin states-focus-opacity-properties_($opacity, $query) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n  // Opacity falls under color because the chosen opacity is color-dependent in typical usage\n  $feat-color: feature-targeting.create-target($query, color);\n\n  @if $opacity {\n    @if not custom-properties.is-custom-prop($opacity) {\n      $opacity: custom-properties.create(ripple-focus-opacity, $opacity);\n    }\n\n    // Note that this duration is only effective on focus, not blur\n    @include feature-targeting.targets($feat-animation) {\n      transition-duration: 75ms;\n    }\n\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(opacity, $opacity);\n    }\n  }\n}\n\n@mixin states-press-opacity(\n  $opacity,\n  $query: feature-targeting.all(),\n  $ripple-target: '&'\n) {\n  $feat-animation: feature-targeting.create-target($query, animation);\n  $feat-color: feature-targeting.create-target($query, color);\n\n  // Styles for non-upgraded (CSS-only) stateful surfaces\n\n  @if $opacity {\n    @if not custom-properties.is-custom-prop($opacity) {\n      $opacity: custom-properties.create(ripple-press-opacity, $opacity);\n    }\n\n    &:not(.mdc-ripple-upgraded) {\n      // Apply press additively by using the ::after pseudo-element\n      #{$ripple-target}::after {\n        @include feature-targeting.targets($feat-animation) {\n          transition: opacity $fade-out-duration linear;\n        }\n      }\n\n      &:active {\n        #{$ripple-target}::after {\n          @include feature-targeting.targets($feat-animation) {\n            transition-duration: $fade-in-duration;\n          }\n\n          // Opacity falls under color because the chosen opacity is color-dependent in typical usage\n          @include feature-targeting.targets($feat-color) {\n            @include theme.property(opacity, $opacity);\n          }\n        }\n      }\n    }\n\n    &.mdc-ripple-upgraded {\n      @include feature-targeting.targets($feat-color) {\n        // Upgraded ripple should always emit custom property, regardless of\n        // configuration, since ripple itself feature detects custom property\n        // support at runtime.\n        @include custom-properties.configure($emit-custom-properties: true) {\n          @include theme.property(\n            custom-properties.create(ripple-fg-opacity, $opacity)\n          );\n        }\n      }\n    }\n  }\n}\n\n// Simple mixin for base states which automatically selects opacity values based on whether the ink color is\n// light or dark.\n@mixin states(\n  $color: theme-color.prop-value(on-surface),\n  $has-nested-focusable-element: false,\n  $query: feature-targeting.all(),\n  $ripple-target: '&',\n  $opacity-map: null\n) {\n  @include states-interactions_(\n    $color: $color,\n    $has-nested-focusable-element: $has-nested-focusable-element,\n    $query: $query,\n    $ripple-target: $ripple-target,\n    $opacity-map: $opacity-map\n  );\n}\n\n// Simple mixin for activated states which automatically selects opacity values based on whether the ink color is\n// light or dark.\n@mixin states-activated(\n  $color,\n  $has-nested-focusable-element: false,\n  $query: feature-targeting.all(),\n  $ripple-target: '&'\n) {\n  $feat-color: feature-targeting.create-target($query, color);\n  $activated-opacity: states-opacity($color, activated);\n\n  &--activated {\n    // Stylelint seems to think that '&' qualifies as a type selector here?\n    @include states-background-selector($ripple-target) {\n      // Opacity falls under color because the chosen opacity is color-dependent.\n      @include feature-targeting.targets($feat-color) {\n        @include theme.property(\n          opacity,\n          custom-properties.create(\n            --mdc-ripple-activated-opacity,\n            $activated-opacity\n          )\n        );\n      }\n    }\n\n    @include states-interactions_(\n      $color: $color,\n      $has-nested-focusable-element: $has-nested-focusable-element,\n      $opacity-modifier: $activated-opacity,\n      $query: $query,\n      $ripple-target: $ripple-target\n    );\n  }\n}\n\n// Simple mixin for selected states which automatically selects opacity values based on whether the ink color is\n// light or dark.\n@mixin states-selected(\n  $color,\n  $has-nested-focusable-element: false,\n  $query: feature-targeting.all(),\n  $ripple-target: '&'\n) {\n  $feat-color: feature-targeting.create-target($query, color);\n  $selected-opacity: states-opacity($color, selected);\n\n  &--selected {\n    @include states-background-selector($ripple-target) {\n      // Opacity falls under color because the chosen opacity is color-dependent.\n      @include feature-targeting.targets($feat-color) {\n        @include theme.property(\n          opacity,\n          custom-properties.create(\n            --mdc-ripple-selected-opacity,\n            $selected-opacity\n          )\n        );\n      }\n    }\n\n    @include states-interactions_(\n      $color: $color,\n      $has-nested-focusable-element: $has-nested-focusable-element,\n      $opacity-modifier: $selected-opacity,\n      $query: $query,\n      $ripple-target: $ripple-target\n    );\n  }\n}\n\n@mixin states-interactions_(\n  $color,\n  $has-nested-focusable-element,\n  $opacity-modifier: 0,\n  $query: feature-targeting.all(),\n  $ripple-target: '&',\n  $opacity-map: null\n) {\n  @include target-selector($ripple-target) {\n    @include states-base-color($color, $query);\n  }\n\n  @if $opacity-map == null {\n    $opacity-map: (\n      hover: states-opacity($color, hover) + $opacity-modifier,\n      focus: states-opacity($color, focus) + $opacity-modifier,\n      press: states-opacity($color, press) + $opacity-modifier,\n    );\n  }\n\n  @include states-opacities(\n    $opacity-map,\n    $has-nested-focusable-element: $has-nested-focusable-element,\n    $ripple-target: $ripple-target,\n    $query: $query\n  );\n}\n\n// Wraps content in the `ripple-target` selector if it exists.\n@mixin target-selector($ripple-target: '&') {\n  @if $ripple-target == '&' {\n    @content;\n  } @else {\n    #{$ripple-target} {\n      @content;\n    }\n  }\n}\n\n/// Selector for hover, active and focus states.\n@mixin states-selector() {\n  #{$_hover-selector},\n  #{$_focus-selector},\n  #{$_active-selector} {\n    @content;\n  }\n}\n\n@mixin hover() {\n  #{$_hover-selector} {\n    @content;\n  }\n}\n\n// Selector for focus state. Using ':not(.mdc-ripple-upgraded)' to continue\n// applying focus styles on JS-disabled components, and control focus\n// on JS-enabled components with '.mdc-ripple-upgraded--background-focused'.\n@mixin focus() {\n  #{$_focus-selector} {\n    @content;\n  }\n}\n\n// Selector for active state. Using `:active:active` to override focus styles.\n@mixin pressed() {\n  #{$_active-selector} {\n    @content;\n  }\n}\n\n// @deprecated Use `pressed()` mixin - renamed for consistency.\n@mixin active() {\n  @include pressed() {\n    @content;\n  }\n}\n\n/// Keep the ripple (State overlay) behind the content.\n@mixin behind-content(\n  $ripple-target,\n  $content-root-selector: '&',\n  $query: feature-targeting.all()\n) {\n  // Needed for IE11. Without this, IE11 renders the state layer completely\n  // underneath the container, making it invisible.\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  #{$content-root-selector} {\n    @include feature-targeting.targets($feat-structure) {\n      z-index: 0;\n    }\n  }\n\n  #{$ripple-target}::before,\n  #{$ripple-target}::after {\n    @include feature-targeting.targets($feat-structure) {\n      @include theme.property(\n        z-index,\n        custom-properties.create(--mdc-ripple-z-index, -1)\n      );\n    }\n  }\n}\n\n@function states-opacity($color, $state) {\n  $color-value: theme-color.prop-value($color);\n  $opacity-map: if(\n    theme-color.tone($color-value) == 'light',\n    $light-ink-opacities,\n    $dark-ink-opacities\n  );\n\n  @if not map.has-key($opacity-map, $state) {\n    @error \"Invalid state: '#{$state}'. Choose one of: #{map.keys($opacity-map)}\";\n  }\n\n  @return map.get($opacity-map, $state);\n}\n\n@mixin states-background-selector($ripple-target) {\n  #{$ripple-target}::before {\n    @content;\n  }\n}\n","//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@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@use '@material/rtl/rtl';\n\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    @include rtl.ignore-next-line();\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 'sass:color';\n@use 'sass:map';\n@use '@material/elevation/elevation-theme';\n@use '@material/elevation/mixins' as elevation-mixins;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/ripple/ripple-theme';\n@use '@material/theme/keys';\n@use '@material/theme/map-ext';\n@use '@material/theme/state';\n@use '@material/theme/theme';\n@use '@material/theme/theme-color';\n@use '@material/tokens/resolvers';\n@use '@material/typography/typography';\n\n/// Default color for slider (track, thumb, ripple).\n$color: primary;\n$disabled-color: on-surface;\n$disabled-slider-opacity: 0.38;\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$_custom-property-prefix: 'slider';\n\n$light-theme: (\n  active-track-color: $color,\n  active-track-height: 6px,\n  active-track-shape: 9999px,\n  disabled-active-track-color: $disabled-color,\n  disabled-handle-color: $disabled-color,\n  disabled-handle-elevation: null,\n  disabled-inactive-track-color: $disabled-color,\n  focus-handle-color: $color,\n  handle-color: $color,\n  handle-elevation: 1,\n  handle-height: 20px,\n  handle-shadow-color: black,\n  handle-shape: 50%,\n  handle-width: 20px,\n  hover-handle-color: $color,\n  inactive-track-color: $color,\n  inactive-track-height: 4px,\n  inactive-track-shape: 9999px,\n  label-container-color:\n    color.mix(\n      $value-indicator-color,\n      theme-color.prop-value(on-primary),\n      $value-indicator-opacity * 100%\n    ),\n  label-container-elevation: null,\n  label-container-height: null,\n  label-label-text-color: $value-indicator-text-color,\n  label-label-text-font: typography.get-font(subtitle2),\n  label-label-text-size: typography.get-size(subtitle2),\n  label-label-text-line-height: typography.get-line-height(subtitle2),\n  label-label-text-tracking: typography.get-tracking(subtitle2),\n  label-label-text-weight: typography.get-weight(subtitle2),\n  pressed-handle-color: null,\n  track-elevation: null,\n  with-overlap-handle-outline-color: #fff,\n  with-overlap-handle-outline-width: 1px,\n  with-tick-marks-active-container-color: $tick-mark-active-color,\n  with-tick-marks-active-container-opacity: $tick-mark-opacity,\n  with-tick-marks-container-shape: 50%,\n  with-tick-marks-container-size: 2px,\n  with-tick-marks-disabled-container-color: $disabled-color,\n  with-tick-marks-inactive-container-color: $tick-mark-inactive-color,\n  with-tick-marks-inactive-container-opacity: $tick-mark-opacity,\n  focus-state-layer-opacity: null,\n  hover-state-layer-color: null,\n  hover-state-layer-opacity: null,\n  pressed-state-layer-opacity: null,\n);\n\n@mixin theme($theme, $resolvers: resolvers.$material) {\n  @include theme.validate-theme($light-theme, $theme);\n  $theme: _resolve-theme-elevation-keys($theme, $resolvers: $resolvers);\n  @include keys.declare-custom-properties($theme, $_custom-property-prefix);\n}\n\n@mixin theme-styles(\n  $theme,\n  $query: feature-targeting.all(),\n  $resolvers: resolvers.$material\n) {\n  $feat-color: feature-targeting.create-target($query, color);\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $feat-typography: feature-targeting.create-target($query, typography);\n\n  @include theme.validate-theme-styles($light-theme, $theme);\n  $theme: keys.create-theme-properties($theme, $_custom-property-prefix);\n\n  @include thumb-color(\n    $color-or-map: (\n      default: map.get($theme, 'handle-color'),\n      disabled: map.get($theme, 'disabled-handle-color'),\n    ),\n    $query: $query\n  );\n\n  @include thumb-ripple-color(\n    $color: map.get($theme, 'handle-color'),\n    $query: $query\n  );\n\n  @include track-active-color(\n    $color-or-map: (\n      default: map.get($theme, 'active-track-color'),\n      disabled: map.get($theme, 'disabled-active-track-color'),\n    ),\n    $query: $query\n  );\n\n  @include track-inactive-color(\n    $color-or-map: (\n      default: map.get($theme, 'inactive-track-color'),\n      disabled: map.get($theme, 'disabled-inactive-track-color'),\n    ),\n    $query: $query\n  );\n\n  @include tick-mark-active-color(\n    $color-or-map: (\n      default: map.get($theme, 'with-tick-marks-active-container-color'),\n      disabled: map.get($theme, 'with-tick-marks-active-container-color'),\n    ),\n    $opacity: map.get($theme, 'with-tick-marks-active-container-opacity'),\n    $query: $query\n  );\n\n  @include tick-mark-inactive-color(\n    $color-or-map: (\n      default: map.get($theme, 'with-tick-marks-inactive-container-color'),\n      disabled: map.get($theme, 'with-tick-marks-disabled-container-color'),\n    ),\n    $opacity: map.get($theme, 'with-tick-marks-inactive-container-opacity'),\n    $query: $query\n  );\n\n  @include value-indicator-color(\n    $color: map.get($theme, 'label-container-color'),\n    $opacity: 1,\n    $query: $query\n  );\n\n  @include value-indicator-text-color(\n    $color: map.get($theme, 'label-label-text-color'),\n    $query: $query\n  );\n\n  .mdc-slider__track {\n    @include feature-targeting.targets($feat-structure) {\n      @include theme.property(height, map.get($theme, 'inactive-track-height'));\n    }\n  }\n\n  .mdc-slider__track--active {\n    @include feature-targeting.targets($feat-structure) {\n      @include theme.property(height, map.get($theme, 'active-track-height'));\n      @include theme.property(\n        top,\n        // Using 'xactive' because string replace finds 'active' in 'inactive'\n        'calc((inactive-track-height - xactive-track-height) / 2)',\n        $replace: (\n          'inactive-track-height': map.get($theme, 'inactive-track-height'),\n          'xactive-track-height': map.get($theme, 'active-track-height')\n        )\n      );\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      @include theme.property(\n        border-top-width,\n        map.get($theme, 'active-track-height')\n      );\n    }\n  }\n\n  .mdc-slider__track--inactive {\n    @include feature-targeting.targets($feat-structure) {\n      @include theme.property(height, map.get($theme, 'inactive-track-height'));\n    }\n  }\n\n  .mdc-slider__tick-mark--active,\n  .mdc-slider__tick-mark--inactive {\n    @include feature-targeting.targets($feat-structure) {\n      @include theme.property(\n        height,\n        map.get($theme, 'with-tick-marks-container-size')\n      );\n      @include theme.property(\n        width,\n        map.get($theme, 'with-tick-marks-container-size')\n      );\n    }\n  }\n\n  @include disabled-slider-opacity($disabled-slider-opacity, $query);\n  @include _value-indicator-typography($theme, $feat-typography);\n  @include _slider-shape($theme, $feat-structure);\n  @include _slider-elevation($theme, $resolvers, $query);\n  @include _thumb-activated-theme-color($theme, $query);\n  @include _thumb-overlap($theme, $query);\n  @include _thumb-state-layer($theme);\n}\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      @include theme.property(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      @include theme.property(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@mixin disabled-slider-opacity($opacity, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  &.mdc-slider--disabled {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(opacity, $opacity);\n    }\n  }\n}\n\n@mixin _value-indicator-typography($theme, $query: feature-targeting.all()) {\n  $font: map.get($theme, 'label-label-text-font');\n  $size: map.get($theme, 'label-label-text-size');\n  $tracking: map.get($theme, 'label-label-text-tracking');\n  $weight: map.get($theme, 'label-label-text-weight');\n  $line-height: map.get($theme, 'label-label-text-line-height');\n\n  .mdc-slider__value-indicator-text {\n    @include feature-targeting.targets($query) {\n      @include theme.property(letter-spacing, $tracking);\n      @include theme.property(font-size, $size);\n      @include theme.property(font-family, $font);\n      @include theme.property(font-weight, $weight);\n      @include theme.property(line-height, $line-height);\n    }\n  }\n}\n\n@mixin _slider-shape($theme, $query: feature-targeting.all()) {\n  $active-track-radius: map.get($theme, 'active-track-shape');\n  $inactive-track-radius: map.get($theme, 'inactive-track-shape');\n  $thumb-radius: map.get($theme, 'handle-shape');\n  $thumb-width: map.get($theme, 'handle-width');\n  $thumb-height: map.get($theme, 'handle-height');\n  $with-tick-marks-radius: map.get($theme, 'with-tick-marks-container-shape');\n\n  .mdc-slider__track--active {\n    @include feature-targeting.targets($query) {\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      @include theme.property(border-radius, $active-track-radius);\n    }\n  }\n\n  .mdc-slider__track--inactive {\n    @include feature-targeting.targets($query) {\n      @include theme.property(border-radius, $inactive-track-radius);\n    }\n  }\n\n  .mdc-slider__thumb-knob {\n    @include feature-targeting.targets($query) {\n      @include theme.property(border-radius, $thumb-radius);\n      @include theme.property(width, $thumb-width);\n      @include theme.property(height, $thumb-height);\n      @include theme.property(border-style, solid);\n      // Use border rather than background-color to fill thumb, for HCM.\n      @include theme.property(\n        border-width,\n        'calc(thumb-height / 2) calc(thumb-width / 2)',\n        $replace: (thumb-height: $thumb-height, thumb-width: $thumb-width)\n      );\n    }\n  }\n\n  .mdc-slider__tick-mark--active,\n  .mdc-slider__tick-mark--inactive {\n    @include feature-targeting.targets($query) {\n      @include theme.property(border-radius, $with-tick-marks-radius);\n    }\n  }\n}\n\n@mixin _slider-elevation($theme, $resolver, $query: feature-targeting.all()) {\n  $thumb-elevation: map.get($theme, 'handle-elevation');\n  $thumb-shadow-color: map.get($theme, 'handle-shadow-color');\n  $value-indicator-elevation: keys.resolve(\n    map.get($theme, 'label-container-elevation')\n  );\n  $track-elevation: keys.resolve(map.get($theme, 'track-elevation'));\n  $disabled-thumb-elevation: keys.resolve(\n    map.get($theme, 'disabled-handle-elevation')\n  );\n\n  .mdc-slider__thumb-knob {\n    @include elevation-theme.with-resolver(\n      map.get($resolver, elevation),\n      $query,\n      $elevation: $thumb-elevation,\n      $shadow-color: $thumb-shadow-color\n    );\n  }\n  .mdc-slider__value-indicator {\n    @include elevation-mixins.elevation(\n      $z-value: $value-indicator-elevation,\n      $query: $query\n    );\n  }\n  .mdc-slider__track {\n    @include elevation-mixins.elevation(\n      $z-value: $track-elevation,\n      $query: $query\n    );\n  }\n\n  &.mdc-slider--disabled .mdc-slider__thumb-knob {\n    @include elevation-mixins.elevation(\n      $z-value: $disabled-thumb-elevation,\n      $query: $query\n    );\n  }\n}\n\n@mixin _thumb-activated-theme-color($theme, $query: feature-targeting.all()) {\n  $hover-color: map.get($theme, 'hover-handle-color');\n  $focus-color: map.get($theme, 'focus-handle-color');\n  $pressed-color: map.get($theme, 'pressed-handle-color');\n\n  .mdc-slider__thumb {\n    &:hover {\n      @include _set-thumb-color($hover-color, $query);\n    }\n\n    &--focused {\n      @include _set-thumb-color($focus-color, $query);\n    }\n\n    @include ripple-theme.pressed() {\n      @include _set-thumb-color($pressed-color, $query);\n    }\n  }\n}\n\n@mixin _thumb-overlap($theme, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n  $overlap-outline-color: map.get($theme, 'with-overlap-handle-outline-color');\n  $overlap-outline-width: map.get($theme, 'with-overlap-handle-outline-width');\n\n  @include feature-targeting.targets($feat-color) {\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        @include theme.property(border-color, $overlap-outline-color);\n        @include theme.property(border-width, $overlap-outline-width);\n      }\n    }\n  }\n}\n\n@function _resolve-theme-elevation-keys($theme, $resolvers) {\n  $elevation-resolver: map.get($resolvers, elevation);\n  $elevation: map.get($theme, handle-elevation);\n  $shadow-color: map.get($theme, thumb-shadow-color);\n\n  @if $elevation-resolver == null or $elevation == null or $shadow-color == null\n  {\n    @return $theme;\n  }\n\n  $resolved-value: meta.call(\n    $resolver,\n    $elevation: $elevation,\n    $shadow-color: $shadow-color\n  );\n\n  @return map.set($theme, $key, $resolved-value);\n}\n\n@mixin _thumb-state-layer($theme) {\n  .mdc-slider__thumb {\n    @include ripple-theme.theme-styles(\n      (\n        focus-state-layer-opacity: map.get($theme, 'focus-state-layer-opacity'),\n        hover-state-layer-color: map.get($theme, 'hover-state-layer-color'),\n        hover-state-layer-opacity: map.get($theme, 'hover-state-layer-opacity'),\n        pressed-state-layer-opacity:\n          map.get($theme, 'pressed-state-layer-opacity'),\n      )\n    );\n  }\n}\n"],"sourceRoot":""}