@material/slider
Version:
The Material Components for the web slider component
1 lines • 126 kB
Source Map (JSON)
{"version":3,"sources":["webpack:///./packages/mdc-slider/styles.scss","webpack:///./packages/material-components-web/node_modules/@material/animation/_animation.scss","webpack:///styles.scss","webpack:///./packages/mdc-slider/_slider.scss","webpack:///./packages/material-components-web/node_modules/@material/theme/_css.scss","webpack:///./packages/material-components-web/node_modules/@material/theme/_gss.scss","webpack:///./packages/material-components-web/node_modules/@material/ripple/_ripple-theme.scss","webpack:///./packages/material-components-web/node_modules/@material/rtl/_rtl.scss","webpack:///./packages/material-components-web/node_modules/@material/dom/_dom.scss","webpack:///./packages/mdc-slider/_slider-theme.scss","webpack:///./packages/material-components-web/node_modules/@material/typography/_typography.scss","webpack:///./packages/material-components-web/node_modules/@material/elevation/_elevation-theme.scss"],"names":[],"mappings":";;;;;;;AAgTE;EACE;IACE,+DC3R2B;YD2R3B,uDC3R2B;IDgS3B;YAAA;EEnTJ;EFsTE;IACE;YAAA;EEpTJ;AACF;AFwSE;EACE;IACE,+DC3R2B;YD2R3B,uDC3R2B;IDgS3B;YAAA;EEnTJ;EFsTE;IACE;YAAA;EEpTJ;AACF;AFwTE;EACE;IACE;YAAA;IACA;EEtTJ;EFyTE;IACE;EEvTJ;AACF;AF+SE;EACE;IACE;YAAA;IACA;EEtTJ;EFyTE;IACE;EEvTJ;AACF;AF0TE;EACE;IACE;YAAA;IACA;EExTJ;EF2TE;IACE;EEzTJ;AACF;AFiTE;EACE;IACE;YAAA;IACA;EExTJ;EF2TE;IACE;EEzTJ;AACF;AC4FE;EHJE;EACA;EACA;EACA;EACA;EACA;EAEA;EAGE;AExFN;AF4FE;EAGI;EACA;EACA;EACA;EACA;AE5FN;AFgGE;EAGI;EI5EA;ECZF;EDwBA;AF7BJ;AF0GE;EIzFI;ECZF;EDwBA;AFxBJ;AFiHI;EAEI;UAAA;AEhHR;AFoHI;EAEI;EKpHJ;EAAc;ELsHV;EACA;UAAA;EACA;UAAA;AElHR;AFwHI;EAEI;EKhIJ;EAAc;ELkIV;AEtHR;AF4HI;EAEI;UAAA;AE3HR;AFmII;EAEI;UAAA;EAKA;UAAA;AEtIR;AFgLE;EAGI;EKtMF;EAAc;ELwMZ;EACA,WAZK;EAaL,YAbK;AElKX;AFoLI;EAGI;EKlNJ;EAAc;ELoNV;EACA;EACA;AEnLR;AFuLI;EAEI;EACA;AEtLR;AIwDI;EFxFE;ECZF;EDwBA;AFyBJ;AI4bE;EFjeI;ECZF;EDwBA;AF8BJ;AIubE;EA9QI;EFnNA;ECZF;EDwBA;AFoCJ;AI6LM;EAEI;AJ5LV;AIiMQ;EAEI,yBAhRO;EF0Bb;ECZF;EDwBA;AF6CJ;AIwMI;EFrPA;AFgDJ;;ACjEE;EAMI;EACA,YA7Be;EA8Bf;EACA;EACA;AD+DN;ACNE;EAEI,WArFmB;EAsFnB;EACA;EACA;UAAA;EACA;ADON;ACHE;;EAGI;EACA;EACA;EACA;ADIN;ACAE;EAMI;EACA,WA/GiB;EAgHjB;EACA;ADHN;ACOE;EAGI;EACA;EACA;EACA;EACA;EE7GF;EAAc;EF+GZ;EE/GF;EAAc;EFiHZ;ADLN;AKvFM;EACE;EFtBJ;EAAc;EFqHV;EErHJ;EAAc;EFuHV;EI/FA;AL8FR;;ACME;EAMI;EACA,WAjJmB;EAkJnB;EACA;ADRN;ACAI;EKlJA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ANqJJ;AMtGI;EL0FA;IKnIE;ENmJJ;AACF;AOjIE;ELNI;ECZF;EDwBA;AFgIJ;AOtIE;ELNI;ECZF;EDwBA;AFqIJ;AOpGE;EL7CI;ECZF;EDwBA;EKqCE,aA3EmB;APiLzB;AO1GE;EL7CI;ECZF;EDwBA;EKqCE,aA3EmB;APuLzB;ACqGE;EAEI;EE3QF;EAAc;EDOZ;ECZF;EAKA;EAAc;EDmBd;EDgQE;EACA;EEpRF;EAAc;EDmBd;EAZE;UAAA;ECZF;EDwBA;UAAA;AFmKJ;AC4GE;EAEI;EAAA;EAAA;EAIA;EACA;EACA;EACA;EACA;EACA;UAAA;EACA;UAAA;AD9GN;ACkHI;EAEI;EACA;EACA;EACA;EACA;EACA;EEzTJ;EAAc;EDOZ;ECZF;EAKA;EAAc;EDmBd;ED6SI;EEhUJ;EAAc;EDmBd;EAZE;UAAA;ECZF;EDwBA;UAAA;EDwTI;ADpHR;ACwHI;EKpWA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AN+OJ;AMhMI;EL4SA;IKrVE;EN6OJ;AACF;AC6GI;EAEI;AD5GR;ACgHI;EAEI;EAAA;EAAA;EAIA;UAAA;ADlHR;ACuHE;EACE;;IAGI;EDtHN;AACF;AC0HE;EOlGE;EACA;ENvQE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;EAZE;ECZF;EDwBA;UAAA;EAZE;ECZF;EDwBA;AF2PJ;AO9CE;EL7ME;EKiNE,YA3PoB;APyS1B;AOzCE;ELtNE;AFkQJ;AO7BE;ELjPI;ECZF;EDwBA;AFuQJ;AC3HE;EAEI;EACA,YAtLe;EEoBjB;EAAc;EFoKZ;EACA;EACA;EACA;KAAA;MAAA;UAAA;EACA,WA5Le;ADyTrB;AC1HI;EAEI;AD2HR;ACvHI;EAII;EACA;EACA;ADsHR;ACjHE;EQgDI;EACA,yHAqGS;ERjJT;EACA;EACA;EACA,YAvNQ;EEmBV;EAAc;EFsMZ;EACA;EACA;EACA;UAAA;EACA,WA7NQ;AD+Ud;AOtOI;EL/EE;ECZF;EDwBA;EAZE;ECZF;EDwBA;AFiTJ;AOxOM;EAGE;APwOR;AOjPI;EL/EE;ECZF;EDwBA;EAZE;ECZF;EDwBA;AF4TJ;AOnPM;EAGE;APmPR;AInPI;EFxFE;ECZF;EDwBA;AFoUJ;AIiJE;EFjeI;ECZF;EDwBA;AFyUJ;AI4IE;EA9QI;EFnNA;ECZF;EDwBA;AF+UJ;AI9GM;EAEI;AJ+GV;AI1GQ;EAEI,yBAhRO;EF0Bb;ECZF;EDwBA;AFwVJ;AInGI;EFrPA;AF2VJ;AC/IE;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ADgJN;AC5IE;;EAGI;EACA;EACA;AD6IN;AOjOE;ELtJI;ECZF;EDwBA;EK8IE,YAjLc;APoZpB;AOvOE;ELtJI;ECZF;EDwBA;EK8IE,YAjLc;AP0ZpB;AOhME;ELnMI;ECZF;EDwBA;EK2LE,YA9Nc;APgapB;AOtME;ELnMI;ECZF;EDwBA;EK2LE,YA9Nc;APsapB;ACtYM;;EAGI;EAAA;EAAA;ADuYV;ACnYM;EACE;;IAGI;EDoYV;AACF;;AC9XE;EAkWE;EAIA;AD6BJ;AC1BE;EAEI;AD2BN;;AClYE;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ADoYN,C","file":"mdc.slider.css","sourcesContent":["//\n// Copyright 2016 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:math';\n@use 'sass:color';\n@use 'sass:map';\n@use '@material/animation/functions' as functions2;\n@use '@material/animation/variables' as variables2;\n@use '@material/base/mixins' as base-mixins;\n@use '@material/theme/custom-properties';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/rtl/rtl';\n@use '@material/theme/theme';\n@use './ripple-theme';\n\n@mixin core-styles($query: feature-targeting.all()) {\n @include static-styles($query: $query);\n\n .mdc-ripple-surface {\n @include ripple-theme.states($query: $query);\n }\n}\n\n@mixin static-styles($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-ripple-surface {\n @include surface($query: $query);\n @include radius-bounded($query: $query);\n @include surface-styles($query: $query);\n }\n\n .mdc-ripple-surface[data-mdc-ripple-is-unbounded],\n .mdc-ripple-upgraded--unbounded {\n @include radius-unbounded($query: $query);\n @include unbounded-styles($query: $query);\n }\n}\n\n/// Sets all states (including hover, focus, press, activated and selected) with\n/// given color as base color.\n///\n/// This mixin is for internal use only. Use `ripple-theme.states($color)` mixin\n/// to set interactive states (hover, focus & press) color.\n///\n/// @param {Color|String} $color - Target base color. Can be valid CSS color or\n/// a color string literal (i.e., `primary`, `secondary`, etc).\n@mixin states-for-color($color, $query: feature-targeting.all()) {\n @include ripple-theme.states($color, $query: $query);\n @include ripple-theme.states-activated($color, $query: $query);\n @include ripple-theme.states-selected($color, $query: $query);\n}\n\n@mixin surface-styles($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n position: relative;\n outline: none;\n overflow: hidden;\n }\n}\n\n@mixin unbounded-styles($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n @include feature-targeting.targets($feat-structure) {\n overflow: visible;\n }\n}\n\n@mixin common($query: feature-targeting.all()) {\n $feat-animation: feature-targeting.create-target($query, animation);\n\n // Ensure that styles needed by any component using MDC Ripple are emitted, but only once.\n // (Every component using MDC Ripple imports these mixins, but doesn't necessarily import\n // mdc-ripple.scss.)\n @include feature-targeting.targets($feat-animation) {\n @include base-mixins.emit-once('mdc-ripple/common/animation') {\n @include keyframes_;\n }\n }\n}\n\n@mixin surface(\n $query: feature-targeting.all(),\n $ripple-target: '&',\n $include-will-change: true // TODO(b/151931961): Remove once resolved\n) {\n $feat-animation: feature-targeting.create-target($query, animation);\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n --mdc-ripple-fg-size: 0;\n --mdc-ripple-left: 0;\n --mdc-ripple-top: 0;\n --mdc-ripple-fg-scale: 1;\n --mdc-ripple-fg-translate-end: 0;\n --mdc-ripple-fg-translate-start: 0;\n\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n // TODO(b/151931961): Remove the following block once resolved\n @if $include-will-change {\n will-change: transform, opacity;\n }\n }\n\n #{$ripple-target}::before,\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-structure) {\n position: absolute;\n border-radius: 50%;\n opacity: 0;\n pointer-events: none;\n content: '';\n }\n }\n\n #{$ripple-target}::before {\n @include feature-targeting.targets($feat-animation) {\n // Also transition background-color to avoid unnatural color flashes when toggling activated/selected state\n transition: opacity ripple-theme.$states-wash-duration linear,\n background-color ripple-theme.$states-wash-duration linear;\n }\n\n @include feature-targeting.targets($feat-structure) {\n // Ensure that the ripple wash for hover/focus states is displayed on top of positioned child elements\n @include theme.property(\n z-index,\n custom-properties.create(--mdc-ripple-z-index, 1)\n );\n }\n }\n\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-structure) {\n @include theme.property(\n z-index,\n custom-properties.create(--mdc-ripple-z-index, 0)\n );\n }\n }\n\n // Common styles for upgraded surfaces (some of these depend on custom properties set via JS or other mixins)\n\n &.mdc-ripple-upgraded {\n #{$ripple-target}::before {\n @include feature-targeting.targets($feat-structure) {\n transform: scale(var(--mdc-ripple-fg-scale, 1));\n }\n }\n\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-structure) {\n top: 0;\n @include rtl.ignore-next-line();\n left: 0;\n transform: scale(0);\n transform-origin: center center;\n }\n }\n }\n\n &.mdc-ripple-upgraded--unbounded {\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-structure) {\n top: var(--mdc-ripple-top, 0);\n @include rtl.ignore-next-line();\n left: var(--mdc-ripple-left, 0);\n }\n }\n }\n\n &.mdc-ripple-upgraded--foreground-activation {\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-animation) {\n animation: mdc-ripple-fg-radius-in ripple-theme.$translate-duration\n forwards,\n mdc-ripple-fg-opacity-in ripple-theme.$fade-in-duration forwards;\n }\n }\n }\n\n &.mdc-ripple-upgraded--foreground-deactivation {\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-animation) {\n animation: mdc-ripple-fg-opacity-out ripple-theme.$fade-out-duration;\n }\n\n @include feature-targeting.targets($feat-structure) {\n // Retain transform from mdc-ripple-fg-radius-in activation\n transform: translate(var(--mdc-ripple-fg-translate-end, 0))\n scale(var(--mdc-ripple-fg-scale, 1));\n }\n }\n }\n}\n\n@mixin radius-bounded(\n $radius: 100%,\n $query: feature-targeting.all(),\n $ripple-target: '&'\n) {\n $feat-struture: feature-targeting.create-target($query, structure);\n\n #{$ripple-target}::before,\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-struture) {\n top: calc(50% - #{$radius});\n @include rtl.ignore-next-line();\n left: calc(50% - #{$radius});\n width: $radius * 2;\n height: $radius * 2;\n }\n }\n\n &.mdc-ripple-upgraded {\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-struture) {\n width: var(--mdc-ripple-fg-size, $radius);\n height: var(--mdc-ripple-fg-size, $radius);\n }\n }\n }\n}\n\n@mixin radius-unbounded(\n $radius: 100%,\n $query: feature-targeting.all(),\n $ripple-target: '&'\n) {\n $feat-struture: feature-targeting.create-target($query, structure);\n\n #{$ripple-target}::before,\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-struture) {\n top: calc(50% - #{math.div($radius, 2)});\n @include rtl.ignore-next-line();\n left: calc(50% - #{math.div($radius, 2)});\n width: $radius;\n height: $radius;\n }\n }\n\n &.mdc-ripple-upgraded {\n #{$ripple-target}::before,\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-struture) {\n top: var(--mdc-ripple-top, calc(50% - #{math.div($radius, 2)}));\n @include rtl.ignore-next-line();\n left: var(--mdc-ripple-left, calc(50% - #{math.div($radius, 2)}));\n width: var(--mdc-ripple-fg-size, $radius);\n height: var(--mdc-ripple-fg-size, $radius);\n }\n }\n\n #{$ripple-target}::after {\n @include feature-targeting.targets($feat-struture) {\n width: var(--mdc-ripple-fg-size, $radius);\n height: var(--mdc-ripple-fg-size, $radius);\n }\n }\n }\n}\n\n// Common styles for a ripple target element.\n// Used for components which have an inner ripple target element.\n@mixin target-common($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n // Necessary for clicks on other inner elements (e.g. close icon in chip)\n // to go through.\n pointer-events: none;\n }\n}\n\n@mixin keyframes_ {\n @keyframes mdc-ripple-fg-radius-in {\n from {\n animation-timing-function: variables2.$standard-curve-timing-function;\n // NOTE: For these keyframes, we do not need custom property fallbacks because they are only\n // used in conjunction with `.mdc-ripple-upgraded`. Since MDCRippleFoundation checks to ensure\n // that custom properties are supported within the browser before adding this class, we can\n // safely use them without a fallback.\n transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);\n }\n\n to {\n transform: translate(var(--mdc-ripple-fg-translate-end, 0))\n scale(var(--mdc-ripple-fg-scale, 1));\n }\n }\n\n @keyframes mdc-ripple-fg-opacity-in {\n from {\n animation-timing-function: linear;\n opacity: 0;\n }\n\n to {\n opacity: var(--mdc-ripple-fg-opacity, 0);\n }\n }\n\n @keyframes mdc-ripple-fg-opacity-out {\n from {\n animation-timing-function: linear;\n opacity: var(--mdc-ripple-fg-opacity, 0);\n }\n\n to {\n opacity: 0;\n }\n }\n}\n","//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n$deceleration-curve-timing-function: cubic-bezier(0, 0, 0.2, 1) !default;\n$standard-curve-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default;\n$acceleration-curve-timing-function: cubic-bezier(0.4, 0, 1, 1) !default;\n$sharp-curve-timing-function: cubic-bezier(0.4, 0, 0.6, 1) !default;\n\n@function enter($name, $duration, $delay: 0ms) {\n @return $name $duration $delay $deceleration-curve-timing-function;\n}\n\n@function exit-permanent($name, $duration, $delay: 0ms) {\n @return $name $duration $delay $acceleration-curve-timing-function;\n}\n\n@function exit-temporary($name, $duration, $delay: 0ms) {\n @return $name $duration $delay $sharp-curve-timing-function;\n}\n\n@function standard($name, $duration, $delay: 0ms) {\n @return $name $duration $delay $standard-curve-timing-function;\n}\n\n@function linear($name, $duration, $delay: 0ms) {\n @return $name $duration $delay linear;\n}\n","@keyframes mdc-ripple-fg-radius-in {\n from {\n animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);\n }\n to {\n transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));\n }\n}\n@keyframes mdc-ripple-fg-opacity-in {\n from {\n animation-timing-function: linear;\n opacity: 0;\n }\n to {\n opacity: var(--mdc-ripple-fg-opacity, 0);\n }\n}\n@keyframes mdc-ripple-fg-opacity-out {\n from {\n animation-timing-function: linear;\n opacity: var(--mdc-ripple-fg-opacity, 0);\n }\n to {\n opacity: 0;\n }\n}\n.mdc-slider__thumb {\n --mdc-ripple-fg-size: 0;\n --mdc-ripple-left: 0;\n --mdc-ripple-top: 0;\n --mdc-ripple-fg-scale: 1;\n --mdc-ripple-fg-translate-end: 0;\n --mdc-ripple-fg-translate-start: 0;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n will-change: transform, opacity;\n}\n.mdc-slider__thumb::before, .mdc-slider__thumb::after {\n position: absolute;\n border-radius: 50%;\n opacity: 0;\n pointer-events: none;\n content: \"\";\n}\n.mdc-slider__thumb::before {\n transition: opacity 15ms linear, background-color 15ms linear;\n z-index: 1;\n /* @alternate */\n z-index: var(--mdc-ripple-z-index, 1);\n}\n.mdc-slider__thumb::after {\n z-index: 0;\n /* @alternate */\n z-index: var(--mdc-ripple-z-index, 0);\n}\n.mdc-slider__thumb.mdc-ripple-upgraded::before {\n transform: scale(var(--mdc-ripple-fg-scale, 1));\n}\n.mdc-slider__thumb.mdc-ripple-upgraded::after {\n top: 0;\n /* @noflip */\n /*rtl:ignore*/\n left: 0;\n transform: scale(0);\n transform-origin: center center;\n}\n.mdc-slider__thumb.mdc-ripple-upgraded--unbounded::after {\n top: var(--mdc-ripple-top, 0);\n /* @noflip */\n /*rtl:ignore*/\n left: var(--mdc-ripple-left, 0);\n}\n.mdc-slider__thumb.mdc-ripple-upgraded--foreground-activation::after {\n animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;\n}\n.mdc-slider__thumb.mdc-ripple-upgraded--foreground-deactivation::after {\n animation: mdc-ripple-fg-opacity-out 150ms;\n transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));\n}\n.mdc-slider__thumb::before, .mdc-slider__thumb::after {\n top: calc(50% - 50%);\n /* @noflip */\n /*rtl:ignore*/\n left: calc(50% - 50%);\n width: 100%;\n height: 100%;\n}\n.mdc-slider__thumb.mdc-ripple-upgraded::before, .mdc-slider__thumb.mdc-ripple-upgraded::after {\n top: var(--mdc-ripple-top, calc(50% - 50%));\n /* @noflip */\n /*rtl:ignore*/\n left: var(--mdc-ripple-left, calc(50% - 50%));\n width: var(--mdc-ripple-fg-size, 100%);\n height: var(--mdc-ripple-fg-size, 100%);\n}\n.mdc-slider__thumb.mdc-ripple-upgraded::after {\n width: var(--mdc-ripple-fg-size, 100%);\n height: var(--mdc-ripple-fg-size, 100%);\n}\n.mdc-slider__thumb::before, .mdc-slider__thumb::after {\n background-color: #6200ee;\n /* @alternate */\n background-color: var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee));\n}\n.mdc-slider__thumb:hover::before, .mdc-slider__thumb.mdc-ripple-surface--hover::before {\n opacity: 0.04;\n /* @alternate */\n opacity: var(--mdc-ripple-hover-opacity, 0.04);\n}\n.mdc-slider__thumb.mdc-ripple-upgraded--background-focused::before, .mdc-slider__thumb:not(.mdc-ripple-upgraded):focus::before {\n transition-duration: 75ms;\n opacity: 0.12;\n /* @alternate */\n opacity: var(--mdc-ripple-focus-opacity, 0.12);\n}\n.mdc-slider__thumb:not(.mdc-ripple-upgraded)::after {\n transition: opacity 150ms linear;\n}\n.mdc-slider__thumb:not(.mdc-ripple-upgraded):active::after {\n transition-duration: 75ms;\n opacity: 0.12;\n /* @alternate */\n opacity: var(--mdc-ripple-press-opacity, 0.12);\n}\n.mdc-slider__thumb.mdc-ripple-upgraded {\n --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12);\n}\n\n.mdc-slider {\n cursor: pointer;\n height: 48px;\n margin: 0 24px;\n position: relative;\n touch-action: pan-y;\n}\n.mdc-slider .mdc-slider__track {\n height: 4px;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n width: 100%;\n}\n.mdc-slider .mdc-slider__track--active,\n.mdc-slider .mdc-slider__track--inactive {\n display: flex;\n height: 100%;\n position: absolute;\n width: 100%;\n}\n.mdc-slider .mdc-slider__track--active {\n border-radius: 3px;\n height: 6px;\n overflow: hidden;\n top: -1px;\n}\n.mdc-slider .mdc-slider__track--active_fill {\n border-top: 6px solid;\n box-sizing: border-box;\n height: 100%;\n width: 100%;\n position: relative;\n /* @noflip */\n /*rtl:ignore*/\n -webkit-transform-origin: left;\n /* @noflip */\n /*rtl:ignore*/\n transform-origin: left;\n}\n[dir=rtl] .mdc-slider .mdc-slider__track--active_fill, .mdc-slider .mdc-slider__track--active_fill[dir=rtl] {\n /*rtl:begin:ignore*/\n /* @noflip */\n /*rtl:ignore*/\n -webkit-transform-origin: right;\n /* @noflip */\n /*rtl:ignore*/\n transform-origin: right;\n /*rtl:end:ignore*/\n}\n\n.mdc-slider .mdc-slider__track--inactive {\n border-radius: 2px;\n height: 4px;\n left: 0;\n top: 0;\n}\n.mdc-slider .mdc-slider__track--inactive::before {\n position: absolute;\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n border: 1px solid transparent;\n border-radius: inherit;\n content: \"\";\n pointer-events: none;\n}\n@media screen and (forced-colors: active) {\n .mdc-slider .mdc-slider__track--inactive::before {\n border-color: CanvasText;\n }\n}\n.mdc-slider .mdc-slider__track--active_fill {\n border-color: #6200ee;\n /* @alternate */\n border-color: var(--mdc-theme-primary, #6200ee);\n}\n.mdc-slider.mdc-slider--disabled .mdc-slider__track--active_fill {\n border-color: #000;\n /* @alternate */\n border-color: var(--mdc-theme-on-surface, #000);\n}\n.mdc-slider .mdc-slider__track--inactive {\n background-color: #6200ee;\n /* @alternate */\n background-color: var(--mdc-theme-primary, #6200ee);\n opacity: 0.24;\n}\n.mdc-slider.mdc-slider--disabled .mdc-slider__track--inactive {\n background-color: #000;\n /* @alternate */\n background-color: var(--mdc-theme-on-surface, #000);\n opacity: 0.24;\n}\n.mdc-slider .mdc-slider__value-indicator-container {\n bottom: 44px;\n /* @noflip */\n /*rtl:ignore*/\n left: 50%;\n /* @alternate */\n /* @noflip */\n /*rtl:ignore*/\n left: var(--slider-value-indicator-container-left, 50%);\n pointer-events: none;\n position: absolute;\n /* @noflip */\n /*rtl:ignore*/\n right: var(--slider-value-indicator-container-right);\n transform: translateX(-50%);\n /* @alternate */\n transform: var(--slider-value-indicator-container-transform, translateX(-50%));\n}\n.mdc-slider .mdc-slider__value-indicator {\n transition: transform 100ms 0ms cubic-bezier(0.4, 0, 1, 1);\n align-items: center;\n border-radius: 4px;\n display: flex;\n height: 32px;\n padding: 0 12px;\n transform: scale(0);\n transform-origin: bottom;\n}\n.mdc-slider .mdc-slider__value-indicator::before {\n border-left: 6px solid transparent;\n border-right: 6px solid transparent;\n border-top: 6px solid;\n bottom: -5px;\n content: \"\";\n height: 0;\n /* @noflip */\n /*rtl:ignore*/\n left: 50%;\n /* @alternate */\n /* @noflip */\n /*rtl:ignore*/\n left: var(--slider-value-indicator-caret-left, 50%);\n position: absolute;\n /* @noflip */\n /*rtl:ignore*/\n right: var(--slider-value-indicator-caret-right);\n transform: translateX(-50%);\n /* @alternate */\n transform: var(--slider-value-indicator-caret-transform, translateX(-50%));\n width: 0;\n}\n.mdc-slider .mdc-slider__value-indicator::after {\n position: absolute;\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n border: 1px solid transparent;\n border-radius: inherit;\n content: \"\";\n pointer-events: none;\n}\n@media screen and (forced-colors: active) {\n .mdc-slider .mdc-slider__value-indicator::after {\n border-color: CanvasText;\n }\n}\n.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator-container {\n pointer-events: auto;\n}\n.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator {\n transition: transform 100ms 0ms cubic-bezier(0, 0, 0.2, 1);\n transform: scale(1);\n}\n@media (prefers-reduced-motion) {\n .mdc-slider .mdc-slider__value-indicator,\n.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator {\n transition: none;\n }\n}\n.mdc-slider .mdc-slider__value-indicator-text {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n font-family: Roboto, sans-serif;\n /* @alternate */\n font-family: var(--mdc-typography-subtitle2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));\n font-size: 0.875rem;\n /* @alternate */\n font-size: var(--mdc-typography-subtitle2-font-size, 0.875rem);\n line-height: 1.375rem;\n /* @alternate */\n line-height: var(--mdc-typography-subtitle2-line-height, 1.375rem);\n font-weight: 500;\n /* @alternate */\n font-weight: var(--mdc-typography-subtitle2-font-weight, 500);\n letter-spacing: 0.0071428571em;\n /* @alternate */\n letter-spacing: var(--mdc-typography-subtitle2-letter-spacing, 0.0071428571em);\n text-decoration: inherit;\n /* @alternate */\n text-decoration: var(--mdc-typography-subtitle2-text-decoration, inherit);\n text-transform: inherit;\n /* @alternate */\n text-transform: var(--mdc-typography-subtitle2-text-transform, inherit);\n}\n.mdc-slider .mdc-slider__value-indicator {\n background-color: #000;\n opacity: 0.6;\n}\n.mdc-slider .mdc-slider__value-indicator::before {\n border-top-color: #000;\n}\n.mdc-slider .mdc-slider__value-indicator {\n color: #fff;\n /* @alternate */\n color: var(--mdc-theme-on-primary, #fff);\n}\n.mdc-slider .mdc-slider__thumb {\n display: flex;\n height: 48px;\n /* @noflip */\n /*rtl:ignore*/\n left: -24px;\n outline: none;\n position: absolute;\n user-select: none;\n width: 48px;\n}\n.mdc-slider .mdc-slider__thumb--top {\n z-index: 1;\n}\n.mdc-slider .mdc-slider__thumb--top .mdc-slider__thumb-knob, .mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob, .mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob {\n border-style: solid;\n border-width: 1px;\n box-sizing: content-box;\n}\n.mdc-slider .mdc-slider__thumb-knob {\n /* @alternate */\n box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);\n border: 10px solid;\n border-radius: 50%;\n box-sizing: border-box;\n height: 20px;\n /* @noflip */\n /*rtl:ignore*/\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: 20px;\n}\n.mdc-slider .mdc-slider__thumb-knob {\n background-color: #6200ee;\n /* @alternate */\n background-color: var(--mdc-theme-primary, #6200ee);\n border-color: #6200ee;\n /* @alternate */\n border-color: var(--mdc-theme-primary, #6200ee);\n}\n.mdc-slider .mdc-slider__thumb--top .mdc-slider__thumb-knob, .mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob, .mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob {\n border-color: #fff;\n}\n.mdc-slider.mdc-slider--disabled .mdc-slider__thumb-knob {\n background-color: #000;\n /* @alternate */\n background-color: var(--mdc-theme-on-surface, #000);\n border-color: #000;\n /* @alternate */\n border-color: var(--mdc-theme-on-surface, #000);\n}\n.mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top .mdc-slider__thumb-knob, .mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob, .mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob {\n border-color: #fff;\n}\n.mdc-slider .mdc-slider__thumb::before, .mdc-slider .mdc-slider__thumb::after {\n background-color: #6200ee;\n /* @alternate */\n background-color: var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee));\n}\n.mdc-slider .mdc-slider__thumb:hover::before, .mdc-slider .mdc-slider__thumb.mdc-ripple-surface--hover::before {\n opacity: 0.04;\n /* @alternate */\n opacity: var(--mdc-ripple-hover-opacity, 0.04);\n}\n.mdc-slider .mdc-slider__thumb.mdc-ripple-upgraded--background-focused::before, .mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded):focus::before {\n transition-duration: 75ms;\n opacity: 0.12;\n /* @alternate */\n opacity: var(--mdc-ripple-focus-opacity, 0.12);\n}\n.mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded)::after {\n transition: opacity 150ms linear;\n}\n.mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded):active::after {\n transition-duration: 75ms;\n opacity: 0.12;\n /* @alternate */\n opacity: var(--mdc-ripple-press-opacity, 0.12);\n}\n.mdc-slider .mdc-slider__thumb.mdc-ripple-upgraded {\n --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12);\n}\n.mdc-slider .mdc-slider__tick-marks {\n align-items: center;\n box-sizing: border-box;\n display: flex;\n height: 100%;\n justify-content: space-between;\n padding: 0 1px;\n position: absolute;\n width: 100%;\n}\n.mdc-slider .mdc-slider__tick-mark--active,\n.mdc-slider .mdc-slider__tick-mark--inactive {\n border-radius: 50%;\n height: 2px;\n width: 2px;\n}\n.mdc-slider .mdc-slider__tick-mark--active {\n background-color: #fff;\n /* @alternate */\n background-color: var(--mdc-theme-on-primary, #fff);\n opacity: 0.6;\n}\n.mdc-slider.mdc-slider--disabled .mdc-slider__tick-mark--active {\n background-color: #fff;\n /* @alternate */\n background-color: var(--mdc-theme-on-primary, #fff);\n opacity: 0.6;\n}\n.mdc-slider .mdc-slider__tick-mark--inactive {\n background-color: #6200ee;\n /* @alternate */\n background-color: var(--mdc-theme-primary, #6200ee);\n opacity: 0.6;\n}\n.mdc-slider.mdc-slider--disabled .mdc-slider__tick-mark--inactive {\n background-color: #000;\n /* @alternate */\n background-color: var(--mdc-theme-on-surface, #000);\n opacity: 0.6;\n}\n.mdc-slider--discrete .mdc-slider__thumb,\n.mdc-slider--discrete .mdc-slider__track--active_fill {\n transition: transform 80ms ease;\n}\n@media (prefers-reduced-motion) {\n .mdc-slider--discrete .mdc-slider__thumb,\n.mdc-slider--discrete .mdc-slider__track--active_fill {\n transition: none;\n }\n}\n\n.mdc-slider--disabled {\n opacity: 0.38;\n cursor: auto;\n}\n.mdc-slider--disabled .mdc-slider__thumb {\n pointer-events: none;\n}\n\n.mdc-slider__input {\n cursor: pointer;\n left: 0;\n margin: 0;\n height: 100%;\n opacity: 0;\n pointer-events: none;\n position: absolute;\n top: 0;\n width: 100%;\n}","//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:math';\n@use '@material/animation/animation';\n@use '@material/dom/mixins' as dom-mixins;\n@use '@material/elevation/mixins' as elevation-mixins;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/ripple/ripple';\n@use '@material/ripple/ripple-theme';\n@use '@material/rtl/rtl';\n@use '@material/theme/css';\n@use '@material/theme/theme-color';\n@use '@material/typography/typography';\n@use './slider-theme';\n\n// Thumb variables.\n$_thumb-ripple-size: 48px;\n$_thumb-size: 20px;\n$_value-indicator-caret-width: 6px;\n\n// Track variables.\n$_track-active-height: 6px;\n$_track-inactive-height: 4px;\n\n/// Core styles for slider component.\n@mixin core-styles($query: feature-targeting.all()) {\n @include ripple($query: $query);\n @include without-ripple($query: $query);\n}\n\n// This API is intended for use by frameworks that may want to separate the\n// ripple-related styles from the other slider styles.\n// It is recommended that most users use `core-styles` instead.\n@mixin without-ripple($query: feature-targeting.all()) {\n $feat-animation: feature-targeting.create-target($query, animation);\n $feat-color: feature-targeting.create-target($query, color);\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-slider {\n @include _track($query: $query);\n @include _thumb($query: $query);\n @include _tick-marks($query: $query);\n\n @include feature-targeting.targets($feat-structure) {\n cursor: pointer;\n height: $_thumb-ripple-size;\n margin: 0 math.div($_thumb-ripple-size, 2);\n position: relative;\n touch-action: pan-y;\n }\n\n &--discrete {\n .mdc-slider__thumb,\n .mdc-slider__track--active_fill {\n @include feature-targeting.targets($feat-animation) {\n transition: transform 80ms ease;\n }\n }\n\n @media (prefers-reduced-motion) {\n .mdc-slider__thumb,\n .mdc-slider__track--active_fill {\n @include feature-targeting.targets($feat-animation) {\n transition: none;\n }\n }\n }\n }\n }\n\n .mdc-slider--disabled {\n @include _disabled($query: $query);\n }\n\n .mdc-slider__input {\n @include feature-targeting.targets($feat-structure) {\n cursor: pointer;\n left: 0;\n margin: 0;\n height: 100%;\n opacity: 0;\n pointer-events: none;\n position: absolute;\n top: 0;\n width: 100%;\n }\n }\n}\n\n// This API is intended for use by frameworks that may want to separate the\n// ripple-related styles from the other slider styles.\n// It is recommended that most users use `core-styles` instead.\n@mixin ripple($query: feature-targeting.all()) {\n @include ripple.common($query); // COPYBARA_COMMENT_THIS_LINE\n\n .mdc-slider__thumb {\n @include ripple.surface($query: $query);\n @include ripple.radius-unbounded($query: $query);\n @include ripple-theme.states($color: slider-theme.$color, $query: $query);\n }\n}\n\n@mixin _track($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-slider__track {\n @include feature-targeting.targets($feat-structure) {\n height: $_track-inactive-height;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n width: 100%;\n }\n }\n\n .mdc-slider__track--active,\n .mdc-slider__track--inactive {\n @include feature-targeting.targets($feat-structure) {\n display: flex;\n height: 100%;\n position: absolute;\n width: 100%;\n }\n }\n\n .mdc-slider__track--active {\n @include feature-targeting.targets($feat-structure) {\n // Set border-radius on the outer `track--active` element, and apply\n // transform: scale(...) to the inner `track--active_fill` element,\n // such that the track grows/shrinks as needed, but the border-radius\n // is not affected by the scaling.\n border-radius: 3px;\n height: $_track-active-height;\n overflow: hidden;\n top: math.div($_track-inactive-height - $_track-active-height, 2);\n }\n }\n\n .mdc-slider__track--active_fill {\n @include feature-targeting.targets($feat-structure) {\n // Use border rather than background-color to fill track, for HCM.\n border-top: $_track-active-height solid;\n box-sizing: border-box;\n height: 100%;\n width: 100%;\n position: relative;\n @include rtl.ignore-next-line();\n -webkit-transform-origin: left;\n @include rtl.ignore-next-line();\n transform-origin: left;\n\n @include rtl.rtl {\n @include rtl.ignore-next-line();\n -webkit-transform-origin: right;\n @include rtl.ignore-next-line();\n transform-origin: right;\n }\n }\n }\n\n .mdc-slider__track--inactive {\n &::before {\n @include dom-mixins.transparent-border($query: $query); // For HCM.\n }\n\n @include feature-targeting.targets($feat-structure) {\n border-radius: 2px;\n height: $_track-inactive-height;\n left: 0;\n top: 0;\n }\n }\n\n @include slider-theme.track-active-color(\n $color-or-map: (\n default: slider-theme.$color,\n disabled: slider-theme.$disabled-color,\n ),\n $query: $query\n );\n @include slider-theme.track-inactive-color(\n $color-or-map: (\n default: slider-theme.$color,\n disabled: slider-theme.$disabled-color,\n ),\n $query: $query\n );\n}\n\n@mixin _thumb($query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include _value-indicator($query: $query);\n\n .mdc-slider__thumb {\n @include feature-targeting.targets($feat-structure) {\n display: flex;\n height: $_thumb-ripple-size;\n @include rtl.ignore-next-line();\n left: math.div(-$_thumb-ripple-size, 2);\n outline: none;\n position: absolute;\n user-select: none;\n width: $_thumb-ripple-size;\n }\n\n &--top {\n @include feature-targeting.targets($feat-structure) {\n z-index: 1;\n }\n }\n\n &--top .mdc-slider__thumb-knob,\n &--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob,\n &--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob {\n @include feature-targeting.targets($feat-structure) {\n border-style: solid;\n border-width: 1px;\n box-sizing: content-box;\n }\n }\n }\n\n .mdc-slider__thumb-knob {\n @include elevation-mixins.elevation($z-value: 1, $query: $query);\n\n @include feature-targeting.targets($feat-structure) {\n // Use border rather than background-color to fill thumb, for HCM.\n border: math.div($_thumb-size, 2) solid;\n border-radius: 50%;\n box-sizing: border-box;\n height: $_thumb-size;\n @include rtl.ignore-next-line();\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: $_thumb-size;\n }\n }\n\n @include slider-theme.thumb-color(\n $color-or-map: (\n default: slider-theme.$color,\n disabled: slider-theme.$disabled-color,\n ),\n $query: $query\n );\n @include slider-theme.thumb-ripple-color(\n $color: slider-theme.$color,\n $query: $query\n );\n}\n\n@mixin _tick-marks($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n $feat-color: feature-targeting.create-target($query, color);\n\n .mdc-slider__tick-marks {\n @include feature-targeting.targets($feat-structure) {\n align-items: center;\n box-sizing: border-box;\n display: flex;\n height: 100%;\n justify-content: space-between;\n padding: 0 1px;\n position: absolute;\n width: 100%;\n }\n }\n\n .mdc-slider__tick-mark--active,\n .mdc-slider__tick-mark--inactive {\n @include feature-targeting.targets($feat-structure) {\n border-radius: 50%;\n height: 2px;\n width: 2px;\n }\n }\n\n @include slider-theme.tick-mark-active-color(\n $color-or-map: (\n default: slider-theme.$tick-mark-active-color,\n disabled: on-primary,\n ),\n $query: $query\n );\n @include slider-theme.tick-mark-inactive-color(\n $color-or-map: (\n default: slider-theme.$tick-mark-inactive-color,\n disabled: slider-theme.$disabled-color,\n ),\n $query: $query\n );\n}\n\n@mixin _value-indicator($query: feature-targeting.all()) {\n $feat-animation: feature-targeting.create-target($query, animation);\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-slider__value-indicator-container {\n @include feature-targeting.targets($feat-structure) {\n bottom: math.div($_thumb-ripple-size, 2) + math.div($_thumb-size, 2) +\n $_value-indicator-caret-width + 4px;\n @include css.declaration(\n left,\n var(--slider-value-indicator-container-left, 50%),\n 50%,\n $gss: (noflip: true)\n );\n pointer-events: none;\n position: absolute;\n @include css.declaration(\n right,\n var(--slider-value-indicator-container-right),\n $gss: (noflip: true)\n );\n @include css.declaration(\n transform,\n var(--slider-value-indicator-container-transform, translateX(-50%)),\n translateX(-50%)\n );\n }\n }\n\n .mdc-slider__value-indicator {\n @include feature-targeting.targets($feat-animation) {\n transition: animation.exit-permanent(transform, 100ms);\n }\n\n @include feature-targeting.targets($feat-structure) {\n align-items: center;\n border-radius: 4px;\n display: flex;\n height: 32px;\n padding: 0 12px;\n transform: scale(0);\n transform-origin: bottom;\n }\n\n // Caret: https://css-tricks.com/snippets/css/css-triangle/\n &::before {\n @include feature-targeting.targets($feat-structure) {\n border-left: $_value-indicator-caret-width solid transparent;\n border-right: $_value-indicator-caret-width solid transparent;\n border-top: $_value-indicator-caret-width solid;\n bottom: -$_value-indicator-caret-width + 1;\n content: '';\n height: 0;\n @include css.declaration(\n left,\n var(--slider-value-indicator-caret-left, 50%),\n 50%,\n $gss: (noflip: true)\n );\n position: absolute;\n @include css.declaration(\n right,\n var(--slider-value-indicator-caret-right),\n $gss: (noflip: true)\n );\n @include css.declaration(\n transform,\n var(--slider-value-indicator-caret-transform, translateX(-50%)),\n translateX(-50%)\n );\n width: 0;\n }\n }\n\n &::after {\n @include dom-mixins.transparent-border($query: $query); // For HCM.\n }\n }\n\n .mdc-slider__thumb--with-indicator {\n .mdc-slider__value-indicator-container {\n @include feature-targeting.targets($feat-structure) {\n pointer-events: auto;\n }\n }\n\n .mdc-slider__value-indicator {\n @include feature-targeting.targets($feat-animation) {\n transition: animation.enter(transform, 100ms);\n }\n\n @include feature-targeting.targets($feat-structure) {\n transform: scale(1);\n }\n }\n }\n\n @media (prefers-reduced-motion) {\n .mdc-slider__value-indicator,\n .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator {\n @include feature-targeting.targets($feat-animation) {\n transition: none;\n }\n }\n }\n\n .mdc-slider__value-indicator-text {\n @include typography.typography(subtitle2, $query);\n }\n\n @include slider-theme.value-indicator-color(\n $color: slider-theme.$value-indicator-color,\n $opacity: slider-theme.$value-indicator-opacity,\n $query: $query\n );\n @include slider-theme.value-indicator-text-color(\n $color: slider-theme.$value-indicator-text-color,\n $query: $query\n );\n}\n\n// Styles for slider in disabled state.\n@mixin _disabled($query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-color) {\n opacity: 0.38;\n }\n\n @include feature-targeting.targets($feat-structure) {\n cursor: auto;\n }\n\n .mdc-slider__thumb {\n @include feature-targeting.targets($feat-structure) {\n pointer-events: none;\n }\n }\n}\n","//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use 'sass:list';\n@use 'sass:map';\n@use 'sass:meta';\n@use './gss';\n\n/// When true, add an additional property/value declaration before declarations\n/// that use advanced features such as custom properties or CSS functions. This\n/// adds fallback support for older browsers such as IE11 that do not support\n/// these features at the cost of additional CSS. Set this variable to false to\n/// disable generating fallback declarations.\n$enable-fallback-declarations: true !default;\n\n/// Writes a CSS property/value declaration. This mixin is used throughout the\n/// theme package for consistency for dynamically setting CSS property values.\n///\n/// This mixin may optionally take a fallback value. For advanced features such\n/// as custom properties or CSS functions like min and max, a fallback value is\n/// recommended to support older browsers.\n///\n/// @param {String} $property - The CSS property of the declaration.\n/// @param {*} $value - The value of the CSS declaration. The value should be\n/// resolved by other theme functions first (i.e. custom property Maps and\n/// Material theme keys are not supported in this mixin). If the value is\n/// null, no declarations will be emitted.\n/// @param {*} $fallback - An optional fallback value for older browsers. If\n/// provided, a second property/value declaration will be added before the\n/// main property/value declaration.\n/// @param {Map} $gss - An optional Map of GSS annotations to add.\n/// @param {Bool} $important - If true, add `!important` to the declaration.\n@mixin declaration(\n $property,\n $value,\n $fallback-value: null,\n $gss: (),\n $important: false\n) {\n // Normally setting a null value to a property will not emit CSS, so mixins\n // wouldn't need to check this. However, Sass will throw an error if the\n // interpolated property is a custom property.\n @if $value != null {\n $important-rule: if($important, ' !important', '');\n\n @if $fallback-value and $enable-fallback-declarations {\n @include gss.annotate($gss);\n #{$property}: #{$fallback-value} #{$important-rule};\n\n // Add @alternate to annotations.\n $gss: map.merge(\n $gss,\n (\n alternate: true,\n )\n );\n }\n\n @include gss.annotate($gss);\n #{$property}: #{$value}#{$important-rule};\n }\n}\n\n/// Unpacks shorthand values for CSS properties (i.e. lists of 1-3 values).\n/// If a list of 4 values is given, it is returned as-is.\n///\n/// Examples:\n///\n/// unpack-value(4px) => 4px 4px 4px 4px\n/// unpack-value(4px 2px) => 4px 2px 4px 2px\n/// unpack-value(4px 2px 2px) => 4px 2px 2px 2px\n/// unpack-value(4px 2px 0 2px) => 4px 2px 0 2px\n///\n/// @param {Number | Map | List} $value - List of 1 to 4 valu