` with only text content). Use `baseline()` to set the baseline of\n/// containers that are flexbox or have non-flow content children.\n///\n/// @param {Number} $top - the distance from the top of the container to the\n/// text's baseline.\n/// @param {Number} $bottom - the distance from the text's baseline to the\n/// bottom of the container.\n/// @param {Boolean} $lineHeight - the line-height to use for the text. This\n/// is the distance between baselines of multiple lines of text.\n/// @param {String} $display - the display type of the container. May be `block`\n/// or `inline-block`.\n@mixin text-baseline(\n $top: 0,\n $bottom: 0,\n $display: block,\n $lineHeight: normal,\n $query: feature-targeting-functions.all()\n) {\n $validDisplayTypes: (block, inline-block);\n\n @if list.index($validDisplayTypes, $display) == null {\n @error \"mdc-typography: invalid display specified! #{$display} must be one of #{$validDisplayTypes}\";\n }\n\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include baseline(\n $display: $display,\n $top: $top,\n $bottom: $bottom,\n $query: $query\n );\n @include feature-targeting-mixins.targets($feat-structure) {\n @if $top > 0 {\n margin-top: 0;\n /* @alternate */\n line-height: #{$lineHeight};\n }\n\n @if $bottom > 0 {\n margin-bottom: -1 * $bottom;\n }\n }\n}\n\n/// Creates a baseline strut from the top of a container. This mixin is for\n/// advanced users, prefer `baseline()`.\n///\n/// @param {Number} $distance - The distance from the top of the container to\n/// the text's baseline.\n@mixin baseline-top($distance, $query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n &::before {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include baseline-strut_($distance);\n\n vertical-align: 0;\n }\n }\n}\n\n/// Creates a baseline strut from the baseline to the bottom of a container.\n/// This mixin is for advanced users, prefer `baseline()`.\n///\n/// @param {Number} $distance - The distance from the text's baseline to the\n/// bottom of the container.\n@mixin baseline-bottom($distance, $query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n &::after {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include baseline-strut_($distance);\n\n vertical-align: -1 * $distance;\n }\n }\n}\n\n/// Adds an invisible, zero-width prefix to a container's text.\n/// This ensures that the baseline is always where the text would be, instead\n/// of defaulting to the container bottom when text is empty. Do not use this\n/// mixin if the `baseline` mixin is already applied.\n@mixin zero-width-prefix($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n &::before {\n @include feature-targeting-mixins.targets($feat-structure) {\n content: '\\200b';\n }\n }\n}\n\n@mixin baseline-strut_($distance) {\n display: inline-block;\n width: 0;\n height: $distance;\n content: '';\n}\n","//\n// 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 \"sass:map\";\n@use \"sass:meta\";\n@use \"./gss\";\n\n/// When true, add an additional property/value declaration before a custom\n/// property's `var()` to support IE. Configure\n/// `@material/theme/custom-properties` with this variable set to false to\n/// disable IE fallback values for custom properties.\n$ie-fallback: true !default;\n\n/// Returns true if the parameter is a custom property Map.\n///\n/// @param {*} $value - the value to test.\n/// @return true if the value is a custom property Map, or false if not.\n@function is-custom-prop($value) {\n @return meta.type-of($value) == 'map' and map.has-key($value, 'varname');\n}\n\n/// Returns true if $prop1's varname and fallback values are deeply equal to\n/// $prop2's varname and fallback values.\n///\n/// @param {Map} $prop1 - the first value to test.\n/// @param {Map} $prop2 - the second value to test.\n/// @return true if both properties are deeply equal\n@function are-equal($prop1, $prop2) {\n @return create-var($prop1) == create-var($prop2);\n}\n\n/// Creates a custom property Map.\n///\n/// @param {String} $varname - the custom property name.\n/// @param {String | Number | Map} - the fallback value (may be another custom\n/// property Map). May be null.\n/// @return a custom property Map.\n@function create($varname, $fallback: null) {\n @return (varname: $varname, fallback: $fallback);\n}\n\n/// Returns the custom property variable name of a custom property Map.\n///\n/// @param {Map} $custom-prop - a custom property Map.\n/// @return the custom property variable name defined by the Map.\n@function get-varname($custom-prop) {\n @return map.get($custom-prop, 'varname');\n}\n\n/// Returns the fallback value of a custom property Map. May be null if the\n/// custom property does not have a fallback.\n///\n/// @param {Map} $custom-prop - a custom property Map.\n/// @param {Bool} $shallow - if true, return the first fallback value, which\n/// may be another custom property Map. Defaults to false, which will return\n/// the deep final fallback value.\n/// @return the fallback value of a custom property Map. May be null.\n@function get-fallback($custom-prop, $shallow: false) {\n $fallback: map.get($custom-prop, 'fallback');\n @if is-custom-prop($fallback) and not $shallow {\n @return get-fallback($fallback);\n }\n\n @return $fallback;\n}\n\n/// Creates a new custom property Map and returns it with the specified new\n/// fallback value.\n///\n/// @param {Map} $custom-prop - the custom property Map to copy.\n/// @param {String | Number | Map} $new-fallback - the new fallback value of the\n/// custom property Map. May be null.\n/// @param {Bool} $shallow - if true, set the first fallback value. Defaults to\n/// false, which will set the deep final fallback value.\n/// @return a new custom property Map with the new fallback value.\n@function set-fallback($custom-prop, $new-fallback, $shallow: false) {\n $varname: get-varname($custom-prop);\n $first-fallback: get-fallback($custom-prop, $shallow: true);\n\n @if is-custom-prop($first-fallback) and not $shallow {\n // The first fallback is a custom property and $shallow is false. Deeply\n // set the fallback value of the custom property and get the new custom\n // property Map returned.\n $new-fallback: set-fallback($first-fallback, $new-fallback);\n }\n\n @return create($varname, $new-fallback);\n}\n\n/// Creates and returns a `var()` function declaration represented by the\n/// provided custom property Map.\n///\n/// @param {Map} $custom-prop - a custom property Map.\n/// @return a `var()` function declaration using the custom property Map's\n/// varname and fallback value.\n@function create-var($custom-prop) {\n $varname: get-varname($custom-prop);\n $fallback: get-fallback($custom-prop, $shallow: true);\n\n @if is-custom-prop($fallback) {\n @return var($varname, create-var($fallback));\n } @else if $fallback != null {\n @return var($varname, $fallback);\n } @else {\n @return var($varname);\n }\n}\n\n/// Applies a custom property value to the specified property.\n///\n/// @param {String} $property - the name of the CSS property.\n/// @param {Map} $custom-prop - a custom property Map for the property's value.\n/// @param {Map} $gss - optional Map of GSS annotations to set.\n/// @param {Bool} $important - set to true to add an `!important` rule. Defaults\n/// to false.\n@mixin apply($property, $custom-prop, $gss: (), $important: false) {\n @if not is-custom-prop($custom-prop) {\n @error \"mdc-theme: Invalid custom property: #{$custom-prop}. Must be a Map with 'varname' and 'fallback'.\";\n }\n\n $important-rule: if($important, '!important', '');\n\n $fallback: get-fallback($custom-prop);\n @if $ie-fallback and $fallback != null {\n @include gss.annotate($gss);\n #{$property}: #{$fallback} #{$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}: create-var($custom-prop) #{$important-rule};\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 \"sass:map\";\n\n/// Adds optional GSS annotation comments. Useful for theme mixins where one or\n/// more properties are set indirectly.\n///\n/// @example\n/// `annotate((noflip: true)) => /* @noflip */`\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 @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 */\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 \"@material/theme/mixins\" as theme;\n@use \"./variables\";\n\n// Creates a rule that will be applied when an MDC Web component is within the context of an RTL layout.\n//\n// Usage Example:\n//\n// ```scss\n// .mdc-foo {\n// position: absolute;\n// left: 0;\n//\n// @include rtl {\n// left: auto;\n// right: 0;\n// }\n//\n// &__bar {\n// margin-left: 4px;\n// @include rtl(\".mdc-foo\") {\n// margin-left: auto;\n// margin-right: 4px;\n// }\n// }\n// }\n//\n// .mdc-foo--mod {\n// padding-left: 4px;\n//\n// @include rtl {\n// padding-left: auto;\n// padding-right: 4px;\n// }\n// }\n// ```\n//\n// Note that this mixin works by checking for an ancestor element with `[dir=\"rtl\"]`.\n// As a result, nested `dir` values are not supported:\n//\n// ```html\n// \n// \n//
\n//
Styled incorrectly as RTL!
\n//
\n// \n// ```\n//\n// In the future, selectors such as the `:dir` pseudo-class (http://mdn.io/css/:dir) will help us mitigate this.\n@mixin rtl($root-selector: null) {\n @if (variables.$include) {\n @if ($root-selector) {\n @at-root {\n #{$root-selector}[dir='rtl'] &,\n [dir='rtl'] #{$root-selector} & {\n @content;\n }\n }\n } @else {\n [dir='rtl'] &,\n &[dir='rtl'] {\n @content;\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 $root-selector: 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 $root-selector\n );\n}\n\n// Takes a base property and emits rules that assign -left to and\n// -right to 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 $root-selector: 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 $root-selector\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, $root-selector: 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(left, $left-value, right, $right-value, $root-selector);\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 $root-selector: null\n) {\n @include property_($left-property, $left-value);\n @include property_($right-property, $right-value);\n\n @include rtl($root-selector) {\n @include property_($left-property, $right-value);\n @include property_($right-property, $left-value);\n }\n}\n\n///\n/// Adds `@noflip` annotation when `$mdc-rtl-include` is true.\n///\n/// @param {String} $property\n/// @param {String} $value\n/// @access private\n///\n@mixin property_($property, $value) {\n @include theme.property(\n $property,\n $value,\n $gss: (noflip: variables.$include)\n );\n}\n","//\n// Copyright 2019 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$height: 48px !default;\n$width: $height !default;\n","//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use \"@material/density/variables\" as density-variables;\n@use \"@material/theme/variables\" as theme-variables; // for mdc-theme-prop-value\n\n$height: 36px !default;\n$horizontal-padding: 8px !default;\n$contained-horizontal-padding: 16px !default;\n\n$minimum-height: 24px !default;\n$maximum-height: $height !default;\n$density-scale: density-variables.$default-scale !default;\n$density-config: (\n height: (\n default: $height,\n maximum: $maximum-height,\n minimum: $minimum-height,\n ),\n) !default;\n\n$outlined-border-width: 1px !default;\n$outline-color: rgba(theme-variables.prop-value(on-surface), 0.12) !default;\n$shape-radius: small !default;\n\n$disabled-container-color: rgba(\n theme-variables.prop-value(on-surface),\n 0.12\n) !default;\n$disabled-ink-color: rgba(\n theme-variables.prop-value(on-surface),\n 0.38\n) !default;\n","//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// MDC Ripple keyframes are split into their own file so that _mixins.scss can rely on them.\n\n@use \"@material/animation/variables\";\n@use \"./variables\" as variables2;\n\n@mixin keyframes_ {\n @keyframes mdc-ripple-fg-radius-in {\n from {\n animation-timing-function: variables.$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// 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@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/functions\" as feature-targeting-functions;\n@use \"@material/feature-targeting/mixins\" as feature-targeting-mixins;\n@use \"@material/theme/mixins\" as theme-mixins;\n@use \"./functions\";\n@use \"./keyframes\";\n@use \"./variables\";\n@use \"@material/theme/variables\" as theme-variables;\n\n@mixin core-styles($query: feature-targeting-functions.all()) {\n // postcss-bem-linter: define ripple-surface\n\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n .mdc-ripple-surface {\n @include surface($query: $query);\n @include states($query: $query);\n @include radius-bounded($query: $query);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n position: relative;\n outline: none;\n overflow: hidden;\n }\n\n &[data-mdc-ripple-is-unbounded] {\n @include radius-unbounded($query: $query);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n overflow: visible;\n }\n }\n\n &--primary {\n @include states(primary, $query: $query);\n }\n\n &--accent {\n @include states(secondary, $query: $query);\n }\n }\n\n // postcss-bem-linter: end\n}\n\n@mixin common($query: feature-targeting-functions.all()) {\n $feat-animation: feature-targeting-functions.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-mixins.targets($feat-animation) {\n @include base-mixins.emit-once('mdc-ripple/common/animation') {\n @include keyframes.keyframes_;\n }\n }\n}\n\n@mixin surface($query: feature-targeting-functions.all(), $ripple-target: '&') {\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.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 // !!DO NOT REMOVE!! mdc-ripple-will-change-replacer\n }\n\n #{$ripple-target}::before,\n #{$ripple-target}::after {\n @include feature-targeting-mixins.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-mixins.targets($feat-animation) {\n // Also transition background-color to avoid unnatural color flashes when toggling activated/selected state\n transition: opacity variables.$states-wash-duration linear,\n background-color variables.$states-wash-duration linear;\n }\n\n @include feature-targeting-mixins.targets($feat-structure) {\n z-index: 1; // Ensure that the ripple wash for hover/focus states is displayed on top of positioned child elements\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-mixins.targets($feat-structure) {\n transform: scale(var(--mdc-ripple-fg-scale, 1));\n }\n }\n\n #{$ripple-target}::after {\n @include feature-targeting-mixins.targets($feat-structure) {\n top: 0;\n /* @noflip */\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-mixins.targets($feat-structure) {\n top: var(--mdc-ripple-top, 0);\n /* @noflip */\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-mixins.targets($feat-animation) {\n animation: mdc-ripple-fg-radius-in variables.$translate-duration\n forwards,\n mdc-ripple-fg-opacity-in variables.$fade-in-duration forwards;\n }\n }\n }\n\n &.mdc-ripple-upgraded--foreground-deactivation {\n #{$ripple-target}::after {\n @include feature-targeting-mixins.targets($feat-animation) {\n animation: mdc-ripple-fg-opacity-out variables.$fade-out-duration;\n }\n\n @include feature-targeting-mixins.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 states-base-color(\n $color,\n $query: feature-targeting-functions.all(),\n $ripple-target: '&'\n) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n #{$ripple-target}::before,\n #{$ripple-target}::after {\n @include feature-targeting-mixins.targets($feat-color) {\n @if color.alpha(theme-variables.prop-value($color)) > 0 {\n @include theme-mixins.prop(background-color, $color);\n } @else {\n // If a color with 0 alpha is specified, don't render the ripple pseudo-elements at all.\n // This avoids unnecessary transitions and overflow.\n content: none;\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-functions.all()\n) {\n // Ensure sufficient specificity to override base state opacities\n @if map.has-key($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.has-key($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.has-key($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-functions.all(),\n $ripple-target: '&'\n) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n // Background wash styles, for both CSS-only and upgraded stateful surfaces\n &:hover {\n #{$ripple-target}::before {\n // Opacity falls under color because the chosen opacity is color-dependent in typical usage\n @include feature-targeting-mixins.targets($feat-color) {\n opacity: $opacity;\n }\n }\n }\n}\n\n@mixin states-focus-opacity(\n $opacity,\n $has-nested-focusable-element: false,\n $query: feature-targeting-functions.all(),\n $ripple-target: '&'\n) {\n // Focus overrides hover by reusing the ::before pseudo-element.\n // :focus-within generally works on non-MS browsers and matches when a *child* of the element has focus.\n // It is useful for cases where a component has a focusable element within the root node, e.g. text field,\n // but undesirable in general in case of nested stateful components.\n // We use a modifier class for JS-enabled surfaces to support all use cases in all browsers.\n @if $has-nested-focusable-element {\n // JS-enabled selectors.\n &.mdc-ripple-upgraded--background-focused,\n &.mdc-ripple-upgraded:focus-within,\n // CSS-only selectors.\n &:not(.mdc-ripple-upgraded):focus,\n &:not(.mdc-ripple-upgraded):focus-within {\n #{$ripple-target}::before {\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 #{$ripple-target}::before {\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-functions.create-target($query, animation);\n // Opacity falls under color because the chosen opacity is color-dependent in typical usage\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n // Note that this duration is only effective on focus, not blur\n @include feature-targeting-mixins.targets($feat-animation) {\n transition-duration: 75ms;\n }\n\n @include feature-targeting-mixins.targets($feat-color) {\n opacity: $opacity;\n }\n}\n\n@mixin states-press-opacity(\n $opacity,\n $query: feature-targeting-functions.all(),\n $ripple-target: '&'\n) {\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n // Styles for non-upgraded (CSS-only) stateful surfaces\n\n &:not(.mdc-ripple-upgraded) {\n // Apply press additively by using the ::after pseudo-element\n #{$ripple-target}::after {\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: opacity variables.$fade-out-duration linear;\n }\n }\n\n &:active {\n #{$ripple-target}::after {\n @include feature-targeting-mixins.targets($feat-animation) {\n transition-duration: variables.$fade-in-duration;\n }\n\n // Opacity falls under color because the chosen opacity is color-dependent in typical usage\n @include feature-targeting-mixins.targets($feat-color) {\n opacity: $opacity;\n }\n }\n }\n }\n\n &.mdc-ripple-upgraded {\n @include feature-targeting-mixins.targets($feat-color) {\n --mdc-ripple-fg-opacity: #{$opacity};\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-variables.prop-value(on-surface),\n $has-nested-focusable-element: false,\n $query: feature-targeting-functions.all(),\n $ripple-target: '&'\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 );\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-functions.all(),\n $ripple-target: '&'\n) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n $activated-opacity: functions.states-opacity($color, activated);\n\n &--activated {\n // Stylelint seems to think that '&' qualifies as a type selector here?\n // stylelint-disable-next-line selector-max-type\n #{$ripple-target}::before {\n // Opacity falls under color because the chosen opacity is color-dependent.\n @include feature-targeting-mixins.targets($feat-color) {\n opacity: $activated-opacity;\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-functions.all(),\n $ripple-target: '&'\n) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n $selected-opacity: functions.states-opacity($color, selected);\n\n &--selected {\n // stylelint-disable-next-line selector-max-type\n #{$ripple-target}::before {\n // Opacity falls under color because the chosen opacity is color-dependent.\n @include feature-targeting-mixins.targets($feat-color) {\n opacity: $selected-opacity;\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 radius-bounded(\n $radius: 100%,\n $query: feature-targeting-functions.all(),\n $ripple-target: '&'\n) {\n $feat-struture: feature-targeting-functions.create-target($query, structure);\n\n #{$ripple-target}::before,\n #{$ripple-target}::after {\n @include feature-targeting-mixins.targets($feat-struture) {\n top: calc(50% - #{$radius});\n /* @noflip */\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-mixins.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-functions.all(),\n $ripple-target: '&'\n) {\n $feat-struture: feature-targeting-functions.create-target($query, structure);\n\n #{$ripple-target}::before,\n #{$ripple-target}::after {\n @include feature-targeting-mixins.targets($feat-struture) {\n top: calc(50% - #{$radius / 2});\n /* @noflip */\n left: calc(50% - #{$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-mixins.targets($feat-struture) {\n top: var(--mdc-ripple-top, calc(50% - #{$radius / 2}));\n /* @noflip */\n left: var(--mdc-ripple-left, calc(50% - #{$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-mixins.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 states-interactions_(\n $color,\n $has-nested-focusable-element,\n $opacity-modifier: 0,\n $query: feature-targeting-functions.all(),\n $ripple-target: '&'\n) {\n @include target-selector($ripple-target) {\n @include states-base-color($color, $query);\n }\n\n $opacity-map: (\n hover: functions.states-opacity($color, hover) + $opacity-modifier,\n focus: functions.states-opacity($color, focus) + $opacity-modifier,\n press: functions.states-opacity($color, press) + $opacity-modifier,\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// 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-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.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// 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$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// 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:math\";\n@use \"@material/elevation/mixins\" as elevation-mixins;\n@use \"@material/feature-targeting/functions\";\n@use \"@material/feature-targeting/mixins\" as feature-targeting-mixins;\n@use \"@material/ripple/mixins\" as ripple-mixins;\n@use \"@material/rtl/mixins\" as rtl-mixins;\n@use \"@material/shape/mixins\" as shape-mixins;\n@use \"@material/theme/mixins\" as theme-mixins;\n@use \"./variables\";\n@use \"@material/theme/variables\" as theme-variables;\n\n//\n// Public\n//\n\n@mixin core-styles($query: functions.all()) {\n @include without-ripple($query);\n @include ripple($query);\n}\n\n// This API is intended for use by frameworks that may want to separate the ripple-related styles from the other\n// card styles. It is recommended that most users use `mdc-card-core-styles` instead.\n@mixin without-ripple($query: functions.all()) {\n // postcss-bem-linter: define card\n\n $feat-color: functions.create-target($query, color);\n $feat-structure: functions.create-target($query, structure);\n\n @include elevation-mixins.overlay-common($query); // COPYBARA_COMMENT_THIS_LINE\n\n .mdc-card {\n @include shape-radius(variables.$shape-radius, $query: $query);\n @include fill-color(surface, $query);\n @include elevation-mixins.overlay-surface-position($query: $query);\n @include elevation-mixins.overlay-dimensions(100%, $query: $query);\n @include elevation-mixins.elevation(1, $query: $query);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n @include container-layout_;\n }\n }\n\n .mdc-card--outlined {\n @include elevation-mixins.elevation(0, $query: $query);\n @include outline(variables.$outline-color, $query: $query);\n }\n\n //\n // Media\n //\n\n .mdc-card__media {\n @include feature-targeting-mixins.targets($feat-structure) {\n position: relative; // Child element `__media-content` has `position: absolute`\n box-sizing: border-box;\n background-repeat: no-repeat;\n background-position: center;\n background-size: cover;\n }\n\n &::before {\n @include feature-targeting-mixins.targets($feat-structure) {\n display: block;\n content: '';\n }\n }\n }\n\n .mdc-card__media:first-child {\n @include feature-targeting-mixins.targets($feat-structure) {\n border-top-left-radius: inherit;\n border-top-right-radius: inherit;\n }\n }\n\n .mdc-card__media:last-child {\n @include feature-targeting-mixins.targets($feat-structure) {\n border-bottom-left-radius: inherit;\n border-bottom-right-radius: inherit;\n }\n }\n\n .mdc-card__media--square {\n @include media-aspect-ratio(1, 1, $query);\n }\n\n .mdc-card__media--16-9 {\n @include media-aspect-ratio(16, 9, $query);\n }\n\n .mdc-card__media-content {\n @include feature-targeting-mixins.targets($feat-structure) {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n box-sizing: border-box;\n }\n }\n\n //\n // Primary action\n //\n\n .mdc-card__primary-action {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include container-layout_;\n\n position: relative; // Needed to prevent the ripple wash from overflowing the container in IE and Edge\n outline: none;\n color: inherit;\n text-decoration: none;\n cursor: pointer;\n overflow: hidden;\n }\n }\n\n .mdc-card__primary-action:first-child {\n @include feature-targeting-mixins.targets($feat-structure) {\n border-top-left-radius: inherit;\n border-top-right-radius: inherit;\n }\n }\n\n .mdc-card__primary-action:last-child {\n @include feature-targeting-mixins.targets($feat-structure) {\n border-bottom-left-radius: inherit;\n border-bottom-right-radius: inherit;\n }\n }\n\n //\n // Action row\n //\n\n .mdc-card__actions {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include actions-layout_;\n\n min-height: 52px;\n padding: 8px;\n }\n }\n\n .mdc-card__actions--full-bleed {\n @include feature-targeting-mixins.targets($feat-structure) {\n padding: 0;\n }\n }\n\n .mdc-card__action-buttons,\n .mdc-card__action-icons {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include actions-layout_;\n }\n }\n\n .mdc-card__action-icons {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(color, variables.$action-icon-color);\n }\n\n @include feature-targeting-mixins.targets($feat-structure) {\n flex-grow: 1;\n justify-content: flex-end;\n }\n }\n\n .mdc-card__action-buttons + .mdc-card__action-icons {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include rtl-mixins.reflexive-box(margin, left, 16px);\n }\n }\n\n //\n // Action items\n //\n\n .mdc-card__action {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include actions-layout_(inline-flex);\n\n justify-content: center;\n cursor: pointer;\n user-select: none;\n }\n\n &:focus {\n @include feature-targeting-mixins.targets($feat-structure) {\n outline: none;\n }\n }\n }\n\n //\n // Action buttons\n //\n\n .mdc-card__action--button {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include rtl-mixins.reflexive-box(margin, right, 8px);\n\n padding: 0 8px;\n }\n\n &:last-child {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include rtl-mixins.reflexive-box(margin, right, 0);\n }\n }\n }\n\n .mdc-card__actions--full-bleed .mdc-card__action--button {\n @include feature-targeting-mixins.targets($feat-structure) {\n justify-content: space-between;\n width: 100%;\n height: auto;\n max-height: none;\n margin: 0;\n padding: 8px 16px;\n /* @noflip */\n text-align: left;\n }\n\n @include rtl-mixins.rtl {\n @include feature-targeting-mixins.targets($feat-structure) {\n /* @noflip */\n text-align: right;\n }\n }\n }\n\n //\n // Action icons\n //\n\n .mdc-card__action--icon {\n @include feature-targeting-mixins.targets($feat-structure) {\n // Icon buttons are taller than buttons, so we need to adjust their margins to prevent the action row from\n // expanding.\n margin: -6px 0;\n\n // Same padding as mdc-icon-button.\n padding: 12px;\n }\n }\n\n .mdc-card__action--icon:not(:disabled) {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(color, variables.$action-icon-color);\n }\n }\n\n // postcss-bem-linter: end\n}\n\n// This API is intended for use by frameworks that may want to separate the ripple-related styles from the other\n// card styles. It is recommended that most users use `mdc-card-core-styles` instead.\n@mixin ripple($query: functions.all()) {\n @include ripple-mixins.common($query); // COPYBARA_COMMENT_THIS_LINE\n\n .mdc-card__primary-action {\n @include ripple-mixins.surface($query);\n @include ripple-mixins.radius-bounded($query: $query);\n @include ripple-mixins.states($query: $query);\n }\n}\n\n@mixin fill-color($color, $query: functions.all()) {\n $feat-color: functions.create-target($query, color);\n\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(background-color, $color);\n }\n}\n\n@mixin outline(\n $color,\n $thickness: variables.$outline-width,\n $query: functions.all()\n) {\n $feat-color: functions.create-target($query, color);\n $feat-structure: functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n border-width: $thickness;\n border-style: solid;\n }\n\n @include feature-targeting-mixins.targets($feat-color) {\n border-color: theme-variables.prop-value($color);\n }\n}\n\n@mixin shape-radius($radius, $rtl-reflexive: false, $query: functions.all()) {\n @include shape-mixins.radius($radius, $rtl-reflexive, $query: $query);\n}\n\n@mixin media-aspect-ratio($x, $y, $query: functions.all()) {\n $feat-structure: functions.create-target($query, structure);\n\n &::before {\n @include feature-targeting-mixins.targets($feat-structure) {\n // This clever trick brought to you by: http://www.mademyday.de/css-height-equals-width-with-pure-css.html\n margin-top: math.percentage($y / $x);\n }\n }\n}\n\n//\n// Private\n//\n\n@mixin container-layout_ {\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n}\n\n@mixin actions-layout_($display: flex) {\n display: $display;\n flex-direction: row;\n align-items: center;\n box-sizing: border-box;\n}\n","//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use \"sass:color\";\n@use \"@material/theme/mixins\";\n@use \"@material/theme/variables\";\n\n$action-icon-color: rgba(\n variables.prop-value(on-surface),\n variables.text-emphasis(medium)\n) !default;\n$outline-color: color.mix(\n variables.prop-value(on-surface),\n variables.prop-value(surface),\n 12%\n) !default;\n$outline-width: 1px !default;\n$shape-radius: medium !default;\n","//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use \"@material/animation/variables\" as animation-variables;\n@use \"@material/theme/mixins\";\n@use \"./variables\";\n\n@mixin container-keyframes_(\n $from-stroke-color,\n $to-stroke-color,\n $from-fill-color,\n $to-fill-color,\n $uid\n) {\n @keyframes mdc-checkbox-fade-in-background-#{$uid} {\n 0% {\n @include mixins.prop(border-color, $from-stroke-color);\n @include mixins.prop(background-color, $from-fill-color);\n }\n\n 50% {\n @include mixins.prop(border-color, $to-stroke-color);\n @include mixins.prop(background-color, $to-fill-color);\n }\n }\n\n @keyframes mdc-checkbox-fade-out-background-#{$uid} {\n 0%,\n 80% {\n @include mixins.prop(border-color, $to-stroke-color);\n @include mixins.prop(background-color, $to-fill-color);\n }\n\n 100% {\n @include mixins.prop(border-color, $from-stroke-color);\n @include mixins.prop(background-color, $from-fill-color);\n }\n }\n}\n\n@mixin mark-keyframes_ {\n @keyframes mdc-checkbox-unchecked-checked-checkmark-path {\n 0%,\n 50% {\n stroke-dashoffset: variables.$mark-path-length_;\n }\n\n 50% {\n animation-timing-function: animation-variables.$deceleration-curve-timing-function;\n }\n\n 100% {\n stroke-dashoffset: 0;\n }\n }\n\n @keyframes mdc-checkbox-unchecked-indeterminate-mixedmark {\n 0%,\n 68.2% {\n transform: scaleX(0);\n }\n\n 68.2% {\n animation-timing-function: cubic-bezier(0, 0, 0, 1);\n }\n\n 100% {\n transform: scaleX(1);\n }\n }\n\n @keyframes mdc-checkbox-checked-unchecked-checkmark-path {\n from {\n animation-timing-function: animation-variables.$acceleration-curve-timing-function;\n opacity: 1;\n stroke-dashoffset: 0;\n }\n\n to {\n opacity: 0;\n stroke-dashoffset: variables.$mark-path-length_ * -1;\n }\n }\n\n @keyframes mdc-checkbox-checked-indeterminate-checkmark {\n from {\n animation-timing-function: animation-variables.$deceleration-curve-timing-function;\n transform: rotate(0deg);\n opacity: 1;\n }\n\n to {\n transform: rotate(45deg);\n opacity: 0;\n }\n }\n\n @keyframes mdc-checkbox-indeterminate-checked-checkmark {\n from {\n animation-timing-function: variables.$indeterminate-checked-easing-function_;\n transform: rotate(45deg);\n opacity: 0;\n }\n\n to {\n transform: rotate(360deg);\n opacity: 1;\n }\n }\n\n @keyframes mdc-checkbox-checked-indeterminate-mixedmark {\n from {\n animation-timing-function: mdc-animation-deceleration-curve-timing-function;\n transform: rotate(-45deg);\n opacity: 0;\n }\n\n to {\n transform: rotate(0deg);\n opacity: 1;\n }\n }\n\n @keyframes mdc-checkbox-indeterminate-checked-mixedmark {\n from {\n animation-timing-function: variables.$indeterminate-checked-easing-function_;\n transform: rotate(0deg);\n opacity: 1;\n }\n\n to {\n transform: rotate(315deg);\n opacity: 0;\n }\n }\n\n @keyframes mdc-checkbox-indeterminate-unchecked-mixedmark {\n 0% {\n animation-timing-function: linear;\n transform: scaleX(1);\n opacity: 1;\n }\n\n 32.8%,\n 100% {\n transform: scaleX(0);\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@use \"sass:map\";\n@use \"@material/ripple/variables\" as ripple-variables;\n@use \"@material/theme/variables\" as theme-variables;\n@use \"@material/density/variables\" as density-variables;\n\n$baseline-theme-color: secondary !default;\n$mark-color: theme-variables.prop-value(on-secondary) !default;\n$border-color: rgba(theme-variables.prop-value(on-surface), 0.54) !default;\n$disabled-color: rgba(theme-variables.prop-value(on-surface), 0.38) !default;\n\n$ripple-size: 40px !default;\n$icon-size: 18px !default;\n$mark-stroke-size: 2 / 15 * $icon-size !default;\n$border-width: 2px !default;\n$transition-duration: 90ms !default;\n$item-spacing: 4px !default;\n$focus-indicator-opacity: map.get(\n ripple-variables.$dark-ink-opacities,\n focus\n) !default;\n\n$minimum-size: 28px !default;\n$maximum-size: $ripple-size !default;\n$density-scale: density-variables.$default-scale !default;\n$density-config: (\n size: (\n minimum: $minimum-size,\n default: $ripple-size,\n maximum: $maximum-size,\n ),\n) !default;\n\n// Manual calculation done on SVG\n$mark-path-length_: 29.7833385 !default;\n$indeterminate-checked-easing-function_: cubic-bezier(0.14, 0, 0, 1) !default;\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@use \"sass:math\";\n@use \"@material/animation/functions\" as functions2;\n@use \"@material/density/functions\" as density-functions;\n@use \"@material/feature-targeting/functions\" as feature-targeting-functions;\n@use \"@material/feature-targeting/mixins\" as feature-targeting-mixins;\n@use \"@material/ripple/mixins\" as ripple-mixins;\n@use \"@material/touch-target/mixins\" as touch-target-mixins;\n@use \"@material/theme/functions\" as theme-functions;\n@use \"./functions\";\n@use \"./keyframes\";\n@use \"./variables\";\n@use \"@material/theme/mixins\" as theme-mixins;\n@use \"@material/touch-target/variables\" as touch-target-variables;\n\n//\n// Public\n//\n\n$ripple-target: '.mdc-checkbox__ripple';\n\n///\n/// Checkbox core styles.\n///\n@mixin core-styles($query: feature-targeting-functions.all()) {\n @include without-ripple($query);\n @include ripple($query);\n}\n\n// This API is intended for use by frameworks that may want to separate the ripple-related styles from the other\n// checkbox styles. It is recommended that most users use `mdc-checkbox-core-styles` instead.\n@mixin without-ripple($query: feature-targeting-functions.all()) {\n // postcss-bem-linter: define checkbox\n\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n $feat-color: feature-targeting-functions.create-target($query, color);\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include touch-target-mixins.wrapper($query); // COPYBARA_COMMENT_THIS_LINE\n\n @include feature-targeting-mixins.targets($feat-animation) {\n @include keyframes.mark-keyframes_;\n }\n\n .mdc-checkbox {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include base_;\n }\n\n @include focus-indicator-color(\n variables.$baseline-theme-color,\n $query: $query\n );\n @include density(variables.$density-scale, $query: $query);\n }\n\n @include container-colors($query: $query);\n @include disabled-container-colors($query: $query);\n @include ink-color(variables.$mark-color, $query: $query);\n @include disabled-ink-color(variables.$mark-color, $query: $query);\n\n @media screen and (-ms-high-contrast: active) {\n @include disabled-container-colors(\n $unmarked-stroke-color: GrayText,\n $unmarked-fill-color: transparent,\n $marked-stroke-color: GrayText,\n $marked-fill-color: transparent,\n $query: $query\n );\n @include disabled-ink-color(GrayText, $query: $query);\n\n .mdc-checkbox__mixedmark {\n @include feature-targeting-mixins.targets($feat-structure) {\n margin: 0 1px; // Extra horizontal space around mixedmark symbol.\n }\n }\n }\n\n // Needed to disable hover effects on CSS-only (non-JS) checkboxes\n .mdc-checkbox--disabled {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include disabled_;\n }\n }\n\n .mdc-checkbox__background {\n @include background_($query);\n }\n\n .mdc-checkbox__checkmark {\n @include checkmark_($query);\n }\n\n .mdc-checkbox__checkmark-path {\n @include checkmark-path_($query);\n }\n\n .mdc-checkbox__mixedmark {\n @include mixedmark_($query);\n }\n\n // JS checkbox\n .mdc-checkbox--upgraded {\n .mdc-checkbox__background,\n .mdc-checkbox__checkmark,\n .mdc-checkbox__checkmark-path,\n .mdc-checkbox__mixedmark {\n @include feature-targeting-mixins.targets($feat-animation) {\n @include child--upgraded_;\n }\n }\n }\n\n .mdc-checkbox--anim {\n @include feature-targeting-mixins.targets($feat-animation) {\n @include anim_;\n }\n }\n\n .mdc-checkbox__native-control:checked ~ .mdc-checkbox__background,\n .mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background,\n .mdc-checkbox__native-control[data-indeterminate='true']\n ~ .mdc-checkbox__background {\n @include feature-targeting-mixins.targets($feat-animation) {\n @include background--marked_;\n }\n\n .mdc-checkbox__checkmark-path {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include checkmark-path--marked_;\n }\n }\n }\n\n // The frame's ::before element is used as a focus indicator for the checkbox\n .mdc-checkbox__background::before {\n @include focus-indicator_($query);\n }\n\n .mdc-checkbox__native-control:focus ~ .mdc-checkbox__background::before {\n @include focus-indicator--focused_($query);\n }\n\n .mdc-checkbox__native-control {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include native-control_;\n }\n\n &:disabled {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include disabled_;\n }\n }\n }\n\n .mdc-checkbox--touch {\n @include touch-target-mixins.margin(\n $component-height: variables.$ripple-size,\n $component-width: variables.$ripple-size,\n $query: $query\n );\n @include touch-target(touch-target-variables.$height, $query: $query);\n }\n\n .mdc-checkbox__native-control:checked ~ .mdc-checkbox__background {\n .mdc-checkbox__checkmark {\n @include checkmark--checked_($query);\n }\n\n .mdc-checkbox__mixedmark {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include mixedmark--checked_;\n }\n }\n }\n .mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background,\n .mdc-checkbox__native-control[data-indeterminate='true']\n ~ .mdc-checkbox__background {\n .mdc-checkbox__checkmark {\n @include checkmark--indeterminate_($query);\n }\n\n .mdc-checkbox__mixedmark {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include mixedmark--indeterminate_;\n }\n }\n }\n\n // postcss-bem-linter: end\n}\n\n// This API is intended for use by frameworks that may want to separate the ripple-related styles from the other\n// checkbox styles. It is recommended that most users use `mdc-checkbox-core-styles` instead.\n@mixin ripple($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include ripple-mixins.common($query); // COPYBARA_COMMENT_THIS_LINE\n\n .mdc-checkbox {\n @include ripple-mixins.surface(\n $query: $query,\n $ripple-target: $ripple-target\n );\n @include ripple-mixins.states(\n $color: on-surface,\n $query: $query,\n $ripple-target: $ripple-target\n );\n @include ripple-mixins.radius-unbounded(\n $query: $query,\n $ripple-target: $ripple-target\n );\n }\n\n #{$ripple-target} {\n @include ripple-mixins.target-common($query: $query);\n }\n\n .mdc-ripple-upgraded--background-focused .mdc-checkbox__background::before {\n @include feature-targeting-mixins.targets($feat-structure) {\n content: none;\n }\n }\n}\n\n///\n/// Sets density scale for checkbox.\n///\n/// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values\n/// `-3`, `-2`, `-1`, `0`.\n///\n@mixin density($density-scale, $query: feature-targeting-functions.all()) {\n $size: density-functions.prop-value(\n $density-config: variables.$density-config,\n $density-scale: $density-scale,\n $property-name: size,\n );\n\n @include ripple-size($size, $query: $query);\n\n @if $density-scale != 0 {\n @include touch-target-reset_($query: $query);\n }\n}\n\n@mixin ripple-size($ripple-size, $query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n $checkbox-padding: ($ripple-size - variables.$icon-size) / 2;\n\n @include feature-targeting-mixins.targets($feat-structure) {\n padding: $checkbox-padding;\n }\n\n .mdc-checkbox__background {\n @include feature-targeting-mixins.targets($feat-structure) {\n top: $checkbox-padding;\n left: $checkbox-padding;\n }\n }\n\n .mdc-checkbox__background::before {\n @include feature-targeting-mixins.targets($feat-structure) {\n top: -(variables.$border-width) - $checkbox-padding;\n left: -(variables.$border-width) - $checkbox-padding;\n width: $ripple-size;\n height: $ripple-size;\n }\n }\n\n @include touch-target(\n $ripple-size,\n $ripple-size: $ripple-size,\n $query: $query\n );\n}\n\n///\n/// Sets stroke & fill colors for both marked and unmarked state of enabled checkbox.\n/// Set $generate-keyframes to false to prevent the mixin from generating @keyframes\n/// @param {Color} $unmarked-stroke-color - The desired stroke color for the unmarked state\n/// @param {Color} $unmarked-fill-color - The desired fill color for the unmarked state\n/// @param {Color} $marked-stroke-color - The desired stroke color for the marked state\n/// @param {Color} $marked-fill-color - The desired fill color for the marked state\n/// @param {Boolean} $generate-keyframes [true] - Whether animation keyframes should be generated\n///\n@mixin container-colors(\n $unmarked-stroke-color: variables.$border-color,\n $unmarked-fill-color: transparent,\n $marked-stroke-color: variables.$baseline-theme-color,\n $marked-fill-color: variables.$baseline-theme-color,\n $generate-keyframes: true,\n $query: feature-targeting-functions.all()\n) {\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n @include if-unmarked-enabled_ {\n @include container-colors_(\n $unmarked-stroke-color,\n $unmarked-fill-color,\n $query: $query\n );\n }\n\n @include if-marked-enabled_ {\n @include container-colors_(\n $marked-stroke-color,\n $marked-fill-color,\n $query: $query\n );\n }\n\n @if $generate-keyframes {\n $uid: theme-functions.color-hash($unmarked-stroke-color) +\n theme-functions.color-hash($marked-stroke-color) +\n theme-functions.color-hash($unmarked-fill-color) +\n theme-functions.color-hash($marked-fill-color);\n\n $anim-selector: if(&, '&.mdc-checkbox--anim', '.mdc-checkbox--anim');\n\n @include feature-targeting-mixins.targets($feat-animation, $feat-color) {\n @include keyframes.container-keyframes_(\n $from-stroke-color: $unmarked-stroke-color,\n $to-stroke-color: $marked-stroke-color,\n $from-fill-color: $unmarked-fill-color,\n $to-fill-color: $marked-fill-color,\n $uid: #{$uid}\n );\n }\n\n // stylelint-disable max-nesting-depth\n\n #{$anim-selector} {\n &-unchecked-checked,\n &-unchecked-indeterminate {\n .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background {\n @include feature-targeting-mixins.targets($feat-animation) {\n animation-name: mdc-checkbox-fade-in-background-#{$uid};\n }\n }\n }\n\n &-checked-unchecked,\n &-indeterminate-unchecked {\n .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background {\n @include feature-targeting-mixins.targets($feat-animation) {\n animation-name: mdc-checkbox-fade-out-background-#{$uid};\n }\n }\n }\n }\n\n // stylelint-enable max-nesting-depth\n }\n}\n\n///\n/// Sets stroke & fill colors for both marked and unmarked state of disabled checkbox.\n/// @param {Color} $unmarked-stroke-color - The desired stroke color for the unmarked state\n/// @param {Color} $unmarked-fill-color - The desired fill color for the unmarked state\n/// @param {Color} $marked-stroke-color - The desired stroke color for the marked state\n/// @param {Color} $marked-fill-color - The desired fill color for the marked state\n///\n@mixin disabled-container-colors(\n $unmarked-stroke-color: variables.$disabled-color,\n $unmarked-fill-color: transparent,\n $marked-stroke-color: transparent,\n $marked-fill-color: variables.$disabled-color,\n $query: feature-targeting-functions.all()\n) {\n @include if-unmarked-disabled_ {\n @include container-colors_(\n $unmarked-stroke-color,\n $unmarked-fill-color,\n $query: $query\n );\n }\n\n @include if-marked-disabled_ {\n @include container-colors_(\n $marked-stroke-color,\n $marked-fill-color,\n $query: $query\n );\n }\n}\n\n///\n/// Sets the ink color of the checked and indeterminate icons for an enabled checkbox\n/// @param {Color} $color - The desired ink color in enabled state\n///\n@mixin ink-color($color, $query: feature-targeting-functions.all()) {\n @include if-enabled_ {\n @include ink-color_($color, $query: $query);\n }\n}\n\n///\n/// Sets the ink color of the checked and indeterminate icons for a disabled checkbox\n/// @param {Color} $color - The desired ink color in disabled state\n///\n@mixin disabled-ink-color($color, $query: feature-targeting-functions.all()) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n @include if-disabled_ {\n @include ink-color_($color, $query: $query);\n }\n}\n\n@mixin focus-indicator-color(\n $color,\n $query: feature-targeting-functions.all()\n) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n .mdc-checkbox__native-control:checked ~ .mdc-checkbox__background::before,\n .mdc-checkbox__native-control:indeterminate\n ~ .mdc-checkbox__background::before,\n .mdc-checkbox__native-control[data-indeterminate='true']\n ~ .mdc-checkbox__background::before {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(background-color, $color);\n }\n }\n\n &.mdc-checkbox--selected {\n @include ripple-mixins.states(\n $color: $color,\n $query: $query,\n $ripple-target: $ripple-target\n );\n }\n\n &.mdc-ripple-upgraded--background-focused.mdc-checkbox--selected {\n @include ripple-mixins.states-base-color(\n $color: $color,\n $query: $query,\n $ripple-target: $ripple-target\n );\n }\n}\n\n///\n/// Sets checkbox touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom\n/// ripple size.\n///\n/// @param {Number} $size Size of touch target (Native input) in `px`.\n/// @param {Number} $ripple-size Size of ripple in `px`. Required only for custom ripple size.\n///\n@mixin touch-target(\n $size: variables.$ripple-size,\n $ripple-size: variables.$ripple-size,\n $query: feature-targeting-functions.all()\n) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n $offset: ($ripple-size - $size) / 2;\n\n @include feature-targeting-mixins.targets($feat-structure) {\n .mdc-checkbox__native-control {\n top: $offset;\n right: $offset;\n left: $offset;\n width: $size;\n height: $size;\n }\n }\n}\n\n//\n// Private\n//\n\n@mixin base_ {\n display: inline-block;\n position: relative;\n flex: 0 0 variables.$icon-size;\n box-sizing: content-box;\n width: variables.$icon-size;\n height: variables.$icon-size;\n line-height: 0;\n white-space: nowrap;\n cursor: pointer;\n vertical-align: bottom;\n}\n\n@mixin disabled_ {\n cursor: default;\n pointer-events: none;\n}\n\n@mixin child--upgraded_ {\n // Due to the myriad of selector combos used to properly style a CSS-only checkbox, all of\n // which have varying selector precedence and make use of transitions, it is cleaner and more\n // efficient here to simply use !important, since the mdc-checkbox--anim-* classes will take\n // over from here.\n transition: none !important;\n}\n\n// Animation\n\n@mixin anim_ {\n $mdc-checkbox-indeterminate-change-duration_: 500ms;\n\n // stylelint-disable selector-max-type\n\n &-unchecked-checked,\n &-unchecked-indeterminate,\n &-checked-unchecked,\n &-indeterminate-unchecked {\n .mdc-checkbox__background {\n animation-duration: variables.$transition-duration * 2;\n animation-timing-function: linear;\n }\n }\n\n &-unchecked-checked {\n .mdc-checkbox__checkmark-path {\n // Instead of delaying the animation, we simply multiply its length by 2 and begin the\n // animation at 50% in order to prevent a flash of styles applied to a checked checkmark\n // as the background is fading in before the animation begins.\n animation: mdc-checkbox-unchecked-checked-checkmark-path\n variables.$transition-duration * 2 linear 0s;\n transition: none;\n }\n }\n\n &-unchecked-indeterminate {\n .mdc-checkbox__mixedmark {\n animation: mdc-checkbox-unchecked-indeterminate-mixedmark\n variables.$transition-duration linear 0s;\n transition: none;\n }\n }\n\n &-checked-unchecked {\n .mdc-checkbox__checkmark-path {\n animation: mdc-checkbox-checked-unchecked-checkmark-path\n variables.$transition-duration linear 0s;\n transition: none;\n }\n }\n\n &-checked-indeterminate {\n .mdc-checkbox__checkmark {\n animation: mdc-checkbox-checked-indeterminate-checkmark\n variables.$transition-duration linear 0s;\n transition: none;\n }\n\n .mdc-checkbox__mixedmark {\n animation: mdc-checkbox-checked-indeterminate-mixedmark\n variables.$transition-duration linear 0s;\n transition: none;\n }\n }\n\n &-indeterminate-checked {\n .mdc-checkbox__checkmark {\n animation: mdc-checkbox-indeterminate-checked-checkmark\n $mdc-checkbox-indeterminate-change-duration_ linear 0s;\n transition: none;\n }\n\n .mdc-checkbox__mixedmark {\n animation: mdc-checkbox-indeterminate-checked-mixedmark\n $mdc-checkbox-indeterminate-change-duration_ linear 0s;\n transition: none;\n }\n }\n\n &-indeterminate-unchecked {\n .mdc-checkbox__mixedmark {\n // stylelint-disable-next-line declaration-colon-space-after\n animation: mdc-checkbox-indeterminate-unchecked-mixedmark\n $mdc-checkbox-indeterminate-change-duration_ * 0.6 linear 0s;\n transition: none;\n }\n }\n\n // stylelint-enable selector-max-type\n}\n\n// Background\n\n///\n/// Helps select the checkbox background only when its native control is in\n/// enabled state.\n/// @access private\n///\n@mixin if-enabled_ {\n .mdc-checkbox__native-control:enabled ~ {\n @content;\n }\n}\n\n///\n/// Helps select the checkbox background only when its native control is in\n/// disabled state.\n/// @access private\n///\n@mixin if-disabled_ {\n .mdc-checkbox__native-control:disabled ~ {\n @content;\n }\n}\n\n///\n/// Helps select the checkbox background only when its native control is in\n/// unmarked & enabled state.\n/// @access private\n///\n@mixin if-unmarked-enabled_ {\n .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate='true'])\n ~ {\n @content;\n }\n}\n\n///\n/// Helps select the checkbox background only when its native control is in\n/// unmarked & disabled state.\n/// @access private\n///\n@mixin if-unmarked-disabled_ {\n // Note: we must use `[disabled]` instead of `:disabled` below because Edge does not always recalculate the style\n // property when the `:disabled` pseudo-class is followed by a sibling combinator. See:\n // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11295231/\n .mdc-checkbox__native-control[disabled]:not(:checked):not(:indeterminate):not([data-indeterminate='true'])\n ~ {\n @content;\n }\n}\n\n///\n/// Helps select the checkbox background only when its native control is in\n/// marked & enabled state.\n/// @access private\n///\n@mixin if-marked-enabled_ {\n .mdc-checkbox__native-control:enabled:checked,\n .mdc-checkbox__native-control:enabled:indeterminate,\n .mdc-checkbox__native-control[data-indeterminate='true']:enabled {\n ~ {\n @content;\n }\n }\n}\n\n///\n/// Helps select the checkbox background only when its native control is in\n/// marked & disabled state.\n/// @access private\n///\n@mixin if-marked-disabled_ {\n // Note: we must use `[disabled]` instead of `:disabled` below because Edge does not always recalculate the style\n // property when the `:disabled` pseudo-class is followed by a sibling combinator. See:\n // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11295231/\n .mdc-checkbox__native-control[disabled]:checked,\n .mdc-checkbox__native-control[disabled]:indeterminate,\n .mdc-checkbox__native-control[data-indeterminate='true'][disabled] {\n ~ {\n @content;\n }\n }\n}\n\n@mixin background_($query: feature-targeting-functions.all()) {\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n display: inline-flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: variables.$icon-size;\n height: variables.$icon-size;\n // border-color is overridden by the mdc-checkbox-unmarked-stroke-color() mixin\n border: variables.$border-width solid currentColor;\n border-radius: 2px;\n background-color: transparent;\n pointer-events: none;\n will-change: background-color, border-color;\n }\n\n .mdc-checkbox__background::before {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(background-color, on-surface);\n }\n }\n\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: functions.transition-exit(background-color),\n functions.transition-exit(border-color);\n }\n}\n\n@mixin background--marked_ {\n transition: functions.transition-enter(border-color),\n functions.transition-enter(background-color);\n}\n\n///\n/// Sets the stroke & fill colors for the checkbox.\n/// This mixin should be wrapped in a mixin that qualifies state such as\n/// `mdc-checkbox-if-unmarked-enabled_`.\n/// @access private\n///\n@mixin container-colors_(\n $stroke-color,\n $fill-color,\n $query: feature-targeting-functions.all()\n) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n .mdc-checkbox__background {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(border-color, $stroke-color);\n @include theme-mixins.prop(background-color, $fill-color);\n }\n }\n}\n\n// Focus indicator\n\n@mixin focus-indicator_($query: feature-targeting-functions.all()) {\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n position: absolute;\n transform: scale(0, 0);\n border-radius: 50%;\n opacity: 0;\n pointer-events: none;\n content: '';\n will-change: opacity, transform;\n }\n\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: functions.transition-exit(opacity),\n functions.transition-exit(transform);\n }\n}\n\n@mixin focus-indicator--focused_($query: feature-targeting-functions.all()) {\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n transform: scale(1);\n opacity: variables.$focus-indicator-opacity;\n }\n\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: functions.transition-enter(opacity, 0ms, 80ms),\n functions.transition-enter(transform, 0ms, 80ms);\n }\n}\n\n// Native input\n\n@mixin native-control_ {\n position: absolute;\n margin: 0;\n padding: 0;\n opacity: 0;\n cursor: inherit;\n}\n\n// Check mark\n\n@mixin checkmark_($query: feature-targeting-functions.all()) {\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n opacity: 0;\n }\n\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: functions.transition-exit(\n opacity,\n 0ms,\n variables.$transition-duration * 2\n );\n }\n\n .mdc-checkbox--upgraded & {\n @include feature-targeting-mixins.targets($feat-structure) {\n opacity: 1;\n }\n }\n}\n\n@mixin checkmark--checked_($query: feature-targeting-functions.all()) {\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: functions.transition-enter(\n opacity,\n 0ms,\n variables.$transition-duration * 2\n ),\n functions.transition-enter(\n transform,\n 0ms,\n variables.$transition-duration * 2\n );\n }\n\n @include feature-targeting-mixins.targets($feat-structure) {\n opacity: 1;\n }\n}\n\n@mixin checkmark--indeterminate_($query: feature-targeting-functions.all()) {\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n transform: rotate(45deg);\n opacity: 0;\n }\n\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: functions.transition-exit(\n opacity,\n 0ms,\n variables.$transition-duration\n ),\n functions.transition-exit(transform, 0ms, variables.$transition-duration);\n }\n}\n\n///\n/// Sets the ink color of the checked and indeterminate icons for a checkbox.\n/// This mixin should be wrapped in a mixin that qualifies state such as\n/// `mdc-checkbox-if-unmarked_`.\n/// @access private\n///\n@mixin ink-color_($color, $query: feature-targeting-functions.all()) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n .mdc-checkbox__background {\n .mdc-checkbox__checkmark {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(color, $color);\n }\n }\n\n .mdc-checkbox__mixedmark {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(border-color, $color);\n }\n }\n }\n}\n\n// Check mark path\n\n@mixin checkmark-path_($query: feature-targeting-functions.all()) {\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: functions.transition-exit(\n stroke-dashoffset,\n 0ms,\n variables.$transition-duration * 2\n );\n }\n\n @include feature-targeting-mixins.targets($feat-structure) {\n stroke: currentColor;\n stroke-width: variables.$mark-stroke-size * 1.3;\n stroke-dashoffset: variables.$mark-path-length_;\n stroke-dasharray: variables.$mark-path-length_;\n }\n}\n\n@mixin checkmark-path--marked_ {\n stroke-dashoffset: 0;\n}\n\n// Mixed mark\n\n@mixin mixedmark_($query: feature-targeting-functions.all()) {\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n width: 100%;\n height: 0;\n transform: scaleX(0) rotate(0deg);\n border-width: math.floor(variables.$mark-stroke-size) / 2;\n border-style: solid;\n opacity: 0;\n }\n\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: functions.transition-exit(opacity),\n functions.transition-exit(transform);\n }\n}\n\n@mixin mixedmark--checked_ {\n transform: scaleX(1) rotate(-45deg);\n}\n\n@mixin mixedmark--indeterminate_ {\n transform: scaleX(1) rotate(0deg);\n opacity: 1;\n}\n\n///\n/// Resets touch target-related styles. This is called from the density mixin to\n/// automatically remove the increased touch target, since dense components\n/// don't have the same default a11y requirements.\n/// @access private\n///\n@mixin touch-target-reset_($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n margin: 0;\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 \"@material/feature-targeting/mixins\" as feature-mixins;\n@use \"@material/feature-targeting/functions\" as feature-functions;\n@use \"@material/ripple/mixins\" as ripple;\n@use \"@material/rtl/mixins\" as rtl;\n@use \"@material/theme/mixins\" as theme;\n@use \"@material/touch-target/mixins\" as touch;\n@use \"./variables\";\n\n$ripple-target: '.mdc-chip-trailing-action__ripple';\n\n@mixin core-styles($query: feature-functions.all()) {\n @include without-ripple($query: $query);\n @include ripple($query: $query);\n}\n\n@mixin without-ripple($query: feature-functions.all()) {\n $feat-structure: feature-functions.create-target($query, structure);\n $feat-color: feature-functions.create-target($query, color);\n\n @include touch.wrapper($query); // COPYBARA_COMMENT_THIS_LINE\n @include _touch-target-base($query);\n\n .mdc-chip-trailing-action {\n @include size(variables.$size, $query);\n @include color(variables.$color, $query);\n @include touch-target-width(variables.$touch-target-width, $query);\n\n @include feature-mixins.targets($feat-structure) {\n border: none;\n display: inline-flex;\n position: relative;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n padding: 0;\n outline: none;\n cursor: pointer;\n -webkit-appearance: none;\n }\n\n @include feature-mixins.targets($feat-color) {\n background: none;\n }\n\n // Nested to increase specificity, ensuring SVG and font icon\n // color is affected regardless of load order without needing\n // !important or HTML tag targetting.\n .mdc-chip-trailing-action__icon {\n @include feature-mixins.targets($feat-color) {\n fill: currentColor;\n color: inherit;\n }\n }\n }\n}\n\n@mixin ripple($query: feature-functions.all()) {\n @include ripple.common($query); // COPYBARA_COMMENT_THIS_LINE\n $feat-structure: feature-functions.create-target($query, structure);\n\n .mdc-chip-trailing-action {\n @include ripple.surface($query: $query, $ripple-target: $ripple-target);\n @include ripple.radius-unbounded(\n $query: $query,\n $ripple-target: $ripple-target\n );\n @include ripple.states(\n variables.$ripple-color,\n $query: $query,\n $ripple-target: $ripple-target\n );\n\n #{$ripple-target} {\n @include feature-mixins.targets($feat-structure) {\n position: absolute;\n // Ripple needs content-box as the box sizing and box-sizing: border-box\n // is often set as a default, so we override that here.\n box-sizing: content-box;\n width: 100%;\n height: 100%;\n overflow: hidden;\n }\n }\n }\n}\n\n/// Set the color of the trailing action\n/// @param {Color} $color The trailing action color\n@mixin color($color, $query: feature-functions.all()) {\n $feat-color: feature-functions.create-target($query, color);\n\n .mdc-chip-trailing-action {\n @include feature-mixins.targets($feat-color) {\n @include theme.prop(color, $color);\n }\n }\n}\n\n/// Set the size of the trailing action\n/// @param {Number} $number The size of the trailing action\n@mixin size($size, $query: feature-functions.all()) {\n $feat-structure: feature-functions.create-target($query, structure);\n\n .mdc-chip-trailing-action__icon {\n @include feature-mixins.targets($feat-structure) {\n height: $size;\n width: $size;\n font-size: $size;\n }\n }\n}\n\n/// Set the horizontal spacing of the trailing action\n/// @param {Number} $left The left spacing\n/// @param {Number} $right The right spacing\n@mixin horizontal-spacing($left, $right, $query: feature-functions.all()) {\n $feat-structure: feature-functions.create-target($query, structure);\n\n .mdc-chip-trailing-action {\n @include feature-mixins.targets($feat-structure) {\n @include rtl.reflexive-property(margin, $left, $right);\n }\n }\n}\n\n/// Set the width of the touch target\n/// @param {Number} $width The width of the touch target\n@mixin touch-target-width($width, $query: feature-functions.all()) {\n $feat-structure: feature-functions.create-target($query, structure);\n\n .mdc-chip-trailing-action__touch {\n @include feature-mixins.targets($feat-structure) {\n width: $width;\n }\n }\n}\n\n/// Private mixins\n\n@mixin _touch-target-base($query: feature-functions.all()) {\n .mdc-chip-trailing-action__touch {\n @include touch.touch-target($set-width: true, $query: $query);\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$size: 18px !default;\n$margin-right: -4px !default;\n$margin-left: 4px !default;\n$touch-target-width: 26px !default;\n$color: on-surface !default;\n$ripple-color: on-surface !default;\n","//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use \"sass:math\";\n@use \"@material/animation/functions\";\n@use \"@material/animation/variables\" as animation-variables;\n@use \"@material/checkbox/functions\" as checkbox-functions;\n@use \"@material/checkbox/variables\" as checkbox-variables;\n@use \"@material/elevation/mixins\" as elevation-mixins;\n@use \"@material/density/functions\" as density-functions;\n@use \"@material/feature-targeting/functions\" as feature-targeting-functions;\n@use \"@material/feature-targeting/mixins\" as feature-targeting-mixins;\n@use \"@material/ripple/mixins\" as ripple-mixins;\n@use \"@material/rtl/mixins\" as rtl-mixins;\n@use \"@material/theme/functions\" as theme-functions;\n@use \"@material/theme/mixins\" as theme-mixins;\n@use \"@material/touch-target/mixins\" as touch-target-mixins;\n@use \"@material/typography/mixins\" as typography-mixins;\n@use \"@material/shape/mixins\" as shape-mixins;\n@use \"@material/shape/functions\" as shape-functions;\n@use \"./variables\";\n@use \"@material/elevation/functions\" as elevation-functions;\n@use \"@material/theme/variables\" as theme-variables;\n@use \"./trailingaction/mixins\" as trailing-action-mixins;\n\n$ripple-target: '.mdc-chip__ripple';\n\n@mixin core-styles($query: feature-targeting-functions.all()) {\n @include without-ripple($query: $query);\n @include ripple($query: $query);\n}\n\n@mixin without-ripple($query: feature-targeting-functions.all()) {\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n $feat-color: feature-targeting-functions.create-target($query, color);\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include leading-icon-color(variables.$icon-color, $query: $query);\n @include trailing-icon-color(variables.$icon-color, $query: $query);\n @include leading-icon-size(variables.$leading-icon-size, $query: $query);\n @include trailing-icon-size(variables.$trailing-icon-size, $query: $query);\n @include trailing-icon-margin($query: $query);\n @include touch-target-mixins.wrapper($query); // COPYBARA_COMMENT_THIS_LINE\n @include elevation-mixins.overlay-common($query); // COPYBARA_COMMENT_THIS_LINE\n\n .mdc-chip {\n @include shape-radius(variables.$shape-radius, $query: $query);\n @include fill-color(variables.$fill-color-default, $query: $query);\n @include ink-color-without-ripple_(\n variables.$ink-color-default,\n $query: $query\n );\n @include typography-mixins.typography(body2, $query: $query);\n @include density($density-scale: 0, $query: $query);\n @include leading-icon-margin($query: $query);\n @include elevation-mixins.overlay-surface-position($query: $query);\n @include elevation-mixins.overlay-dimensions(100%, $query: $query);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n display: inline-flex;\n // position: relative; already set in mdc-elevation-overlay-surface-position\n align-items: center;\n box-sizing: border-box;\n padding: 0 variables.$horizontal-padding;\n border-width: 0;\n outline: none;\n cursor: pointer;\n -webkit-appearance: none;\n\n &::-moz-focus-inner {\n padding: 0;\n border: 0;\n }\n }\n\n &:hover {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(color, on-surface);\n }\n }\n\n .mdc-chip__touch {\n @include touch-target-mixins.touch-target($query: $query);\n }\n }\n\n .mdc-chip--exit {\n @include feature-targeting-mixins.targets($feat-color) {\n transition: variables.$exit-transition;\n }\n\n @include feature-targeting-mixins.targets($feat-structure) {\n opacity: 0;\n }\n }\n\n .mdc-chip__overflow {\n @include feature-targeting-mixins.targets($feat-structure) {\n text-overflow: ellipsis;\n overflow: hidden;\n }\n }\n\n .mdc-chip__text {\n @include feature-targeting-mixins.targets($feat-structure) {\n white-space: nowrap;\n }\n }\n\n .mdc-chip__icon {\n @include feature-targeting-mixins.targets($feat-structure) {\n border-radius: 50%;\n outline: none;\n vertical-align: middle;\n }\n }\n\n .mdc-chip__checkmark {\n @include feature-targeting-mixins.targets($feat-structure) {\n height: variables.$leading-icon-size;\n }\n }\n\n .mdc-chip__checkmark-path {\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: checkbox-functions.transition-exit(\n stroke-dashoffset,\n variables.$checkmark-animation-delay,\n variables.$checkmark-animation-duration\n );\n }\n\n @include feature-targeting-mixins.targets($feat-structure) {\n stroke-width: 2px;\n stroke-dashoffset: checkbox-variables.$mark-path-length_;\n stroke-dasharray: checkbox-variables.$mark-path-length_;\n }\n }\n\n .mdc-chip__primary-action:focus {\n @include feature-targeting-mixins.targets($feat-structure) {\n outline: none;\n }\n }\n\n .mdc-chip--selected .mdc-chip__checkmark-path {\n @include feature-targeting-mixins.targets($feat-structure) {\n stroke-dashoffset: 0;\n }\n }\n\n .mdc-chip__icon--leading,\n .mdc-chip__icon--trailing {\n @include feature-targeting-mixins.targets($feat-structure) {\n // Make these positioned elements, such that they're stacked above the\n // touch target element (`mdc-chip__touch`), so that clicks reach the\n // icons (e.g. for removable input chips).\n position: relative;\n }\n }\n\n // Change color of selected choice chips\n\n .mdc-chip-set--choice {\n .mdc-chip {\n @include selected-ink-color-without-ripple_(primary, $query: $query);\n }\n\n .mdc-chip--selected {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(background-color, surface);\n }\n }\n }\n\n // Add leading checkmark to filter chips with no leading icon\n\n .mdc-chip__checkmark-svg {\n @include feature-targeting-mixins.targets($feat-structure) {\n width: 0;\n height: variables.$leading-icon-size;\n }\n\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: width variables.$width-animation-duration\n animation-variables.$standard-curve-timing-function;\n }\n }\n\n .mdc-chip--selected .mdc-chip__checkmark-svg {\n @include feature-targeting-mixins.targets($feat-structure) {\n width: variables.$leading-icon-size;\n }\n }\n\n // Add leading checkmark to filter chips with a leading icon\n\n .mdc-chip-set--filter {\n .mdc-chip__icon--leading {\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: opacity variables.$opacity-animation-duration linear;\n transition-delay: variables.$leading-icon-delay;\n }\n\n @include feature-targeting-mixins.targets($feat-structure) {\n opacity: 1;\n }\n\n + .mdc-chip__checkmark {\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: opacity variables.$opacity-animation-duration linear;\n\n // Delay the checkmark transition.\n transition-delay: variables.$checkmark-with-leading-icon-delay;\n }\n\n @include feature-targeting-mixins.targets($feat-structure) {\n opacity: 0;\n }\n\n .mdc-chip__checkmark-svg {\n // stylelint-disable max-nesting-depth\n\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: width 0ms;\n }\n\n // stylelint-enable max-nesting-depth\n }\n }\n }\n\n .mdc-chip--selected .mdc-chip__icon--leading {\n @include feature-targeting-mixins.targets($feat-structure) {\n opacity: 0;\n }\n\n + .mdc-chip__checkmark {\n @include feature-targeting-mixins.targets($feat-structure) {\n // This ensures that the checkmark has zero width while the leading icon is still animating.\n width: 0;\n opacity: 1;\n }\n }\n }\n\n .mdc-chip__icon--leading-hidden.mdc-chip__icon--leading {\n @include feature-targeting-mixins.targets($feat-structure) {\n width: 0;\n }\n\n @include feature-targeting-mixins.targets($feat-structure) {\n // This ensures that the leading icon doesn't fade in while the checkmark is fading out.\n opacity: 0;\n }\n\n + .mdc-chip__checkmark {\n @include feature-targeting-mixins.targets($feat-structure) {\n width: variables.$leading-icon-size;\n }\n }\n }\n }\n}\n\n@mixin ripple($query: feature-targeting-functions.all()) {\n @include ripple-mixins.common($query); // COPYBARA_COMMENT_THIS_LINE\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n .mdc-chip {\n @include ripple-mixins.surface(\n $query: $query,\n $ripple-target: $ripple-target\n );\n @include ripple-mixins.radius-bounded(\n $query: $query,\n $ripple-target: $ripple-target\n );\n @include ink-color-ripple_(variables.$ink-color-default, $query: $query);\n\n #{$ripple-target} {\n @include ripple-mixins.target-common($query: $query);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n overflow: hidden;\n }\n }\n }\n\n .mdc-chip-set--choice {\n .mdc-chip {\n @include selected-ink-color-ripple_(primary, $query: $query);\n }\n }\n}\n\n@mixin set-core-styles($query: feature-targeting-functions.all()) {\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-animation) {\n @keyframes mdc-chip-entry {\n from {\n transform: scale(0.8);\n opacity: 0.4;\n }\n\n to {\n transform: scale(1);\n opacity: 1;\n }\n }\n }\n\n .mdc-chip-set {\n @include set-spacing(8px, $query: $query);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n display: flex;\n flex-wrap: wrap;\n box-sizing: border-box;\n }\n }\n\n .mdc-chip-set--input .mdc-chip {\n @include feature-targeting-mixins.targets($feat-animation) {\n animation: mdc-chip-entry 100ms\n animation-variables.$deceleration-curve-timing-function;\n }\n }\n}\n\n@mixin shape-radius(\n $radius,\n $rtl-reflexive: false,\n $density-scale: variables.$density-scale,\n $query: feature-targeting-functions.all()\n) {\n $height: density-functions.prop-value(\n $density-config: variables.$density-config,\n $density-scale: $density-scale,\n $property-name: height,\n );\n\n @include shape-mixins.radius(\n $radius,\n $rtl-reflexive,\n $component-height: $height,\n $query: $query\n );\n\n #{$ripple-target} {\n @include shape-mixins.radius(\n $radius,\n $rtl-reflexive,\n $component-height: $height,\n $query: $query\n );\n }\n}\n\n@mixin fill-color-accessible(\n $color,\n $query: feature-targeting-functions.all()\n) {\n $fill-tone: theme-functions.tone($color);\n\n @include fill-color($color, $query: $query);\n\n @if ($fill-tone == 'dark') {\n @include ink-color(text-primary-on-dark, $query: $query);\n @include selected-ink-color(text-primary-on-dark, $query: $query);\n @include leading-icon-color(text-primary-on-dark, $query: $query);\n @include trailing-icon-color(text-primary-on-dark, $query: $query);\n } @else {\n @include ink-color(text-primary-on-light, $query: $query);\n @include selected-ink-color(text-primary-on-light, $query: $query);\n @include leading-icon-color(text-primary-on-light, $query: $query);\n @include trailing-icon-color(text-primary-on-light, $query: $query);\n }\n}\n\n@mixin fill-color($color, $query: feature-targeting-functions.all()) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(background-color, $color);\n }\n}\n\n@mixin ink-color($color, $query: feature-targeting-functions.all()) {\n @include ink-color-ripple_($color, $query: $query);\n @include ink-color-without-ripple_($color, $query: $query);\n}\n\n@mixin ink-color-without-ripple_($color, $query) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(color, $color);\n }\n\n &:hover {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(color, $color);\n }\n }\n}\n\n@mixin ink-color-ripple_($color, $query) {\n @include ripple-mixins.states(\n $color,\n true,\n $query: $query,\n $ripple-target: $ripple-target\n );\n}\n\n@mixin selected-ink-color($color, $query: feature-targeting-functions.all()) {\n @include selected-ink-color-ripple_($color, $query: $query);\n @include selected-ink-color-without-ripple_($color, $query: $query);\n}\n\n@mixin selected-ink-color-without-ripple_($color, $query) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n &.mdc-chip--selected {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(color, $color);\n }\n\n @include leading-icon-color($color, $query: $query);\n\n &:hover {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(color, $color);\n }\n }\n }\n\n .mdc-chip__checkmark-path {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(stroke, $color);\n }\n }\n}\n\n@mixin selected-ink-color-ripple_($color, $query) {\n &.mdc-chip {\n @include ripple-mixins.states-selected(\n $color,\n $has-nested-focusable-element: true,\n $query: $query,\n $ripple-target: $ripple-target\n );\n }\n}\n\n@mixin outline(\n $width: 1px,\n $style: solid,\n $color: theme-variables.prop-value(on-surface),\n $query: feature-targeting-functions.all()\n) {\n @include outline-width($width, $query: $query);\n @include outline-style($style, $query: $query);\n @include outline-color($color, $query: $query);\n}\n\n@mixin outline-color($color, $query: feature-targeting-functions.all()) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(border-color, $color);\n }\n}\n\n@mixin outline-style($style, $query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n border-style: $style;\n }\n}\n\n@mixin outline-width(\n $width,\n $horizontal-padding: variables.$horizontal-padding,\n $query: feature-targeting-functions.all()\n) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n // Note: Adjust padding to maintain consistent width with non-outlined chips\n $horizontal-padding-value: math.max($horizontal-padding - $width, 0);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n padding-right: $horizontal-padding-value;\n padding-left: $horizontal-padding-value;\n border-width: $width;\n }\n\n #{$ripple-target} {\n @include feature-targeting-mixins.targets($feat-structure) {\n top: -$width;\n left: -$width;\n border: $width solid transparent;\n }\n }\n}\n\n@mixin horizontal-padding($padding, $query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n padding-right: $padding;\n padding-left: $padding;\n }\n}\n\n@mixin height($height, $query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n height: $height;\n }\n}\n\n@mixin set-spacing($gap-size, $query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n padding: $gap-size / 2;\n }\n\n .mdc-chip {\n @include feature-targeting-mixins.targets($feat-structure) {\n margin: $gap-size / 2;\n }\n }\n\n .mdc-chip--touch {\n @include touch-target-mixins.margin(\n $component-height: variables.$height,\n $query: $query\n );\n }\n}\n\n@mixin leading-icon-color(\n $color,\n $opacity: variables.$icon-opacity,\n $query: feature-targeting-functions.all()\n) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n .mdc-chip__icon--leading {\n @include feature-targeting-mixins.targets($feat-color) {\n color: rgba(theme-variables.prop-value($color), $opacity);\n }\n }\n}\n\n@mixin trailing-icon-color(\n $color,\n $opacity: variables.$icon-opacity,\n $hover-opacity: variables.$trailing-icon-hover-opacity,\n $focus-opacity: variables.$trailing-icon-focus-opacity,\n $query: feature-targeting-functions.all()\n) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n @include trailing-action-mixins.color($color, $query: $query);\n\n // TODO(b/151980552): Remove the following block\n .mdc-chip__icon--trailing {\n @include feature-targeting-mixins.targets($feat-color) {\n color: rgba(theme-variables.prop-value($color), $opacity);\n }\n\n &:hover {\n @include feature-targeting-mixins.targets($feat-color) {\n color: rgba(theme-variables.prop-value($color), $hover-opacity);\n }\n }\n\n &:focus {\n @include feature-targeting-mixins.targets($feat-color) {\n color: rgba(theme-variables.prop-value($color), $focus-opacity);\n }\n }\n }\n}\n\n// For customizing icon size, we need to increase specifity to ensure\n// overrides apply. Styles defined in the .material-icons CSS class are\n// loaded separately, so the order of CSS definitions is not guaranteed.\n\n@mixin leading-icon-size($size, $query: feature-targeting-functions.all()) {\n .mdc-chip__icon.mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden) {\n @include icon-size_($size, $query: $query);\n }\n}\n\n@mixin trailing-icon-size($size, $query: feature-targeting-functions.all()) {\n @include trailing-action-mixins.size($size, $query: $query);\n\n // TODO(b/151980552): Remove the following block\n .mdc-chip__icon.mdc-chip__icon--trailing {\n @include icon-size_($size, $query: $query);\n }\n}\n\n@mixin icon-size_($size, $query) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n width: $size;\n height: $size;\n font-size: $size;\n }\n}\n\n@mixin leading-icon-margin(\n $left-margin: variables.$leading-icon-margin-left,\n $right-margin: variables.$leading-icon-margin-right,\n $query: feature-targeting-functions.all()\n) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n &.mdc-chip--selected .mdc-chip__checkmark,\n .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden) {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include rtl-mixins.reflexive-property(\n margin,\n $left-margin,\n $right-margin\n );\n }\n }\n}\n\n@mixin trailing-icon-margin(\n $left-margin: variables.$trailing-icon-margin-left,\n $right-margin: variables.$trailing-icon-margin-right,\n $query: feature-targeting-functions.all()\n) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include trailing-action-mixins.horizontal-spacing(\n $left-margin,\n $right-margin,\n $query: $query\n );\n\n // TODO(b/151980552): Remove the following block\n .mdc-chip__icon--trailing {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include rtl-mixins.reflexive-property(\n margin,\n $left-margin,\n $right-margin\n );\n }\n }\n}\n\n@mixin elevation-transition($query: feature-targeting-functions.all()) {\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: elevation-functions.transition-value();\n }\n\n &.mdc-chip--exit {\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: elevation-functions.transition-value(),\n variables.$exit-transition;\n }\n }\n}\n\n///\n/// Sets the density scale for chips.\n///\n/// @param {Number | String} $density-scale - Density scale value for component.\n/// Supported density scale values are `-2`, `-1`, `0`.\n///\n@mixin density($density-scale, $query: feature-targeting-functions.all()) {\n $height: density-functions.prop-value(\n $density-config: variables.$density-config,\n $density-scale: $density-scale,\n $property-name: height,\n );\n\n @include height($height, $query: $query);\n\n @if $density-scale != 0 {\n @include touch-target-reset_($query: $query);\n }\n}\n\n///\n/// Resets touch target-related styles. This is called from the density mixin to\n/// automatically remove the increased touch target, since dense components\n/// don't have the same default a11y requirements.\n/// @access private\n///\n@mixin touch-target-reset_($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n // Selector is necessary here to override original specificity.\n &.mdc-chip--touch {\n @include feature-targeting-mixins.targets($feat-structure) {\n margin-top: 0;\n margin-bottom: 0;\n }\n }\n\n .mdc-chip__touch {\n @include feature-targeting-mixins.targets($feat-structure) {\n display: none;\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@use \"sass:color\";\n@use \"@material/animation/variables\" as animation-variables;\n@use \"@material/density/variables\" as density-variables;\n@use \"@material/theme/variables\" as theme-variables;\n\n$fill-color-default: color.mix(\n theme-variables.prop-value(on-surface),\n theme-variables.prop-value(surface),\n 12%\n) !default;\n$ink-color-default: rgba(theme-variables.prop-value(on-surface), 0.87) !default;\n$horizontal-padding: 12px !default;\n$height: 32px !default;\n$shape-radius: 50% !default;\n\n$minimum-height: 24px !default;\n$maximum-height: $height !default;\n$density-scale: density-variables.$default-scale !default;\n$density-config: (\n height: (\n default: $height,\n maximum: $maximum-height,\n minimum: $minimum-height,\n ),\n) !default;\n\n$icon-color: theme-variables.prop-value(on-surface) !default;\n$icon-opacity: 0.54 !default;\n$trailing-icon-hover-opacity: 0.62 !default;\n$trailing-icon-focus-opacity: 0.87 !default;\n$leading-icon-size: 20px !default;\n$trailing-icon-size: 18px !default;\n// Speed up delay to bridge gap between leading icon and checkmark transition.\n$leading-icon-delay: -50ms !default;\n$checkmark-with-leading-icon-delay: 80ms !default;\n\n$checkmark-animation-delay: 50ms !default;\n$checkmark-animation-duration: 150ms !default;\n$width-animation-duration: 150ms !default;\n$opacity-animation-duration: 75ms !default;\n\n$leading-icon-margin-right: 4px !default;\n$leading-icon-margin-left: -4px !default;\n\n$trailing-icon-margin-right: -4px !default;\n$trailing-icon-margin-left: 4px !default;\n\n$exit-transition: opacity 75ms\n animation-variables.$standard-curve-timing-function,\n width 150ms animation-variables.$deceleration-curve-timing-function,\n padding 100ms linear, margin 100ms linear !default;\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 \"@material/animation/functions\" as animation-functions;\n@use \"@material/feature-targeting/functions\" as feature-targeting-functions;\n@use \"@material/feature-targeting/mixins\" as feature-targeting-mixins;\n@use \"@material/theme/mixins\" as theme-mixins;\n@use \"./variables\";\n@use \"./keyframes\";\n\n@mixin core-styles($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n\n @include color(variables.$color, $query);\n\n @include feature-targeting-mixins.targets($feat-animation) {\n @include keyframes.container-rotate-keyframes_;\n @include keyframes.spinner-layer-rotate-keyframes_;\n @include keyframes.color-1-fade-in-out-keyframes_;\n @include keyframes.color-2-fade-in-out-keyframes_;\n @include keyframes.color-3-fade-in-out-keyframes_;\n @include keyframes.color-4-fade-in-out-keyframes_;\n @include keyframes.left-spin-keyframes_;\n @include keyframes.right-spin-keyframes_;\n }\n\n .mdc-circular-progress {\n @include size_(variables.$default-size, $query);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n display: inline-block;\n position: relative;\n /* @noflip */\n direction: ltr;\n }\n\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: animation-functions.exit-temporary(opacity, 250ms);\n }\n }\n\n .mdc-circular-progress--small {\n @include size_(small, $query);\n }\n\n .mdc-circular-progress--medium {\n @include size_(medium, $query);\n }\n\n .mdc-circular-progress--large {\n @include size_(large, $query);\n }\n\n .mdc-circular-progress__determinate-container,\n .mdc-circular-progress__indeterminate-circle-graphic,\n .mdc-circular-progress__indeterminate-container,\n .mdc-circular-progress__spinner-layer {\n @include feature-targeting-mixins.targets($feat-structure) {\n position: absolute;\n width: 100%;\n height: 100%;\n }\n }\n\n .mdc-circular-progress__determinate-container {\n @include feature-targeting-mixins.targets($feat-structure) {\n transform: rotate(-90deg);\n }\n }\n\n .mdc-circular-progress__indeterminate-container {\n @include feature-targeting-mixins.targets($feat-structure) {\n opacity: 0;\n }\n }\n\n .mdc-circular-progress__determinate-circle-graphic,\n .mdc-circular-progress__indeterminate-circle-graphic {\n @include feature-targeting-mixins.targets($feat-structure) {\n fill: transparent;\n }\n }\n\n .mdc-circular-progress__determinate-circle {\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: animation-functions.enter(stroke-dashoffset, 500ms);\n }\n }\n\n .mdc-circular-progress__gap-patch {\n @include feature-targeting-mixins.targets($feat-structure) {\n position: absolute;\n top: 0;\n /* @noflip */\n left: 47.5%;\n box-sizing: border-box;\n width: 5%;\n height: 100%;\n overflow: hidden;\n }\n\n .mdc-circular-progress__indeterminate-circle-graphic {\n @include feature-targeting-mixins.targets($feat-structure) {\n /* @noflip */\n left: -900%;\n width: 2000%;\n transform: rotate(180deg);\n }\n }\n }\n\n .mdc-circular-progress__circle-clipper {\n @include feature-targeting-mixins.targets($feat-structure) {\n display: inline-block;\n position: relative;\n width: 50%;\n height: 100%;\n overflow: hidden;\n }\n\n .mdc-circular-progress__indeterminate-circle-graphic {\n @include feature-targeting-mixins.targets($feat-structure) {\n width: 200%;\n }\n }\n }\n\n .mdc-circular-progress__circle-right {\n .mdc-circular-progress__indeterminate-circle-graphic {\n @include feature-targeting-mixins.targets($feat-structure) {\n /* @noflip */\n left: -100%;\n }\n }\n }\n\n .mdc-circular-progress--indeterminate {\n .mdc-circular-progress__determinate-container {\n @include feature-targeting-mixins.targets($feat-structure) {\n opacity: 0;\n }\n }\n\n .mdc-circular-progress__indeterminate-container {\n @include feature-targeting-mixins.targets($feat-structure) {\n opacity: 1;\n }\n }\n\n @include indeterminate-active-animations_($query);\n }\n\n .mdc-circular-progress--closed {\n @include feature-targeting-mixins.targets($feat-structure) {\n opacity: 0;\n }\n }\n}\n\n// Public mixins\n\n/// Customizes the stroke-color of the indicator. Applies to the\n/// determinate variant, and also the indeterminate variant unless the\n/// four-color mixin is applied.\n/// @param {Color} $color - The desired stroke color.\n/// @see {mixin} indeterminate-colors\n@mixin color($color, $query: feature-targeting-functions.all()) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n .mdc-circular-progress__determinate-circle,\n .mdc-circular-progress__indeterminate-circle-graphic {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop('stroke', $color);\n }\n }\n}\n\n/// Applies four animated stroke-colors to the indeterminate indicator.\n/// Applicable to the indeterminate variant only and overrides any single color\n/// currently set.\n/// @param {List} $colors - A list of four desired colors.\n/// @see {mixin} color\n@mixin indeterminate-colors(\n $colors,\n $query: feature-targeting-functions.all()\n) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n @if length($colors) != 4 {\n @error \"`mdc-circular-progress-colors` accepts exactly 4 colors\";\n }\n\n @for $i from 1 through 4 {\n .mdc-circular-progress__color-#{$i}\n .mdc-circular-progress__indeterminate-circle-graphic {\n @include feature-targeting-mixins.targets($feat-color) {\n stroke: nth($colors, $i);\n }\n }\n }\n}\n\n// Private mixins\n\n/// Sets the container size of the indicator and the stroke width appropriate\n/// for the size according to Material Design guidelines. The dimensions are\n/// predefined for one of three discrete sizes listed below only.\n/// @param {String} $size - Choose from small, medium, or large.\n/// @access private\n@mixin size_($size, $query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n $resolved-size: map-get(variables.$container-side-length, $size);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n width: $resolved-size;\n height: $resolved-size;\n }\n\n .mdc-circular-progress__determinate-circle-graphic,\n .mdc-circular-progress__indeterminate-circle-graphic {\n @include feature-targeting-mixins.targets($feat-structure) {\n stroke-width: map-get(variables.$stroke-width, $size);\n }\n }\n\n .mdc-circular-progress__gap-patch\n .mdc-circular-progress__indeterminate-circle-graphic {\n @include feature-targeting-mixins.targets($feat-structure) {\n stroke-width: map-get(variables.$stroke-width, $size) * 0.8;\n }\n }\n}\n\n/// Sets the animations for the indicator in indeterminate mode.\n/// @access private\n@mixin indeterminate-active-animations_(\n $query: feature-targeting-functions.all()\n) {\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n\n .mdc-circular-progress__indeterminate-container {\n @include feature-targeting-mixins.targets($feat-animation) {\n $duration: 360deg * variables.$arc-time /\n (variables.$arc-start-rotation-interval + (360 - variables.$arc-size));\n\n animation: mdc-circular-progress-container-rotate $duration linear\n infinite;\n }\n }\n\n $spinner-rotate-animation: mdc-circular-progress-spinner-layer-rotate 4 *\n variables.$arc-time variables.$timing-function infinite both;\n\n .mdc-circular-progress__spinner-layer {\n @include feature-targeting-mixins.targets($feat-animation) {\n animation: $spinner-rotate-animation;\n }\n }\n\n @for $i from 1 through 4 {\n $color-fade-in-out-animation: mdc-circular-progress-color-#{$i}-fade-in-out\n 4 *\n variables.$arc-time\n variables.$timing-function\n infinite\n both;\n\n .mdc-circular-progress__color-#{$i} {\n @include feature-targeting-mixins.targets($feat-animation) {\n animation: $spinner-rotate-animation, $color-fade-in-out-animation;\n }\n }\n }\n\n .mdc-circular-progress__circle-left\n .mdc-circular-progress__indeterminate-circle-graphic {\n @include feature-targeting-mixins.targets($feat-animation) {\n animation: mdc-circular-progress-left-spin variables.$arc-time\n variables.$timing-function infinite both;\n }\n }\n\n .mdc-circular-progress__circle-right\n .mdc-circular-progress__indeterminate-circle-graphic {\n @include feature-targeting-mixins.targets($feat-animation) {\n animation: mdc-circular-progress-right-spin variables.$arc-time\n variables.$timing-function infinite both;\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 \"./variables\";\n\n/// Keyframes for the persistent rotation of the outermost container\n/// @access private\n@mixin container-rotate-keyframes_ {\n @keyframes mdc-circular-progress-container-rotate {\n to {\n transform: rotate(360deg);\n }\n }\n}\n\n/// Keyframes for the rotation of the spinner layer\n/// @access private\n@mixin spinner-layer-rotate-keyframes_ {\n @keyframes mdc-circular-progress-spinner-layer-rotate {\n @for $i from 1 through 8 {\n #{$i * 12.5}% {\n transform: rotate($i * 0.5 * variables.$arc-size);\n }\n }\n }\n}\n\n/// Keyframes for the fade-in and fade-out of the first color.\n/// .99 opacity is used to force subpixel rendering.\n/// @access private\n@mixin color-1-fade-in-out-keyframes_ {\n @keyframes mdc-circular-progress-color-1-fade-in-out {\n from {\n opacity: 0.99;\n }\n 25% {\n opacity: 0.99;\n }\n 26% {\n opacity: 0;\n }\n 89% {\n opacity: 0;\n }\n 90% {\n opacity: 0.99;\n }\n to {\n opacity: 0.99;\n }\n }\n}\n\n/// Keyframes for the fade-in and fade-out of the second color.\n/// .99 opacity is used to force subpixel rendering.\n/// @access private\n@mixin color-2-fade-in-out-keyframes_ {\n @keyframes mdc-circular-progress-color-2-fade-in-out {\n from {\n opacity: 0;\n }\n 15% {\n opacity: 0;\n }\n 25% {\n opacity: 0.99;\n }\n 50% {\n opacity: 0.99;\n }\n 51% {\n opacity: 0;\n }\n to {\n opacity: 0;\n }\n }\n}\n\n/// Keyframes for the fade-in and fade-out of the third color.\n/// .99 opacity is used to force subpixel rendering.\n/// @access private\n@mixin color-3-fade-in-out-keyframes_ {\n @keyframes mdc-circular-progress-color-3-fade-in-out {\n from {\n opacity: 0;\n }\n 40% {\n opacity: 0;\n }\n 50% {\n opacity: 0.99;\n }\n 75% {\n opacity: 0.99;\n }\n 76% {\n opacity: 0;\n }\n to {\n opacity: 0;\n }\n }\n}\n\n/// Keyframes for the fade-in and fade-out of the fourth color.\n/// .99 opacity is used to force subpixel rendering.\n/// @access private\n@mixin color-4-fade-in-out-keyframes_ {\n @keyframes mdc-circular-progress-color-4-fade-in-out {\n from {\n opacity: 0;\n }\n 65% {\n opacity: 0;\n }\n 75% {\n opacity: 0.99;\n }\n 90% {\n opacity: 0.99;\n }\n to {\n opacity: 0;\n }\n }\n}\n\n/// Keyframes for the expansion and contraction of the arc for the\n/// left semi-circle.\n/// @access private\n@mixin left-spin-keyframes_ {\n @keyframes mdc-circular-progress-left-spin {\n from {\n transform: rotate(265deg);\n }\n 50% {\n transform: rotate(130deg);\n }\n to {\n transform: rotate(265deg);\n }\n }\n}\n\n/// Keyframes for the expansion and contraction of the arc for the\n/// right semi-circle.\n/// @access private\n@mixin right-spin-keyframes_ {\n @keyframes mdc-circular-progress-right-spin {\n from {\n transform: rotate(-265deg);\n }\n 50% {\n transform: rotate(-130deg);\n }\n to {\n transform: rotate(-265deg);\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// NOTE: We disable `selector-class-pattern` above to allow using `mdc-` class\n// selectors.\n\n@use 'sass:list';\n@use '@material/animation/functions';\n@use '@material/checkbox/mixins' as checkbox-mixins;\n@use '@material/density/functions' as density-functions;\n@use '@material/dom/mixins' as dom;\n@use '@material/elevation/mixins';\n@use '@material/feature-targeting/functions' as feature-targeting-functions;\n@use '@material/feature-targeting/mixins' as feature-targeting-mixins;\n@use '@material/icon-button/mixins' as icon-button-mixins;\n@use '@material/rtl/mixins' as rtl-mixins;\n@use '@material/shape/mixins' as shape-mixins;\n@use '@material/theme/mixins' as theme-mixins;\n@use '@material/theme/variables' as variables2; // for mdc-theme-prop-value.\n@use '@material/typography/mixins' as typography-mixins;\n@use './data-table-theme';\n@use './data-table-pagination';\n\n@mixin core-styles($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n $feat-typography: feature-targeting-functions.create-target(\n $query,\n typography\n );\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n\n // postcss-bem-linter: define data-table\n\n .mdc-data-table__content {\n @include typography-mixins.typography(body2, $query: $query);\n }\n\n .mdc-data-table {\n @include data-table-theme.fill-color(\n data-table-theme.$fill-color,\n $query: $query\n );\n @include data-table-theme.shape-radius(\n data-table-theme.$shape-radius,\n $query: $query\n );\n @include data-table-theme.stroke-size(\n data-table-theme.$stroke-size,\n $query: $query\n );\n @include data-table-theme.stroke-color(\n data-table-theme.$stroke-color,\n $query: $query\n );\n\n @include feature-targeting-mixins.targets($feat-structure) {\n // Makes the table scroll smoothly in iOS.\n // NOTE: Root element should not be scrollable, added this for backward\n // compatibility.\n -webkit-overflow-scrolling: touch;\n display: inline-flex;\n flex-direction: column;\n box-sizing: border-box;\n position: relative;\n }\n }\n\n // Note that we don't output the color styles inside the `@at-root`,\n // because it makes it difficult to consume by projects that wrap their\n // themes in a class (e.g. `.my-theme { @include mdc-data-table-core-style() }`).\n @include data-table-theme.row-fill-color(\n data-table-theme.$row-fill-color,\n $query: $query\n );\n @include data-table-theme.header-row-fill-color(\n data-table-theme.$header-row-fill-color,\n $query: $query\n );\n @include data-table-theme.selected-row-fill-color(\n data-table-theme.$selected-row-fill-color,\n $query: $query\n );\n @include data-table-theme.divider-color(\n data-table-theme.$divider-color,\n $query: $query\n );\n @include data-table-theme.divider-size(\n data-table-theme.$divider-size,\n $query: $query\n );\n @include data-table-theme.row-hover-fill-color(\n data-table-theme.$row-hover-fill-color,\n $query: $query\n );\n @include data-table-theme.header-row-text-color(\n data-table-theme.$header-row-text-color,\n $query: $query\n );\n @include data-table-theme.row-text-color(\n data-table-theme.$row-text-color,\n $query: $query\n );\n @include data-table-theme.density(\n data-table-theme.$default-density-scale,\n $query: $query\n );\n @include data-table-theme.cell-padding(\n $leading-padding: data-table-theme.$cell-leading-padding,\n $trailing-padding: data-table-theme.$cell-trailing-padding,\n $query: $query\n );\n @include data-table-theme.sort-icon-color(\n data-table-theme.$sort-icon-color,\n $query: $query\n );\n @include data-table-theme.sort-icon-active-color(\n data-table-theme.$sort-icon-active-color,\n $query: $query\n );\n\n .mdc-data-table__table-container {\n @include feature-targeting-mixins.targets($feat-structure) {\n // Makes the table scroll smoothly in iOS.\n -webkit-overflow-scrolling: touch;\n overflow-x: auto;\n width: 100%;\n }\n }\n\n .mdc-data-table__table {\n @include feature-targeting-mixins.targets($feat-structure) {\n min-width: 100%; // Makes table full-width of its container (Firefox / IE11)\n border: 0;\n white-space: nowrap;\n border-collapse: collapse;\n /**\n * With table-layout:fixed, table and column widths are defined by the width\n * of the first row of cells. Cells in subsequent rows do not affect column\n * widths. This results in a predictable table layout and may also speed up\n * rendering.\n */\n table-layout: fixed;\n }\n }\n\n .mdc-data-table__cell {\n @include typography-mixins.typography(body2, $query: $query);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n box-sizing: border-box;\n overflow: hidden;\n text-align: left;\n text-overflow: ellipsis;\n\n @include rtl-mixins.rtl {\n /* @noflip */\n text-align: right;\n }\n }\n }\n\n .mdc-data-table__cell--numeric {\n @include feature-targeting-mixins.targets($feat-structure) {\n text-align: right;\n }\n\n @include feature-targeting-mixins.targets($feat-structure) {\n @include rtl-mixins.rtl {\n /* @noflip */\n text-align: left;\n }\n }\n }\n\n .mdc-data-table__header-cell {\n @include typography-mixins.typography(subtitle2, $query: $query);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n box-sizing: border-box;\n text-align: left;\n text-overflow: ellipsis;\n overflow: hidden;\n outline: none;\n\n @include rtl-mixins.rtl {\n /* @noflip */\n text-align: right;\n }\n }\n }\n\n .mdc-data-table__header-cell--checkbox,\n .mdc-data-table__cell--checkbox {\n @include feature-targeting-mixins.targets($feat-structure) {\n // Set to lowest width to adapt to cell content. Cell width should adapt\n // to row checkbox size when it is dense.\n // NOTE: `min-width` does not seem to work on table cells.\n width: 1px;\n }\n }\n\n .mdc-data-table__header-cell--numeric {\n @include feature-targeting-mixins.targets($feat-structure) {\n text-align: right;\n }\n\n @include feature-targeting-mixins.targets($feat-structure) {\n @include rtl-mixins.rtl {\n /* @noflip */\n text-align: left;\n }\n }\n }\n\n .mdc-data-table__sort-icon-button {\n @include icon-button-mixins.density(\n $density-scale: data-table-theme.$sort-icon-density-scale,\n $query: $query\n );\n\n @include feature-targeting-mixins.targets($feat-structure) {\n @include rtl-mixins.reflexive-box(margin, left, 4px);\n }\n\n .mdc-data-table__header-cell--numeric & {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include rtl-mixins.reflexive-box(margin, right, 4px);\n }\n }\n\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: functions.standard(transform, $duration: 150ms);\n }\n\n .mdc-data-table__header-cell--sorted-descending & {\n @include feature-targeting-mixins.targets($feat-structure) {\n transform: rotate(-180deg);\n }\n }\n\n @include feature-targeting-mixins.targets($feat-structure) {\n opacity: 0;\n }\n\n &:focus,\n .mdc-data-table__header-cell:hover &,\n .mdc-data-table__header-cell--sorted & {\n @include feature-targeting-mixins.targets($feat-structure) {\n opacity: 1;\n }\n }\n }\n\n .mdc-data-table__header-cell-wrapper {\n @include feature-targeting-mixins.targets($feat-structure) {\n align-items: center;\n display: inline-flex;\n vertical-align: middle;\n }\n }\n\n .mdc-data-table__header-cell--with-sort {\n @include feature-targeting-mixins.targets($feat-structure) {\n cursor: pointer;\n }\n }\n\n .mdc-data-table__progress-indicator {\n @include feature-targeting-mixins.targets($feat-structure) {\n display: none;\n position: absolute;\n width: 100%;\n }\n\n .mdc-data-table--in-progress & {\n @include feature-targeting-mixins.targets($feat-structure) {\n display: block;\n }\n }\n }\n\n .mdc-data-table__scrim {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include theme-mixins.prop('background-color', surface);\n\n height: 100%;\n // TODO(b/151453287): Set appropriate opacity value once we've a UX\n // guidance.\n opacity: 0.32;\n position: absolute;\n top: 0;\n width: 100%;\n }\n }\n\n .mdc-data-table__sort-status-label {\n @include dom.visually-hidden($query: $query);\n }\n\n @include data-table-pagination.core-styles($query: $query);\n}\n\n@mixin theme-baseline($query: feature-targeting-functions.all()) {\n @include data-table-theme.checked-icon-color(\n data-table-theme.$checked-icon-color,\n $query: $query\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// NOTE: We disable `selector-class-pattern` above to allow using `mdc-` class\n// selectors.\n\n@use 'sass:list';\n@use '@material/animation/functions';\n@use '@material/checkbox/mixins' as checkbox-mixins;\n@use '@material/density/functions' as density-functions;\n@use '@material/elevation/mixins';\n@use '@material/feature-targeting/functions' as feature-targeting-functions;\n@use '@material/feature-targeting/mixins' as feature-targeting-mixins;\n@use '@material/icon-button/mixins' as icon-button-mixins;\n@use '@material/rtl/mixins' as rtl-mixins;\n@use '@material/shape/mixins' as shape-mixins;\n@use '@material/theme/mixins' as theme-mixins;\n@use '@material/theme/variables' as variables2; // for mdc-theme-prop-value.\n@use '@material/typography/mixins' as typography-mixins;\n@use '@material/theme/variables' as theme-variables;\n@use '@material/density/variables' as density-variables;\n@use '@material/select/mixins' as select-theme;\n\n$fill-color: surface !default;\n$header-row-fill-color: inherit !default;\n$row-fill-color: inherit !default;\n$selected-row-fill-color: rgba(\n theme-variables.prop-value(primary),\n 0.04\n) !default;\n$checked-icon-color: primary !default;\n$divider-color: rgba(theme-variables.prop-value(on-surface), 0.12) !default;\n$divider-size: 1px !default;\n$row-hover-fill-color: rgba(\n theme-variables.prop-value(on-surface),\n 0.04\n) !default;\n$checkbox-touch-dimension: 48px !default;\n\n$header-row-text-color: rgba(\n theme-variables.prop-value(on-surface),\n 0.87\n) !default;\n$row-text-color: rgba(theme-variables.prop-value(on-surface), 0.87) !default;\n\n$sort-icon-color: rgba(theme-variables.prop-value(on-surface), 0.6) !default;\n$sort-icon-active-color: rgba(\n theme-variables.prop-value(on-surface),\n 0.87\n) !default;\n$sort-icon-density-scale: -5 !default;\n\n$shape-radius: medium !default;\n$stroke-size: 1px !default;\n$stroke-color: rgba(theme-variables.prop-value(on-surface), 0.12) !default;\n\n$cell-height: 52px !default;\n$header-cell-height: get-header-cell-height($cell-height) !default;\n$cell-leading-padding: 16px !default;\n$cell-trailing-padding: 16px !default;\n\n$minimum-cell-height: 36px !default;\n$maximum-cell-height: $cell-height !default;\n$default-density-scale: density-variables.$default-scale !default;\n$density-config: (\n height: (\n maximum: $cell-height,\n default: $cell-height,\n minimum: $minimum-cell-height,\n ),\n);\n$pagination-rows-per-page-select-height: 36px;\n\n@function get-header-cell-height($height) {\n @return $height + 4px;\n}\n\n/// Sets the color of sort icon button when it is in idle state.\n/// (icon showed on header cell focus)\n/// @param {String} $color - Color of sort icon button\n@mixin sort-icon-color($color, $query: feature-targeting-functions.all()) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n .mdc-data-table__sort-icon-button {\n @include icon-button-mixins.ink-color($color, $query: $query);\n }\n}\n\n/// Sets the color of sort icon button when it is activated (sorted).\n/// @param {String} $color - Color of sort icon button\n@mixin sort-icon-active-color(\n $color,\n $query: feature-targeting-functions.all()\n) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n .mdc-data-table__header-cell--sorted .mdc-data-table__sort-icon-button {\n @include icon-button-mixins.ink-color($color, $query: $query);\n }\n}\n\n@mixin fill-color($color, $query: feature-targeting-functions.all()) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop('background-color', $color);\n }\n}\n\n@mixin header-row-fill-color(\n $color,\n $query: feature-targeting-functions.all()\n) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n .mdc-data-table__header-row {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop('background-color', $color);\n }\n }\n}\n\n@mixin row-fill-color($color, $query: feature-targeting-functions.all()) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n .mdc-data-table__row {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop('background-color', $color);\n }\n }\n}\n\n@mixin selected-row-fill-color(\n $color,\n $query: feature-targeting-functions.all()\n) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n .mdc-data-table__row--selected {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop('background-color', $color);\n }\n }\n}\n\n@mixin checked-icon-color($color, $query: feature-targeting-functions.all()) {\n .mdc-data-table__header-row-checkbox,\n .mdc-data-table__row-checkbox {\n @include checkbox-mixins.focus-indicator-color($color, $query: $query);\n @include checkbox-mixins.container-colors(\n $marked-stroke-color: $color,\n $marked-fill-color: $color,\n $query: $query\n );\n }\n}\n\n///\n/// Sets divider color of data table (including outline color of rows per page\n/// select). Use `stroke-color()` to set table border color.\n/// @param {Color} $color Divider color.\n///\n@mixin divider-color($color, $query: feature-targeting-functions.all()) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n .mdc-data-table__pagination-rows-per-page-select {\n @include select-theme.outline-color($color, $query: $query);\n }\n\n .mdc-data-table__row,\n .mdc-data-table__pagination {\n @include feature-targeting-mixins.targets($feat-color) {\n border-top-color: $color;\n }\n }\n}\n\n@mixin divider-size($size, $query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n .mdc-data-table__row,\n .mdc-data-table__pagination {\n @include feature-targeting-mixins.targets($feat-structure) {\n border-top-width: $size;\n border-top-style: solid;\n }\n }\n}\n\n@mixin row-hover-fill-color($color, $query: feature-targeting-functions.all()) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n .mdc-data-table__row:not(.mdc-data-table__row--selected):hover {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop('background-color', $color);\n }\n }\n}\n\n@mixin header-row-text-color(\n $color,\n $query: feature-targeting-functions.all()\n) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n .mdc-data-table__header-cell {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop('color', $color);\n }\n }\n}\n\n///\n/// Sets row text color (including pagination row text).\n/// @param {Color} $color Row text color\n///\n@mixin row-text-color($color, $query: feature-targeting-functions.all()) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n .mdc-data-table__pagination-total,\n .mdc-data-table__pagination-rows-per-page-label,\n .mdc-data-table__cell {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop('color', $color);\n }\n }\n}\n\n@mixin shape-radius(\n $radius,\n $rtl-reflexive: false,\n $query: feature-targeting-functions.all()\n) {\n @include shape-mixins.radius($radius, $rtl-reflexive, $query: $query);\n}\n\n@mixin stroke-size($size, $query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n border-width: $size;\n border-style: solid;\n }\n}\n\n@mixin stroke-color($color, $query: feature-targeting-functions.all()) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n @include feature-targeting-mixins.targets($feat-color) {\n border-color: $color;\n }\n}\n\n@mixin header-cell-height($height, $query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n .mdc-data-table__header-cell {\n @include feature-targeting-mixins.targets($feat-structure) {\n height: $height;\n }\n }\n}\n\n@mixin cell-height($height, $query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n .mdc-data-table__cell {\n @include feature-targeting-mixins.targets($feat-structure) {\n height: $height;\n }\n }\n\n .mdc-data-table__pagination {\n @include feature-targeting-mixins.targets($feat-structure) {\n min-height: $height;\n }\n }\n}\n\n@mixin cell-padding(\n $leading-padding: $cell-leading-padding,\n $trailing-padding: $cell-trailing-padding,\n $query: feature-targeting-functions.all()\n) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n .mdc-data-table__cell,\n .mdc-data-table__header-cell {\n @include feature-targeting-mixins.targets($feat-structure) {\n padding-right: $trailing-padding;\n padding-left: $leading-padding;\n }\n }\n\n .mdc-data-table__header-cell--checkbox,\n .mdc-data-table__cell--checkbox {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include rtl-mixins.reflexive-property(padding, $leading-padding, 0);\n }\n }\n}\n\n@mixin column-widths($width-list, $query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @for $i from 1 through list.length($width-list) {\n .mdc-data-table__row > :nth-child(#{$i}) {\n @include feature-targeting-mixins.targets($feat-structure) {\n width: list.nth($width-list, $i);\n }\n }\n }\n}\n\n///\n/// Sets density scale for data table. Use corresponding density mixins of child components (such as Checkbox) to apply\n/// density scales which will be rendered inside data table.\n///\n/// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values `-4`,\n/// `-3`, `-2`, `-1`, `0`.\n///\n@mixin density($density-scale, $query: feature-targeting-functions.all()) {\n $height: density-functions.prop-value(\n $density-config: $density-config,\n $density-scale: $density-scale,\n $property-name: height,\n );\n\n @include cell-height($height, $query: $query);\n @include header-cell-height(get-header-cell-height($height), $query: $query);\n}\n","//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use \"sass:list\";\n@use \"@material/theme/mixins\" as theme-mixins;\n@use \"@material/shape/mixins\" as shape-mixins;\n@use \"@material/floating-label/mixins\" as floating-label-mixins;\n@use \"@material/shape/functions\" as shape-functions;\n@use \"@material/feature-targeting/functions\" as feature-targeting-functions;\n@use \"@material/feature-targeting/mixins\" as feature-targeting-mixins;\n@use \"@material/rtl/mixins\" as rtl-mixins;\n@use \"./variables\";\n\n@mixin core-styles($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n .mdc-notched-outline {\n @include base_($query);\n\n &__leading,\n &__notch,\n &__trailing {\n @include feature-targeting-mixins.targets($feat-structure) {\n box-sizing: border-box;\n height: 100%;\n border-top: variables.$border-width solid;\n border-bottom: variables.$border-width solid;\n pointer-events: none;\n }\n }\n\n &__leading {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include rtl-mixins.reflexive-property(\n border,\n variables.$border-width solid,\n none\n );\n\n width: variables.$leading-width;\n }\n }\n\n &__trailing {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include rtl-mixins.reflexive-property(\n border,\n none,\n variables.$border-width solid\n );\n\n flex-grow: 1;\n }\n }\n\n &__notch {\n @include feature-targeting-mixins.targets($feat-structure) {\n flex: 0 0 auto;\n width: auto;\n max-width: calc(100% - #{variables.$leading-width} * 2);\n }\n }\n\n .mdc-floating-label {\n @include feature-targeting-mixins.targets($feat-structure) {\n display: inline-block;\n position: relative;\n max-width: 100%;\n }\n }\n\n .mdc-floating-label--float-above {\n @include feature-targeting-mixins.targets($feat-structure) {\n text-overflow: clip;\n }\n }\n\n &--upgraded .mdc-floating-label--float-above {\n @include feature-targeting-mixins.targets($feat-structure) {\n max-width: calc(100% / 0.75);\n }\n }\n }\n\n .mdc-notched-outline--notched {\n .mdc-notched-outline__notch {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include rtl-mixins.reflexive-box(padding, right, 8px);\n\n border-top: none;\n }\n }\n }\n\n .mdc-notched-outline--no-label {\n .mdc-notched-outline__notch {\n @include feature-targeting-mixins.targets($feat-structure) {\n padding: 0;\n }\n }\n }\n}\n\n@mixin color($color, $query: feature-targeting-functions.all()) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n .mdc-notched-outline__leading,\n .mdc-notched-outline__notch,\n .mdc-notched-outline__trailing {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(border-color, $color);\n }\n }\n}\n\n@mixin stroke-width($width, $query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n .mdc-notched-outline__leading,\n .mdc-notched-outline__notch,\n .mdc-notched-outline__trailing {\n @include feature-targeting-mixins.targets($feat-structure) {\n border-width: $width;\n }\n }\n}\n\n///\n/// Adds top offset to compensate for border width box size when it is notched.\n/// Use this when floating label is aligned to center to prevent label jump on focus.\n/// @param {Number} $stroke-width Stroke width of notched outline that needs to be offset.\n///\n@mixin notch-offset($stroke-width, $query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n .mdc-notched-outline--notched .mdc-notched-outline__notch {\n @include feature-targeting-mixins.targets($feat-structure) {\n padding-top: $stroke-width;\n }\n }\n}\n\n@mixin shape-radius(\n $radius,\n $rtl-reflexive: false,\n $query: feature-targeting-functions.all()\n) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n $radius: shape-functions.prop-value($radius);\n\n @if (list.length($radius) > 1) {\n // stylelint-disable-next-line max-line-length\n @warn \"mdc-notched-outline-shape-radius only supports a single radius; see https://github.com/material-components/material-components-web/issues/4140\";\n }\n\n $radius: list.nth($radius, 1);\n\n .mdc-notched-outline__leading {\n @include shape-mixins.radius(\n shape-functions.mask-radius($radius, 1 0 0 1),\n $rtl-reflexive: true,\n $query: $query\n );\n\n @include feature-targeting-mixins.targets($feat-structure) {\n @if ($radius > variables.$leading-width) {\n width: $radius;\n }\n }\n }\n\n @if ($radius > variables.$leading-width) {\n .mdc-notched-outline__notch {\n @include feature-targeting-mixins.targets($feat-structure) {\n max-width: calc(100% - #{$radius} * 2);\n }\n }\n }\n\n .mdc-notched-outline__trailing {\n @include shape-mixins.radius(\n shape-functions.mask-radius($radius, 0 1 1 0),\n $rtl-reflexive: true,\n $query: $query\n );\n }\n}\n\n@mixin floating-label-float-position(\n $positionY,\n $positionX: 0%,\n $scale: 0.75,\n $query: feature-targeting-functions.all()\n) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include floating-label-mixins.float-position(\n $positionY + variables.$label-adjust,\n $positionX,\n 1,\n $query: $query\n );\n\n .mdc-floating-label--float-above {\n @include feature-targeting-mixins.targets($feat-structure) {\n font-size: ($scale * 1rem);\n }\n }\n\n // Two selectors to ensure we select the appropriate class when applied from this component or a parent component.\n &.mdc-notched-outline--upgraded,\n .mdc-notched-outline--upgraded {\n @include floating-label-mixins.float-position(\n $positionY,\n $positionX,\n $scale,\n $query: $query\n );\n\n // stylelint-disable-next-line no-descending-specificity\n .mdc-floating-label--float-above {\n @include feature-targeting-mixins.targets($feat-structure) {\n font-size: 1rem;\n }\n }\n }\n}\n\n///\n/// Sets floating label position in notched outline when label is afloat.\n///\n/// @param {Number} $positionY Absolute Y-axis position in `px`.\n/// @param {Number} $positionX Absolute X-axis position in `px`. Defaults to `0`.\n/// @param {Number} $scale Defaults to `.75`.\n///\n/// @todo Replace mixin `mdc-notched-outline-floating-label-float-position` with this mixin when floating label is\n/// center aligned in all the places.\n///\n@mixin floating-label-float-position-absolute(\n $positionY,\n $positionX: 0,\n $scale: 0.75,\n $query: feature-targeting-functions.all()\n) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include floating-label-mixins.float-position(\n $positionY + variables.$label-adjust-absolute,\n $positionX,\n 1,\n $query: $query\n );\n\n .mdc-floating-label--float-above {\n @include feature-targeting-mixins.targets($feat-structure) {\n font-size: ($scale * 1rem);\n }\n }\n\n // Two selectors to ensure we select the appropriate class when applied from this component or a parent component.\n &.mdc-notched-outline--upgraded,\n .mdc-notched-outline--upgraded {\n @include floating-label-mixins.float-position(\n $positionY,\n $positionX,\n $scale,\n $query: $query\n );\n\n // stylelint-disable-next-line no-descending-specificity\n .mdc-floating-label--float-above {\n @include feature-targeting-mixins.targets($feat-structure) {\n font-size: 1rem;\n }\n }\n }\n}\n\n///\n/// Sets the max-width for the notch\n///\n/// @param {Number} $max-width Max-width for the notch\n///\n@mixin notch-max-width($max-width, $query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n :not(.mdc-notched-outline--notched) .mdc-notched-outline__notch {\n @include feature-targeting-mixins.targets($feat-structure) {\n max-width: $max-width;\n }\n }\n}\n\n//\n// Private\n//\n@mixin base_($query) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n display: flex;\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n box-sizing: border-box;\n width: 100%;\n max-width: 100%;\n height: 100%;\n /* @noflip */\n text-align: left;\n pointer-events: none;\n\n @include rtl-mixins.rtl {\n /* @noflip */\n text-align: right;\n }\n }\n}\n","//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use \"sass:math\";\n@use \"@material/density/functions\" as density-functions;\n@use \"@material/feature-targeting/functions\" as feature-targeting-functions;\n@use \"@material/feature-targeting/mixins\" as feature-targeting-mixins;\n@use \"@material/ripple/mixins\" as ripple-mixins;\n@use \"@material/rtl/mixins\" as rtl;\n@use \"@material/theme/mixins\" as theme-mixins;\n@use \"./variables\";\n\n@mixin core-styles($query: feature-targeting-functions.all()) {\n @include without-ripple($query);\n @include ripple($query);\n}\n\n@mixin without-ripple($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n // postcss-bem-linter: define icon-button\n .mdc-icon-button {\n @include base_($query: $query);\n @include density(0, $query: $query);\n }\n\n .mdc-icon-button__icon {\n @include feature-targeting-mixins.targets($feat-structure) {\n display: inline-block;\n }\n\n // stylelint-disable-next-line plugin/selector-bem-pattern\n &.mdc-icon-button__icon--on {\n @include feature-targeting-mixins.targets($feat-structure) {\n display: none;\n }\n }\n }\n\n .mdc-icon-button--on {\n .mdc-icon-button__icon {\n @include feature-targeting-mixins.targets($feat-structure) {\n display: none;\n }\n\n // stylelint-disable-next-line plugin/selector-bem-pattern\n &.mdc-icon-button__icon--on {\n @include feature-targeting-mixins.targets($feat-structure) {\n display: inline-block;\n }\n }\n }\n }\n // postcss-bem-linter: end\n}\n\n@mixin ripple($query: feature-targeting-functions.all()) {\n @include ripple-mixins.common($query); // COPYBARA_COMMENT_THIS_LINE\n\n .mdc-icon-button {\n @include ripple-mixins.surface($query: $query);\n @include ripple-mixins.radius-unbounded($query: $query);\n @include ripple-mixins.states($query: $query);\n }\n}\n\n///\n/// Sets the density scale for icon button.\n///\n/// @param {Number | String} $density-scale - Density scale value for component.\n/// Supported density scale values range from `-5` to `0`, with `0` being the default.\n///\n@mixin density($density-scale, $query: feature-targeting-functions.all()) {\n $size: density-functions.prop-value(\n $density-config: variables.$density-config,\n $density-scale: $density-scale,\n $property-name: size,\n );\n\n @include size($size, $query: $query);\n}\n\n///\n/// Sets the size of the icon-button.\n///\n/// @param {Number} $size - Size value for icon-button.\n/// Size will set the width, height, and padding for the overall component.\n///\n@mixin size($size, $query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n width: $size;\n height: $size;\n padding: ($size - variables.$icon-size) / 2;\n }\n}\n\n///\n/// Sets the width, height and padding of icon button. Also changes the size of\n/// the icon itself based on button size.\n///\n/// @param {Number} $width - Width value for icon-button.\n/// @param {Number} $height - Height value for icon-button. (default: $width)\n/// @param {Number} $padding - Padding value for icon-button. (default: max($width, $height) / 2)\n/// @deprecated\n/// This mixin provides too much of low level customization.\n/// Please use mdc-icon-button-size instead.\n///\n@mixin icon-size(\n $width,\n $height: $width,\n $padding: math.max($width, $height) / 2,\n $query: feature-targeting-functions.all()\n) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n width: $width + $padding * 2;\n height: $height + $padding * 2;\n padding: $padding;\n font-size: math.max($width, $height);\n }\n\n // stylelint-disable-next-line selector-max-type\n svg,\n img {\n @include feature-targeting-mixins.targets($feat-structure) {\n width: $width;\n height: $height;\n }\n }\n}\n\n///\n/// Sets the font color and the ripple color to the provided color value.\n/// @param {Color} $color - The desired font and ripple color.\n///\n@mixin ink-color($color, $query: feature-targeting-functions.all()) {\n @include ink-color_($color, $query: $query);\n @include ripple-mixins.states($color, $query: $query);\n}\n\n///\n/// Flips icon only in RTL context.\n///\n@mixin flip-icon-in-rtl($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n .mdc-button__icon {\n @include rtl.rtl {\n @include feature-targeting-mixins.targets($feat-structure) {\n /* @noflip */\n transform: rotate(180deg);\n }\n }\n }\n}\n\n///\n/// Sets the font color to the provided color value for a disabled icon button.\n/// @param {Color} $color - The desired font color.\n///\n@mixin disabled-ink-color($color, $query: feature-targeting-functions.all()) {\n @include if-disabled_ {\n @include ink-color_($color, $query: $query);\n }\n}\n\n@mixin base_($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n display: inline-block;\n position: relative;\n box-sizing: border-box;\n border: none;\n outline: none;\n background-color: transparent;\n fill: currentColor;\n color: inherit;\n font-size: variables.$icon-size;\n text-decoration: none;\n cursor: pointer;\n user-select: none;\n }\n\n // stylelint-disable-next-line selector-max-type\n svg,\n img {\n @include feature-targeting-mixins.targets($feat-structure) {\n width: variables.$icon-size;\n height: variables.$icon-size;\n }\n }\n\n @include disabled-ink-color(text-disabled-on-light, $query: $query);\n\n @include if-disabled_ {\n @include feature-targeting-mixins.targets($feat-structure) {\n cursor: default;\n pointer-events: none;\n }\n }\n}\n\n///\n/// Sets the font color to the provided color value. This can be wrapped in\n/// a state qualifier such as `mdc-icon-button-if-disabled_`.\n/// @access private\n///\n@mixin ink-color_($color, $query: feature-targeting-functions.all()) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(color, $color);\n }\n}\n\n///\n/// Helps style the icon button in its disabled state.\n/// @access private\n///\n@mixin if-disabled_ {\n &:disabled {\n @content;\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/functions\" as feature-targeting-functions;\n@use \"@material/feature-targeting/mixins\" as feature-targeting-mixins;\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($border-width: 1px, $border-style: solid, $query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n position: absolute;\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n border: $border-width $border-style transparent;\n border-radius: inherit;\n content: '';\n }\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-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.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///\n/// Selects for high-contrast mode. Currently this only detects high-contrast\n/// mode in IE and Edge.\n///\n@mixin ie-high-contrast-mode {\n @media screen and (-ms-high-contrast: active) {\n @content;\n }\n}\n","@use '@material/feature-targeting/functions' as feature-targeting-functions;\n@use '@material/feature-targeting/mixins' as feature-targeting;\n@use '@material/typography/mixins' as typography;\n@use '@material/rtl/mixins' as rtl;\n@use '@material/icon-button/mixins' as icon-button-theme;\n@use '@material/select/mixins' as select-theme;\n@use '@material/list/mixins' as list-theme;\n@use '@material/menu/mixins' as menu-theme;\n@use './data-table-theme';\n\n// stylelint-disable selector-class-pattern\n// NOTE: We disable `selector-class-pattern` above to allow using `mdc-` class\n// selectors.\n\n/// Sets core styles for data table pagination.\n@mixin core-styles($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n .mdc-data-table__pagination {\n @include typography.typography(body2, $query: $query);\n\n @include feature-targeting.targets($feat-structure) {\n box-sizing: border-box;\n display: flex;\n justify-content: flex-end;\n }\n }\n\n .mdc-data-table__pagination-trailing {\n @include feature-targeting.targets($feat-structure) {\n @include rtl.reflexive-box(margin, left, 4px);\n\n align-items: center;\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-end;\n }\n }\n\n .mdc-data-table__pagination-navigation {\n @include feature-targeting.targets($feat-structure) {\n align-items: center;\n display: flex;\n }\n }\n\n .mdc-data-table__pagination-button {\n @include icon-button-theme.flip-icon-in-rtl($query: $query);\n @include feature-targeting.targets($feat-structure) {\n @include rtl.reflexive-box(margin, right, 4px);\n }\n }\n\n .mdc-data-table__pagination-total {\n @include feature-targeting.targets($feat-structure) {\n @include rtl.reflexive-property(\n margin,\n $left-value: 14px,\n $right-value: 36px\n );\n\n white-space: nowrap;\n }\n }\n\n .mdc-data-table__pagination-rows-per-page {\n @include feature-targeting.targets($feat-structure) {\n @include rtl.reflexive-box(margin, right, 22px);\n\n align-items: center;\n display: inline-flex;\n }\n }\n\n .mdc-data-table__pagination-rows-per-page-label {\n @include feature-targeting.targets($feat-structure) {\n @include rtl.reflexive-box(margin, right, 12px);\n\n white-space: nowrap;\n }\n }\n\n .mdc-data-table__pagination-rows-per-page-select {\n @include select-theme.min-width(80px, $query: $query);\n @include menu-theme.min-width(80px, $query: $query);\n\n @include feature-targeting.targets($feat-structure) {\n margin: 8px 0;\n }\n\n // TODO(b/158196144): Set it to `-5` density scale using density mixin when\n // select component supports it.\n @include select-theme.outlined-height(\n data-table-theme.$pagination-rows-per-page-select-height,\n $query: $query\n );\n .mdc-list-item {\n @include list-theme.single-line-height(\n data-table-theme.$pagination-rows-per-page-select-height,\n $query: $query\n );\n }\n }\n}\n","//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use \"sass:list\";\n@use \"sass:string\";\n@use \"@material/animation/variables\" as animation-variables;\n@use \"@material/density/functions\" as density-functions;\n@use \"@material/dom/mixins\" as dom-mixins;\n@use \"@material/feature-targeting/functions\" as feature-targeting-functions;\n@use \"@material/feature-targeting/mixins\" as feature-targeting-mixins;\n@use \"@material/floating-label/mixins\" as floating-label-mixins;\n@use \"@material/floating-label/variables\" as floating-label-variables;\n@use \"@material/line-ripple/mixins\" as line-ripple-mixins;\n@use \"@material/list/mixins\" as list-mixins;\n@use \"@material/menu/mixins\" as menu-mixins;\n@use \"@material/menu-surface/mixins\" as menu-surface-mixins;\n@use \"@material/notched-outline/mixins\" as notched-outline-mixins;\n@use \"@material/notched-outline/variables\" as notched-outline-variables;\n@use \"@material/ripple/mixins\" as ripple-mixins;\n@use \"@material/ripple/functions\" as ripple-functions;\n@use \"@material/rtl/mixins\" as rtl-mixins;\n@use \"@material/shape/mixins\" as shape-mixins;\n@use \"@material/shape/functions\";\n@use \"@material/theme/mixins\" as theme-mixins;\n@use \"@material/theme/variables\" as theme-variables;\n@use \"@material/typography/mixins\" as typography-mixins;\n@use \"./helper-text/mixins\" as helper-text-mixins;\n@use \"./icon/variables\" as icon-variables;\n@use \"./icon/mixins\" as icon-mixins;\n@use \"./variables\";\n\n@mixin core-styles($query: feature-targeting-functions.all()) {\n @include ripple($query);\n @include without-ripple($query);\n}\n\n@mixin without-ripple($query: feature-targeting-functions.all()) {\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n $feat-color: feature-targeting-functions.create-target($query, color);\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n .mdc-select {\n @include container-fill-color(variables.$fill-color, $query: $query);\n @include ink-color(variables.$ink-color, $query: $query);\n @include label-color(variables.$label-color, $query: $query);\n @include bottom-line-color(\n variables.$bottom-line-idle-color,\n $query: $query\n );\n @include dropdown-icon-color(\n variables.$dropdown-icon-color,\n $query: $query\n );\n @include focused-dropdown-icon-color(primary, $query: $query);\n @include helper-text-mixins.helper-text-color(\n variables.$helper-text-color,\n $query: $query\n );\n @include icon-mixins.icon-color(variables.$icon-color, $query: $query);\n\n // Focused state colors\n @include focused-bottom-line-color(primary, $query: $query);\n @include focused-label-color(\n variables.$focused-label-color,\n $query: $query\n );\n\n // Hover state colors\n @include hover-bottom-line-color(\n variables.$bottom-line-hover-color,\n $query: $query\n );\n\n // Disabled state colors\n @include disabled-container-fill-color(\n variables.$disabled-fill-color,\n $query: $query\n );\n @include disabled-label-color(\n variables.$disabled-label-color,\n $query: $query\n );\n @include disabled-bottom-line-color(\n variables.$disabled-bottom-line-color,\n $query: $query\n );\n @include disabled-dropdown-icon-color(\n variables.$disabled-dropdown-icon-color,\n $query: $query\n );\n @include disabled-ink-color(variables.$disabled-ink-color, $query: $query);\n @include helper-text-mixins.disabled-helper-text-color(\n variables.$disabled-helper-text-color,\n $query: $query\n );\n @include icon-mixins.disabled-icon-color(\n variables.$disabled-icon-color,\n $query: $query\n );\n\n // High-contrast mode support\n @include dom-mixins.ie-high-contrast-mode() {\n @include disabled-ink-color(GrayText, $query: $query);\n @include disabled-dropdown-icon-color(red, $query: $query);\n @include disabled-label-color(GrayText, $query: $query);\n @include disabled-bottom-line-color(GrayText, $query: $query);\n @include disabled-outline-color(GrayText, $query: $query);\n @include icon-mixins.disabled-icon-color(GrayText, $query: $query);\n @include helper-text-mixins.disabled-helper-text-color(\n GrayText,\n $query: $query\n );\n }\n\n // Floating label private mixin\n @include floating-label_($query: $query);\n\n // structural\n @include filled-height(variables.$height, $query: $query);\n @include shape-radius(small, $query: $query);\n @include padding-horizontal_(\n $left: variables.$anchor-padding-left,\n $left-with-leading-icon: variables.$anchor-padding-left-with-leading-icon,\n $right: variables.$anchor-padding-right,\n $query: $query\n );\n @include min-width(variables.$min-width, $query: $query);\n @include icon-mixins.size(icon-variables.$icon-size, $query: $query);\n @include _dropdown-icon-size(icon-variables.$icon-size, $query: $query);\n @include _option-side-padding(16px, $query: $query);\n @include _option-graphic-trailing-margin(12px, $query: $query);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n display: inline-flex;\n position: relative; // Menu is absolutely positioned relative to this.\n }\n\n &__dropdown-icon {\n @include _dropdown-icon-base($query: $query);\n @include _dropdown-icon-inactive($query: $query);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n @include rtl-mixins.reflexive-property(\n margin,\n icon-variables.$icon-horizontal-margin,\n icon-variables.$icon-horizontal-margin\n );\n display: inline-flex;\n position: relative;\n align-self: center;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n pointer-events: none;\n }\n\n .mdc-select--activated & {\n @include _dropdown-icon-active($query: $query);\n }\n }\n }\n\n .mdc-select__anchor {\n @include floating-label-mixins.float-position(\n variables.$label-position-y,\n $query: $query\n );\n\n @include feature-targeting-mixins.targets($feat-structure) {\n width: 100%;\n position: relative;\n box-sizing: border-box;\n overflow: hidden;\n outline: none;\n cursor: pointer;\n }\n\n @include _if-focused {\n &.mdc-line-ripple::after {\n @include feature-targeting-mixins.targets($feat-structure) {\n transform: scale(1, 2);\n opacity: 1;\n }\n }\n }\n }\n\n @include text_($query: $query);\n\n .mdc-select--outlined {\n @include outlined_($query: $query);\n }\n\n .mdc-select--invalid {\n @include label-color(variables.$error-color, $query: $query);\n @include bottom-line-color(variables.$error-color, $query: $query);\n @include focused-bottom-line-color(variables.$error-color, $query: $query);\n @include focused-label-color(variables.$error-color, $query: $query);\n @include helper-text-mixins.helper-text-validation-color(\n variables.$error-color,\n $query: $query\n );\n @include dropdown-icon-color(variables.$error-color, $query: $query);\n @include focused-dropdown-icon-color(\n variables.$error-color,\n $query: $query\n );\n\n // Hover state colors\n @include hover-bottom-line-color(variables.$error-color, $query: $query);\n\n &.mdc-select--outlined {\n @include outline-color(variables.$error-color, $query: $query);\n @include hover-outline-color(variables.$error-color, $query: $query);\n @include focused-outline-color(variables.$error-color, $query: $query);\n }\n }\n\n .mdc-select--disabled {\n @include disabled_($query: $query);\n }\n\n .mdc-select--with-leading-icon {\n @include with-leading-icon_($query: $query);\n }\n\n .mdc-select--filled {\n @include menu-surface-mixins.flatten-top-when-opened-below($query: $query);\n }\n\n .mdc-select__menu {\n @include icon-mixins.icon-horizontal-margins(0, 0, $query: $query);\n\n .mdc-list {\n @include list-mixins.item-selected-text-color(on-surface, $query: $query);\n }\n }\n}\n\n@mixin ripple($query: feature-targeting-functions.all()) {\n .mdc-select__anchor {\n @include ripple-mixins.surface(\n $ripple-target: variables.$ripple-target,\n $query: $query\n );\n @include ripple-mixins.radius-bounded(\n $ripple-target: variables.$ripple-target,\n $query: $query\n );\n @include ripple-mixins.states-base-color(\n variables.$ink-color,\n $ripple-target: variables.$ripple-target,\n $query: $query\n );\n @include ripple-mixins.states-opacities(\n (\n hover: ripple-functions.states-opacity(variables.$ink-color, hover),\n focus: ripple-functions.states-opacity(variables.$ink-color, focus),\n ),\n $ripple-target: variables.$ripple-target,\n $query: $query\n );\n\n #{variables.$ripple-target} {\n @include ripple-mixins.target-common($query: $query);\n }\n }\n\n .mdc-select__menu .mdc-list .mdc-list-item--selected {\n @include list-mixins.ripple-states(on-surface, $query: $query);\n }\n}\n\n/// Sets the min-width of the select.\n/// @param {Number} $min-width - The desired min-width.\n@mixin min-width($min-width, $query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n min-width: $min-width;\n }\n}\n\n@mixin ink-color($color, $query: feature-targeting-functions.all()) {\n @include _if-enabled {\n @include ink-color_($color, $query: $query);\n }\n}\n\n@mixin disabled-ink-color($color, $query: feature-targeting-functions.all()) {\n @include _if-disabled {\n @include ink-color_($color, $query: $query);\n }\n}\n\n@mixin container-fill-color($color, $query: feature-targeting-functions.all()) {\n @include _if-enabled {\n @include container-fill-color_($color, $query: $query);\n }\n}\n\n@mixin disabled-container-fill-color(\n $color,\n $query: feature-targeting-functions.all()\n) {\n @include _if-disabled {\n @include container-fill-color_($color, $query: $query);\n }\n}\n\n@mixin dropdown-icon-color($color, $query: feature-targeting-functions.all()) {\n @include _if-enabled {\n @include _dropdown-icon-color($color, $query: $query);\n }\n}\n\n@mixin disabled-dropdown-icon-color(\n $color,\n $query: feature-targeting-functions.all()\n) {\n @include _if-disabled {\n @include _dropdown-icon-color($color, $query: $query);\n }\n}\n\n@mixin hover-dropdown-icon-color(\n $color,\n $query: feature-targeting-functions.all()\n) {\n @include _if-enabled {\n &:not(.mdc-select--focused):hover {\n @include _dropdown-icon-color($color, $query: $query);\n }\n }\n}\n\n@mixin focused-dropdown-icon-color(\n $color,\n $query: feature-targeting-functions.all()\n) {\n @include _if-enabled {\n &.mdc-select--focused {\n @include _dropdown-icon-color($color, $query: $query);\n }\n }\n}\n\n@mixin focused-label-color($color, $query: feature-targeting-functions.all()) {\n @include _if-enabled {\n &.mdc-select--focused .mdc-floating-label {\n @include floating-label-mixins.ink-color(\n theme-variables.prop-value($color),\n $query: $query\n );\n }\n }\n}\n\n@mixin label-floating-color($color, $query: feature-targeting-functions.all()) {\n @include _if-enabled {\n .mdc-floating-label--float-above {\n @include floating-label-mixins.ink-color(\n theme-variables.prop-value($color),\n $query: $query\n );\n }\n }\n}\n\n@mixin hover-label-floating-color(\n $color,\n $query: feature-targeting-functions.all()\n) {\n @include _if-enabled {\n &:not(.mdc-select--focused):hover .mdc-floating-label--float-above {\n @include floating-label-mixins.ink-color(\n theme-variables.prop-value($color),\n $query: $query\n );\n }\n }\n}\n\n@mixin bottom-line-color($color, $query: feature-targeting-functions.all()) {\n @include _if-enabled {\n @include bottom-line-color_($color, $query: $query);\n }\n}\n\n@mixin disabled-bottom-line-color(\n $color,\n $query: feature-targeting-functions.all()\n) {\n @include _if-disabled {\n @include bottom-line-color_($color, $query: $query);\n }\n}\n\n@mixin hover-bottom-line-color(\n $color,\n $query: feature-targeting-functions.all()\n) {\n @include _if-enabled {\n &:hover {\n @include bottom-line-color_($color, $query: $query);\n }\n }\n}\n\n@mixin focused-bottom-line-color(\n $color,\n $query: feature-targeting-functions.all()\n) {\n @include _if-enabled {\n @include focused-line-ripple-color_($color, $query: $query);\n }\n}\n\n@mixin label-color($color, $query: feature-targeting-functions.all()) {\n @include _if-enabled {\n .mdc-floating-label {\n @include floating-label-mixins.ink-color($color, $query: $query);\n }\n }\n}\n\n@mixin hover-label-color($color, $query: feature-targeting-functions.all()) {\n @include _if-enabled {\n &:not(.mdc-select--focused):hover .mdc-floating-label {\n @include floating-label-mixins.ink-color(\n theme-variables.prop-value($color),\n $query: $query\n );\n }\n }\n}\n\n@mixin disabled-label-color($color, $query: feature-targeting-functions.all()) {\n @include _if-disabled {\n .mdc-floating-label {\n @include floating-label-mixins.ink-color($color, $query: $query);\n }\n }\n}\n\n@mixin outline-color($color, $query: feature-targeting-functions.all()) {\n @include _if-enabled {\n @include outline-color_($color, $query: $query);\n }\n}\n\n@mixin hover-outline-color($color, $query: feature-targeting-functions.all()) {\n @include _if-enabled {\n @include hover-outline-color_($color, $query: $query);\n }\n}\n\n@mixin focused-outline-color(\n $color,\n $query: feature-targeting-functions.all()\n) {\n @include _if-enabled {\n @include focused-outline-color_($color, $query: $query);\n }\n}\n\n@mixin disabled-outline-color(\n $color,\n $query: feature-targeting-functions.all()\n) {\n @include _if-disabled {\n @include outline-color_($color, $query: $query);\n }\n}\n\n@mixin shape-radius(\n $radius,\n $rtl-reflexive: false,\n $query: feature-targeting-functions.all()\n) {\n @if list.length($radius) > 2 {\n @error \"Invalid radius: '#{$radius}' component doesn't allow customizing all corners\";\n }\n\n $masked-radius: functions.mask-radius($radius, 1 1 0 0);\n\n .mdc-select__anchor {\n @include shape-mixins.radius(\n functions.resolve-percentage-radius(variables.$height, $masked-radius),\n $rtl-reflexive,\n $query: $query\n );\n }\n}\n\n@mixin outline-shape-radius(\n $radius,\n $rtl-reflexive: false,\n $query: feature-targeting-functions.all()\n) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n $resolved-radius: list.nth(\n functions.resolve-percentage-radius(\n variables.$height,\n functions.prop-value($radius)\n ),\n 1\n );\n\n @if (list.length(functions.prop-value($radius)) > 1) {\n // stylelint-disable-next-line max-line-length\n @warn \"mdc-select-outline-shape-radius only supports a single radius; see https://github.com/material-components/material-components-web/issues/4140\";\n }\n\n .mdc-notched-outline {\n @include notched-outline-mixins.shape-radius(\n $resolved-radius,\n $rtl-reflexive,\n $query: $query\n );\n }\n\n .mdc-select__selected-text {\n @include shape-mixins.radius(\n $resolved-radius,\n $rtl-reflexive,\n $query: $query\n );\n }\n\n @if ($resolved-radius > notched-outline-variables.$leading-width) {\n .mdc-select__anchor {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include rtl-mixins.reflexive-property(\n padding,\n $resolved-radius + notched-outline-variables.$padding,\n 0\n );\n }\n }\n\n + .mdc-select-helper-text {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include rtl-mixins.reflexive-property(\n margin,\n $resolved-radius + notched-outline-variables.$padding,\n variables.$outline-label-offset\n );\n }\n }\n }\n}\n\n// Private\n/// Selector for focused state\n/// @access private\n@mixin _if-focused {\n &.mdc-select--focused {\n @content;\n }\n}\n\n/// Selector for enabled state\n/// @access private\n@mixin _if-enabled {\n &:not(.mdc-select--disabled) {\n @content;\n }\n}\n\n/// Selector for disabled state\n/// @access private\n@mixin _if-disabled {\n &.mdc-select--disabled {\n @content;\n }\n}\n\n@mixin ink-color_($color, $query: feature-targeting-functions.all()) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n .mdc-select__selected-text {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(color, $color);\n }\n }\n}\n\n@mixin container-fill-color_(\n $color,\n $query: feature-targeting-functions.all()\n) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n .mdc-select__anchor {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(background-color, $color);\n }\n }\n}\n\n@mixin bottom-line-color_($color, $query: feature-targeting-functions.all()) {\n .mdc-line-ripple {\n @include line-ripple-mixins.inactive-color($color, $query: $query);\n }\n}\n\n@mixin focused-line-ripple-color_(\n $color,\n $query: feature-targeting-functions.all()\n) {\n @include _if-focused {\n .mdc-line-ripple {\n @include line-ripple-mixins.active-color($color, $query: $query);\n }\n }\n}\n\n///\n/// Sets base dropdown icon styles.\n/// @access private\n///\n@mixin _dropdown-icon-base($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n .mdc-select__dropdown-icon-active,\n .mdc-select__dropdown-icon-inactive {\n @include feature-targeting-mixins.targets($feat-structure) {\n position: absolute;\n top: 0;\n left: 0;\n }\n }\n\n .mdc-select__dropdown-icon-graphic {\n $svg-natural-width: 10px;\n $svg-natural-height: 5px;\n\n @include feature-targeting-mixins.targets($feat-structure) {\n width: $svg-natural-width / icon-variables.$icon-size * 100%;\n height: $svg-natural-height / icon-variables.$icon-size * 100%;\n }\n }\n}\n\n///\n/// Sets the dropdown icon to the specified size.\n/// @access private\n///\n@mixin _dropdown-icon-size($size, $query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n .mdc-select__dropdown-icon {\n @include feature-targeting-mixins.targets($feat-structure) {\n width: $size;\n height: $size;\n }\n }\n}\n\n///\n/// Sets the dropdown icon to the specified color.\n/// @access private\n///\n@mixin _dropdown-icon-color($color, $query: feature-targeting-functions.all()) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n @include feature-targeting-mixins.targets($feat-color) {\n .mdc-select__dropdown-icon {\n @include theme-mixins.prop(fill, $color);\n }\n }\n}\n\n///\n/// Sets styles for transitioning the dropdown icon to inactive state.\n/// @access private\n///\n@mixin _dropdown-icon-inactive($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n\n .mdc-select__dropdown-icon-inactive {\n @include feature-targeting-mixins.targets($feat-structure) {\n opacity: 1;\n }\n\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: opacity variables.$icon-inactive-fade-in-duration linear\n variables.$icon-inactive-fade-out-duration;\n }\n }\n\n .mdc-select__dropdown-icon-active {\n @include feature-targeting-mixins.targets($feat-structure) {\n opacity: 0;\n }\n\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: opacity variables.$icon-inactive-fade-out-duration linear;\n }\n }\n}\n\n///\n/// Sets styles for transitioning the dropdown icon to activated state.\n/// @access private\n///\n@mixin _dropdown-icon-active($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n\n .mdc-select__dropdown-icon-inactive {\n @include feature-targeting-mixins.targets($feat-structure) {\n opacity: 0;\n }\n\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: opacity variables.$icon-active-fade-out-duration linear;\n }\n }\n\n .mdc-select__dropdown-icon-active {\n @include feature-targeting-mixins.targets($feat-structure) {\n opacity: 1;\n }\n\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: opacity variables.$icon-active-fade-in-duration linear\n variables.$icon-active-fade-out-duration;\n }\n }\n}\n\n///\n/// Sets the side padding for option text.\n/// @access private\n///\n@mixin _option-side-padding(\n $side-padding,\n $query: feature-targeting-functions.all()\n) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n .mdc-select__menu .mdc-list-item {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include rtl-mixins.reflexive-property(\n padding,\n $side-padding,\n $side-padding\n );\n }\n }\n}\n\n///\n/// Sets the traliing margin for an option's leading graphic.\n/// @access private\n///\n@mixin _option-graphic-trailing-margin(\n $margin-right,\n $query: feature-targeting-functions.all()\n) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n .mdc-select__menu .mdc-list-item__graphic {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include rtl-mixins.reflexive-box(margin, right, $margin-right);\n }\n }\n}\n\n@mixin outline-color_($color, $query: feature-targeting-functions.all()) {\n @include notched-outline-mixins.color($color, $query: $query);\n}\n\n@mixin hover-outline-color_($color, $query: feature-targeting-functions.all()) {\n // stylelint-disable-next-line selector-combinator-space-after\n &:not(.mdc-select--focused) .mdc-select__anchor:hover {\n .mdc-notched-outline {\n @include notched-outline-mixins.color($color, $query: $query);\n }\n }\n}\n\n@mixin focused-outline-color_(\n $color,\n $query: feature-targeting-functions.all()\n) {\n @include _if-focused {\n .mdc-notched-outline {\n @include notched-outline-mixins.stroke-width(\n variables.$outlined-stroke-width,\n $query: $query\n );\n @include notched-outline-mixins.color($color, $query: $query);\n }\n }\n}\n\n@mixin floating-label_($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n .mdc-floating-label {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include rtl-mixins.reflexive-position(\n left,\n variables.$outline-label-offset\n );\n\n top: 50%;\n transform: translateY(-50%);\n pointer-events: none;\n }\n }\n\n &.mdc-select--filled {\n @include _truncate-floating-label-max-width(\n $leading-icon-size: 0,\n $dropdown-icon-size: icon-variables.$icon-size,\n $query: $query\n );\n }\n\n &.mdc-select--outlined {\n .mdc-floating-label {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include rtl-mixins.reflexive-position(\n left,\n notched-outline-variables.$padding\n );\n }\n }\n }\n}\n\n@mixin with-leading-icon_($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include _leading-icon-floating-label-position(\n icon-variables.$icon-size,\n $query: $query\n );\n @include _option-side-padding(12px, $query: $query);\n\n &.mdc-select--filled {\n @include _truncate-floating-label-max-width(\n $leading-icon-size: icon-variables.$icon-size,\n $dropdown-icon-size: icon-variables.$icon-size,\n $query: $query\n );\n }\n\n &.mdc-select--outlined {\n @include _outlined-with-leading-icon-floating-label-position-animation(\n variables.$height,\n icon-variables.$icon-size,\n $query: $query\n );\n @include _truncate-notched-outline-max-width(\n $leading-icon-size: icon-variables.$icon-size,\n $dropdown-icon-size: icon-variables.$icon-size,\n $query: $query\n );\n }\n}\n\n@mixin text_($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n .mdc-select__selected-text {\n @include typography-mixins.typography(subtitle1, $query: $query);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n &::-ms-expand {\n display: none;\n }\n\n &::-ms-value {\n background-color: transparent;\n color: inherit;\n }\n\n box-sizing: border-box;\n width: auto;\n flex-grow: 1;\n height: variables.$selected-text-height;\n border: none;\n outline: none;\n padding: 0;\n white-space: nowrap;\n appearance: none;\n pointer-events: none;\n overflow: hidden;\n }\n\n @include feature-targeting-mixins.targets($feat-color) {\n background-color: transparent;\n color: inherit; // Override default user agent stylesheet\n }\n }\n}\n\n@mixin disabled_($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n cursor: default;\n pointer-events: none;\n }\n}\n\n@mixin outlined_($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n @include container-fill-color(transparent, $query: $query);\n @include outline-color(variables.$outlined-idle-border, $query: $query);\n @include hover-outline-color(\n variables.$outlined-hover-border,\n $query: $query\n );\n @include focused-outline-color(primary, $query: $query);\n @include disabled-outline-color(\n variables.$disabled-outline-color,\n $query: $query\n );\n @include disabled-container-fill-color(transparent, $query: $query);\n @include outline-shape-radius(small, $query: $query);\n @include container-fill-color(transparent, $query: $query);\n\n @include _truncate-notched-outline-max-width(\n $leading-icon-size: 0,\n $dropdown-icon-size: icon-variables.$icon-size,\n $query: $query\n );\n\n @include feature-targeting-mixins.targets($feat-structure) {\n border: none;\n }\n\n .mdc-select__anchor {\n @include floating-label-mixins.shake-animation(\n select-outlined,\n $query: $query\n );\n @include notched-outline-mixins.floating-label-float-position-absolute(\n variables.$outlined-label-position-y,\n $query: $query\n );\n @include notched-outline-mixins.notch-offset(\n notched-outline-variables.$border-width,\n $query: $query\n );\n @include center-aligned_($query: $query);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n overflow: visible;\n }\n }\n\n .mdc-select__selected-text {\n @include feature-targeting-mixins.targets($feat-structure) {\n display: flex;\n border: none;\n z-index: 1;\n }\n\n @include feature-targeting-mixins.targets($feat-color) {\n background-color: transparent;\n }\n }\n\n .mdc-select__icon {\n @include feature-targeting-mixins.targets($feat-structure) {\n z-index: 2;\n }\n }\n\n .mdc-floating-label {\n @include feature-targeting-mixins.targets($feat-structure) {\n line-height: 1.15rem;\n }\n }\n\n &.mdc-select--focused {\n @include notched-outline-mixins.notch-offset(\n variables.$outlined-stroke-width,\n $query: $query\n );\n }\n}\n\n/// Adds horizontal padding to the selected text\n///\n/// @param {Number} $left - left side padding\n/// @param {Number} $left-with-leading-icon - left-side padding when a leading\n/// icon is present\n/// @param {Number} $right - right-side padding; note that a trailing icon is\n/// always present.\n@mixin padding-horizontal_(\n $left,\n $left-with-leading-icon,\n $right,\n $query: feature-targeting-functions.all()\n) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n .mdc-select__anchor {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include rtl-mixins.reflexive-property(padding, $left, $right);\n }\n }\n\n &.mdc-select--with-leading-icon .mdc-select__anchor {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include rtl-mixins.reflexive-property(\n padding,\n $left-with-leading-icon,\n $right\n );\n }\n }\n}\n\n///\n/// Sets density scale for filled select variant.\n///\n/// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values `-4`,\n/// `-3`, `-2`, `-1`, `0`. Default is `0`.\n/// @param {Number} $minimum-height-for-filled-label Sets the minimum height for\n/// filled selects at which to allow floating labels.\n///\n@mixin filled-density(\n $density-scale,\n $minimum-height-for-filled-label: variables.$minimum-height-for-filled-label,\n $query: feature-targeting-functions.all()\n) {\n $height: density-functions.prop-value(\n $density-config: variables.$density-config,\n $density-scale: $density-scale,\n $property-name: height,\n );\n\n @include filled-height(\n $height,\n $minimum-height-for-filled-label: $minimum-height-for-filled-label,\n $query: $query\n );\n @include list-mixins.single-line-density($density-scale, $query: $query);\n}\n\n///\n/// Sets density scale for filled select variant with leading icon.\n///\n/// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values `-4`,\n/// `-3`, `-2`, `-1`, `0`. Default is `0`.\n/// @param {Number} $minimum-height-for-filled-label Sets the minimum height for\n/// filled selects at which to allow floating labels.\n///\n@mixin filled-with-leading-icon-density(\n $density-scale,\n $minimum-height-for-filled-label: variables.$minimum-height-for-filled-label,\n $query: feature-targeting-functions.all()\n) {\n $height: density-functions.prop-value(\n $density-config: variables.$density-config,\n $density-scale: $density-scale,\n $property-name: height,\n );\n\n @include filled-with-leading-icon-height(\n $height,\n $minimum-height-for-filled-label: $minimum-height-for-filled-label,\n $query: $query\n );\n @include list-mixins.single-line-density($density-scale, $query: $query);\n}\n\n///\n/// Sets density scale for outlined select (Excluding outlined select with leading icon).\n///\n/// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values `-4`,\n/// `-3`, `-2`, `-1`, `0`. Default is `0`.\n///\n@mixin outlined-density(\n $density-scale,\n $query: feature-targeting-functions.all()\n) {\n $height: density-functions.prop-value(\n $density-config: variables.$density-config,\n $density-scale: $density-scale,\n $property-name: height,\n );\n\n @include outlined-height($height, $query: $query);\n @include list-mixins.single-line-density($density-scale, $query: $query);\n}\n\n///\n/// Sets density scale for outlined select with leading icon.\n///\n/// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values `-4`,\n/// `-3`, `-2`, `-1`, `0`. Default is `0`.\n///\n@mixin outlined-with-leading-icon-density(\n $density-scale,\n $query: feature-targeting-functions.all()\n) {\n $height: density-functions.prop-value(\n $density-config: variables.$density-config,\n $density-scale: $density-scale,\n $property-name: height,\n );\n\n @include outlined-with-leading-icon-height($height, $query: $query);\n @include list-mixins.single-line-density($density-scale, $query: $query);\n}\n\n///\n/// Sets height of default select variant.\n///\n/// @param {Number} $height\n/// @param {Number} $minimum-height-for-filled-label Sets the minimum height for\n/// filled selects at which to allow floating labels.\n/// @param {Number} $filled-baseline-top The baseline from the top of the anchor\n/// that the input should be aligned to for a filled variant with a label\n/// @access public\n///\n@mixin filled-height(\n $height,\n $minimum-height-for-filled-label: variables.$minimum-height-for-filled-label,\n $filled-baseline-top: variables.$filled-baseline-top,\n $query: feature-targeting-functions.all()\n) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n .mdc-select__anchor {\n @include feature-targeting-mixins.targets($feat-structure) {\n height: $height;\n }\n\n // Filled variant is aligned to baseline...\n @include typography-mixins.baseline(\n $top: $filled-baseline-top,\n $display: flex,\n $query: $query\n );\n // ...unless it is too small to display a label\n @if $height < $minimum-height-for-filled-label {\n @include center-aligned_($query: $query);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n .mdc-floating-label {\n display: none;\n }\n }\n }\n }\n\n // No-label variants are always centered\n &.mdc-select--no-label .mdc-select__anchor {\n @include center-aligned_($query: $query);\n }\n\n @if $height < variables.$height {\n @include _dropdown-icon-size(\n icon-variables.$dense-icon-size,\n $query: $query\n );\n\n &.mdc-select--filled {\n @include _truncate-floating-label-max-width(\n $leading-icon-size: 0,\n $dropdown-icon-size: icon-variables.$dense-icon-size,\n $query: $query\n );\n }\n }\n}\n\n///\n/// Sets height of filled select variant with leading icon.\n///\n/// @param {Number} $height\n/// @param {Number} $minimum-height-for-filled-label Sets the minimum height for\n/// filled selects at which to allow floating labels.\n/// @param {Number} $filled-baseline-top The baseline from the top of the anchor\n/// that the input should be aligned to for a filled variant with a label\n/// @access public\n///\n@mixin filled-with-leading-icon-height(\n $height,\n $minimum-height-for-filled-label: variables.$minimum-height-for-filled-label,\n $filled-baseline-top: variables.$filled-baseline-top,\n $query: feature-targeting-functions.all()\n) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include filled-height(\n $height,\n $minimum-height-for-filled-label: $minimum-height-for-filled-label,\n $filled-baseline-top: $filled-baseline-top,\n $query: $query\n );\n\n @if $height < variables.$height {\n @include icon-mixins.size(icon-variables.$dense-icon-size, $query: $query);\n\n &.mdc-select--filled {\n @include _truncate-floating-label-max-width(\n $leading-icon-size: icon-variables.$dense-icon-size,\n $dropdown-icon-size: icon-variables.$dense-icon-size,\n $query: $query\n );\n }\n\n .mdc-list-item__graphic {\n width: icon-variables.$dense-icon-size;\n height: icon-variables.$dense-icon-size;\n }\n\n .mdc-select__anchor {\n @include _leading-icon-floating-label-position(\n icon-variables.$dense-icon-size,\n $query: $query\n );\n }\n }\n}\n\n///\n/// Sets the position of the floating label for a select with leading icon.\n/// @access private\n///\n@mixin _leading-icon-floating-label-position(\n $icon-size: icon-variables.$icon-size,\n $query: feature-targeting-functions.all()\n) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n $icon-total-width: $icon-size + 2 * icon-variables.$icon-horizontal-margin;\n\n .mdc-floating-label {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include rtl-mixins.reflexive-position(left, $icon-total-width);\n }\n }\n}\n\n///\n/// Sets height of outlined select variant (Excluding outlined select with leading icon).\n///\n/// @param {Number} $height\n/// @param {String} $keyframe-suffix - Optional suffix to use for generated\n/// floating label keyframes\n///\n@mixin outlined-height(\n $height,\n $keyframe-suffix: select-outlined-#{$height},\n $query: feature-targeting-functions.all()\n) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n $positionY: variables.get-outlined-label-position-y($height);\n\n .mdc-select__anchor {\n // Floating label position\n @include notched-outline-mixins.floating-label-float-position-absolute(\n $positionY,\n $query: $query\n );\n\n // Floating label animation\n @include floating-label-mixins.shake-animation(\n $keyframe-suffix,\n $query: $query\n );\n @at-root {\n @include floating-label-mixins.shake-keyframes(\n $keyframe-suffix,\n $positionY,\n $query: $query\n );\n }\n\n @include feature-targeting-mixins.targets($feat-structure) {\n height: $height;\n }\n }\n\n @if $height < variables.$height {\n @include _dropdown-icon-size(\n icon-variables.$dense-icon-size,\n $query: $query\n );\n\n &.mdc-select--outlined {\n @include _truncate-notched-outline-max-width(\n $leading-icon-size: 0,\n $dropdown-icon-size: icon-variables.$dense-icon-size,\n $query: $query\n );\n }\n }\n}\n\n///\n/// Sets height of outlined select with leading icon variant.\n///\n/// @param {Number} $height\n/// @param {String} $keyframe-suffix - Optional suffix to use for generated\n/// floating label keyframes\n///\n@mixin outlined-with-leading-icon-height(\n $height,\n $keyframe-suffix: null,\n $query: feature-targeting-functions.all()\n) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n .mdc-select__anchor {\n @if $height < variables.$height {\n @include _dropdown-icon-size(\n icon-variables.$dense-icon-size,\n $query: $query\n );\n @include _outlined-with-leading-icon-floating-label-position-animation(\n $height,\n icon-variables.$dense-icon-size,\n $keyframe-suffix,\n $query: $query\n );\n } @else {\n @include _outlined-with-leading-icon-floating-label-position-animation(\n $height,\n icon-variables.$icon-size,\n $keyframe-suffix,\n $query: $query\n );\n }\n\n @include feature-targeting-mixins.targets($feat-structure) {\n height: $height;\n }\n }\n\n @if $height < variables.$height {\n .mdc-list-item__graphic {\n width: icon-variables.$dense-icon-size;\n height: icon-variables.$dense-icon-size;\n }\n\n @include icon-mixins.size(icon-variables.$dense-icon-size, $query: $query);\n\n &.mdc-select--outlined {\n @include _truncate-notched-outline-max-width(\n $leading-icon-size: icon-variables.$dense-icon-size,\n $dropdown-icon-size: icon-variables.$dense-icon-size,\n $query: $query\n );\n }\n }\n}\n\n///\n/// Sets the floating label position and animations for a given height for an\n/// outlined select with leaing icon.\n/// @access private\n///\n@mixin _outlined-with-leading-icon-floating-label-position-animation(\n $height,\n $icon-size,\n $keyframe-suffix: select-outlined-leading-icon-#{$height},\n $query: feature-targeting-functions.all()\n) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n $icon-total-width: $icon-size + 2 * icon-variables.$icon-horizontal-margin;\n $resting-position-x: $icon-total-width -\n icon-variables.$icon-horizontal-margin;\n $float-position-y: variables.get-outlined-label-position-y($height);\n $float-position-x: $icon-size + icon-variables.$icon-horizontal-margin -\n notched-outline-variables.$notch-gutter-size;\n\n // Resting label position\n .mdc-floating-label {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include rtl-mixins.reflexive-position(left, $resting-position-x);\n }\n }\n\n // Floating label position\n @include notched-outline-mixins.floating-label-float-position-absolute(\n $float-position-y,\n $float-position-x,\n $query: $query\n );\n\n // Floating label animation\n @include floating-label-mixins.shake-animation(\n $keyframe-suffix,\n $query: $query\n );\n @at-root {\n @include floating-label-mixins.shake-keyframes(\n $keyframe-suffix,\n $float-position-y,\n $float-position-x,\n $query: $query\n );\n }\n\n $keyframe-suffix-rtl: #{$keyframe-suffix}-rtl;\n @include rtl-mixins.rtl {\n @include floating-label-mixins.shake-animation(\n $keyframe-suffix,\n $query: $query\n );\n }\n @at-root {\n @include floating-label-mixins.shake-keyframes(\n $keyframe-suffix-rtl,\n $float-position-y,\n -($float-position-x),\n $query: $query\n );\n }\n}\n\n// Removes filled baseline alignment\n@mixin center-aligned_($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n .mdc-select__selected-text {\n @include typography-mixins.zero-width-prefix($query: $query);\n }\n\n @include feature-targeting-mixins.targets($feat-structure) {\n // In order for a flexbox container to participate in baseline alignment,\n // it follows these rules to determine where its baseline is:\n // https://www.w3.org/TR/css-flexbox-1/#flex-baselines\n //\n // In order to avoid leading icons \"controlling\" the baseline (since they\n // are the first child), flexbox will generate a baseline from any child\n // flex items that participate in baseline alignment.\n //\n // Icons are set to \"align-self: center\", while all other children are\n // aligned to baseline. The next problem is deciding which child is\n // used to determine the baseline.\n //\n // According to spec, the item with the largest distance between its\n // baseline and the edge of the cross axis is placed flush with that edge,\n // making it the baseline of the container.\n // https://www.w3.org/TR/css-flexbox-1/#baseline-participation\n //\n // For the filled variant, the pseudo ::before strut is the \"largest\"\n // child since the input has a height of 28px and the strut is 40px. We\n // can emulate center alignment and force the baseline to use the input\n // text by making the input the full height of the container and removing\n // the baseline strut.\n //\n // IE11 does not respect this, and makes the leading icon (if present)\n // the baseline.\n .mdc-select__selected-text {\n height: 100%;\n display: inline-flex;\n align-items: center;\n }\n\n &::before {\n display: none;\n }\n }\n}\n\n///\n/// Truncates the max-width of the notched outline according to the sizes of\n/// the leading icon and dropdown icon.\n///\n/// @param {Number} $leading-icon-size - Size of leading icon.\n/// @param {Number} $dropdown-icon-size - Size of dropdown icon.\n///\n@mixin _truncate-notched-outline-max-width(\n $leading-icon-size,\n $dropdown-icon-size,\n $query: feature-targeting-functions.all()\n) {\n $truncation: icon-variables.$icon-horizontal-margin * 2 + $dropdown-icon-size +\n notched-outline-variables.$leading-width;\n\n @if $leading-icon-size > 0 {\n $truncation: $truncation +\n icon-variables.$icon-horizontal-margin +\n $leading-icon-size;\n }\n .mdc-select__anchor {\n @include notched-outline-mixins.notch-max-width(\n calc(100% - #{$truncation}),\n $query: $query\n );\n }\n}\n\n///\n/// Truncates the max-width of the floating label according to sizes of the\n/// leading icon and dropdown icon.\n///\n/// @param {Number} $leading-icon-size - Size of leading icon.\n/// @param {Number} $dropdown-icon-size - Size of dropdown icon.\n///\n@mixin _truncate-floating-label-max-width(\n $leading-icon-size,\n $dropdown-icon-size,\n $query: feature-targeting-functions.all()\n) {\n $truncation: icon-variables.$icon-horizontal-margin * 2 + $dropdown-icon-size;\n\n @if $leading-icon-size > 0 {\n $truncation: $truncation +\n icon-variables.$icon-horizontal-margin *\n 2 +\n $leading-icon-size;\n } @else {\n $truncation: $truncation + variables.$outline-label-offset;\n }\n\n .mdc-floating-label {\n @include floating-label-mixins.max-width(\n calc(100% - #{$truncation}),\n $query: $query\n );\n }\n\n .mdc-floating-label--float-above {\n $scale: floating-label-variables.$float-scale;\n @include floating-label-mixins.max-width(\n calc(100% / #{$scale} - #{$truncation} / #{$scale}),\n $query: $query\n );\n }\n}\n","//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use \"sass:math\";\n@use \"@material/elevation/mixins\" as elevation-mixins;\n@use \"@material/feature-targeting/functions\";\n@use \"@material/feature-targeting/mixins\" as feature-targeting-mixins;\n@use \"@material/rtl/mixins\" as rtl-mixins;\n@use \"@material/list/mixins\" as list-mixins;\n@use \"@material/list/variables\" as list-variables;\n@use \"@material/ripple/mixins\" as ripple-mixins;\n@use \"./variables\";\n\n@mixin core-styles($query: functions.all()) {\n $feat-color: functions.create-target($query, color);\n $feat-structure: functions.create-target($query, structure);\n\n @include ripple-mixins.common($query); // COPYBARA_COMMENT_THIS_LINE\n @include elevation-mixins.overlay-common($query); // COPYBARA_COMMENT_THIS_LINE\n\n // Customize the menu-surface and contained list to match the mdc-menu styles.\n .mdc-menu {\n @include list-mixins.item-meta-ink-color(variables.$ink-color, $query);\n @include list-mixins.item-graphic-ink-color(variables.$ink-color, $query);\n @include min-width(variables.$min-width, $query: $query);\n // Include mdc-list selector to ensure list-inside-menu overrides default list styles\n .mdc-list {\n @include list-mixins.item-primary-text-ink-color(\n variables.$ink-color,\n $query\n );\n @include elevation-mixins.overlay-surface-position($query: $query);\n @include elevation-mixins.overlay-dimensions(100%, $query: $query);\n }\n\n .mdc-list-divider {\n @include feature-targeting-mixins.targets($feat-structure) {\n margin: 8px 0;\n }\n }\n\n .mdc-list-item {\n @include feature-targeting-mixins.targets($feat-structure) {\n user-select: none;\n }\n }\n\n .mdc-list-item--disabled {\n @include feature-targeting-mixins.targets($feat-structure) {\n cursor: auto;\n }\n }\n\n //stylelint-disable selector-no-qualifying-type\n a.mdc-list-item .mdc-list-item__text,\n a.mdc-list-item .mdc-list-item__graphic {\n @include feature-targeting-mixins.targets($feat-structure) {\n pointer-events: none;\n }\n }\n // stylelint-enable selector-no-qualifying-type\n }\n\n // postcss-bem-linter: define menu\n .mdc-menu__selection-group {\n @include feature-targeting-mixins.targets($feat-structure) {\n padding: 0;\n fill: currentColor;\n }\n\n .mdc-list-item {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include rtl-mixins.reflexive-property(\n padding,\n 56px,\n list-variables.$side-padding\n );\n }\n }\n\n // Extra specificity required to override `display` property on `mdc-list-item__graphic`.\n .mdc-menu__selection-group-icon {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include rtl-mixins.reflexive-position(left, 16px);\n\n display: none;\n position: absolute;\n // IE11 requires the icon to be vertically centered due to its absolute positioning\n top: 50%;\n transform: translateY(-50%);\n }\n }\n }\n // postcss-bem-linter: end\n\n // stylelint-disable-next-line plugin/selector-bem-pattern\n .mdc-menu-item--selected .mdc-menu__selection-group-icon {\n @include feature-targeting-mixins.targets($feat-structure) {\n display: inline;\n }\n }\n}\n\n@mixin width($width, $query: functions.all()) {\n $feat-structure: functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n @if math.is-unitless($width) {\n width: $width * variables.$width-base;\n } @else {\n width: $width;\n }\n }\n}\n\n/// Sets the min-width of the menu.\n/// @param {Number} $min-width - the desired min-width.\n@mixin min-width($min-width, $query: functions.all()) {\n $feat-structure: functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n min-width: $min-width;\n }\n}\n","//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use \"@material/rtl/mixins\" as rtl-mixins;\n@use \"@material/theme/variables\" as variables2;\n@use \"@material/theme/mixins\" as theme-mixins;\n@use \"@material/feature-targeting/functions\";\n@use \"@material/feature-targeting/mixins\" as feature-targeting-mixins;\n@use \"@material/animation/variables\" as animation-variables;\n@use \"@material/typography/mixins\" as typography-mixins;\n@use \"./variables\";\n\n@mixin core-styles($query: functions.all()) {\n $feat-structure: functions.create-target($query, structure);\n $feat-animation: functions.create-target($query, animation);\n\n // postcss-bem-linter: define floating-label\n .mdc-floating-label {\n @include typography-mixins.typography(\n subtitle1,\n $exclude-props: (line-height),\n $query: $query\n );\n\n @include feature-targeting-mixins.targets($feat-structure) {\n position: absolute;\n /* @noflip */\n left: 0;\n /* @noflip */\n transform-origin: left top;\n line-height: 1.15rem;\n text-align: left;\n text-overflow: ellipsis;\n white-space: nowrap;\n cursor: text;\n overflow: hidden;\n\n /* @alternate */\n // Force the label into its own layer to prevent visible layer promotion adjustments\n // when the ripple is activated behind it.\n will-change: transform;\n\n @include rtl-mixins.rtl {\n /* @noflip */\n right: 0;\n /* @noflip */\n left: auto;\n /* @noflip */\n transform-origin: right top;\n /* @noflip */\n text-align: right;\n }\n }\n\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: transform variables.$transition-duration\n animation-variables.$standard-curve-timing-function,\n color variables.$transition-duration\n animation-variables.$standard-curve-timing-function;\n }\n }\n\n .mdc-floating-label--float-above {\n @include feature-targeting-mixins.targets($feat-structure) {\n cursor: auto;\n }\n }\n\n .mdc-floating-label--required {\n &::after {\n @include _required-content($query);\n }\n\n @include rtl-mixins.rtl {\n &::after {\n @include _required-content-rtl($query);\n }\n }\n }\n\n @at-root {\n @include float-position(variables.$position-y, $query: $query);\n @include shake-animation(standard, $query: $query);\n }\n\n @include shake-keyframes(standard, variables.$position-y, $query: $query);\n}\n\n@mixin ink-color($color, $query: functions.all()) {\n $feat-color: functions.create-target($query, color);\n\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(color, $color);\n }\n}\n\n// Used for textarea in case of scrolling\n@mixin fill-color($color, $query: functions.all()) {\n $feat-color: functions.create-target($query, color);\n\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(background-color, $color);\n }\n}\n\n@mixin shake-keyframes(\n $modifier,\n $positionY,\n $positionX: 0%,\n $scale: variables.$float-scale,\n $query: functions.all()\n) {\n $feat-animation: functions.create-target($query, animation);\n\n @include feature-targeting-mixins.targets($feat-animation) {\n @keyframes mdc-floating-label-shake-float-above-#{$modifier} {\n 0% {\n transform: translateX(calc(0 - #{$positionX}))\n translateY(-#{$positionY}) scale(#{$scale});\n }\n\n 33% {\n animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);\n transform: translateX(calc(4% - #{$positionX}))\n translateY(-#{$positionY}) scale(#{$scale});\n }\n\n 66% {\n animation-timing-function: cubic-bezier(\n 0.302435,\n 0.381352,\n 0.55,\n 0.956352\n );\n transform: translateX(calc(-4% - #{$positionX}))\n translateY(-#{$positionY}) scale(#{$scale});\n }\n\n 100% {\n transform: translateX(calc(0 - #{$positionX}))\n translateY(-#{$positionY}) scale(#{$scale});\n }\n }\n }\n}\n\n@mixin float-position(\n $positionY,\n $positionX: 0%,\n $scale: variables.$float-scale,\n $query: functions.all()\n) {\n $feat-structure: functions.create-target($query, structure);\n\n .mdc-floating-label--float-above {\n @include feature-targeting-mixins.targets($feat-structure) {\n @if $positionX > 0 or $positionX < 0 {\n transform: translateY(-1 * $positionY)\n translateX(-1 * $positionX)\n scale($scale);\n\n @include rtl-mixins.rtl {\n transform: translateY(-1 * $positionY) translateX($positionX)\n scale($scale);\n }\n } @else {\n transform: translateY(-1 * $positionY) scale($scale);\n }\n }\n }\n}\n\n@mixin shake-animation($modifier, $query: functions.all()) {\n $feat-animation: functions.create-target($query, animation);\n\n .mdc-floating-label--shake {\n @include feature-targeting-mixins.targets($feat-animation) {\n animation: mdc-floating-label-shake-float-above-#{$modifier} 250ms 1;\n }\n }\n}\n\n@mixin max-width($max-width, $query: functions.all()) {\n $feat-structure: functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n max-width: $max-width;\n }\n}\n\n///\n/// Sets the CSS transition for the floating animation.\n///\n/// @param {Number} $duration-ms - Duration (in ms) of the animation.\n/// @param {String} $timing-function - Optionally overrides the default animation timing function.\n///\n@mixin float-transition(\n $duration-ms,\n $timing-function: animation-variables.$standard-curve-timing-function,\n $query: functions.all()\n) {\n $feat-animation: functions.create-target($query, animation);\n\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: color $duration-ms $timing-function,\n transform $duration-ms $timing-function;\n }\n}\n\n@mixin _required-content($query: functions.all()) {\n $feat-structure: functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n /* @noflip */\n margin-left: 1px;\n /* @noflip */\n margin-right: 0px;\n content: '*';\n }\n}\n\n// Need to specify LTR/RTL manually since rtl mixins will add ::after[dir=rtl]\n// selector and that breaks some browsers\n@mixin _required-content-rtl($query: functions.all()) {\n $feat-structure: functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n /* @noflip */\n margin-left: 0;\n /* @noflip */\n margin-right: 1px;\n }\n}\n","// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:/\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software./\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n$icon-size: 24px !default;\n$dense-icon-size: 20px !default;\n$icon-horizontal-margin: 12px !default;\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@use \"sass:list\";\n@use \"sass:map\";\n@use \"@material/density/functions\" as density-functions;\n@use \"@material/dom/mixins\" as dom-mixins;\n@use \"@material/rtl/mixins\" as rtl-mixins;\n@use \"@material/theme/mixins\" as theme-mixins;\n@use \"@material/shape/functions\" as shape-functions;\n@use \"@material/shape/mixins\" as shape-mixins;\n@use \"@material/ripple/mixins\" as ripple-mixins;\n@use \"@material/theme/functions\" as theme-functions;\n@use \"@material/typography/mixins\" as typography-mixins;\n@use \"@material/typography/variables\" as typography-variables;\n@use \"@material/feature-targeting/functions\" as feature-targeting-functions;\n@use \"@material/feature-targeting/mixins\" as feature-targeting-mixins;\n@use \"./variables\";\n@use \"@material/ripple/functions\" as ripple-functions;\n@use \"@material/theme/variables\" as theme-variables;\n\n//\n// Public\n//\n\n@mixin core-styles($query: feature-targeting-functions.all()) {\n @include without-ripple($query);\n @include ripple($query);\n}\n\n// This API is intended for use by frameworks that may want to separate the ripple-related styles from the other\n// list styles. It is recommended that most users use `mdc-list-core-styles` instead.\n@mixin without-ripple($query: feature-targeting-functions.all()) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n $feat-typography: feature-targeting-functions.create-target($query, typography);\n\n $divider-color: if(\n theme-functions.tone(theme-variables.$background) == \"dark\",\n variables.$divider-color-on-dark-bg,\n variables.$divider-color-on-light-bg\n );\n\n .mdc-list {\n @include base_($query);\n }\n\n @include single-line-density(variables.$single-line-density-scale, $query: $query);\n @include item-secondary-text-ink-color(text-secondary-on-background, $query);\n @include item-graphic-fill-color(transparent, $query);\n @include item-graphic-ink-color(text-icon-on-background, $query);\n @include item-meta-ink-color(text-hint-on-background, $query);\n @include group-subheader-ink-color(text-primary-on-background, $query);\n @include item-disabled-text-opacity(variables.$text-disabled-opacity, $query);\n @include item-disabled-text-color(variables.$text-disabled-color, $query);\n @include item-selected-text-color(variables.$text-selected-color, $query);\n\n .mdc-list--dense {\n @include feature-targeting-mixins.targets($feat-structure) {\n padding-top: 4px;\n padding-bottom: 4px;\n font-size: .812rem;\n }\n }\n\n .mdc-list-item {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include item-base_;\n }\n\n &:not(.mdc-list-item--selected):focus::before {\n @include dom-mixins.transparent-border($query: $query);\n }\n\n &.mdc-list-item--selected::before {\n @include dom-mixins.transparent-border(\n $border-width: 3px, $border-style: double, $query: $query);\n }\n\n @include list-item-padding-variant(\n variables.$textual-variant-config, $query);\n @include list-item-height-variant(\n variables.$textual-variant-config, $query);\n\n .mdc-list--icon-list & {\n @include list-item-padding-variant(\n variables.$icon-variant-config, $query);\n @include list-item-height-variant(\n variables.$icon-variant-config, $query);\n }\n\n .mdc-list--avatar-list & {\n @include list-item-padding-variant(\n variables.$avatar-variant-config, $query);\n @include list-item-height-variant(\n variables.$avatar-variant-config, $query);\n }\n\n .mdc-list--thumbnail-list & {\n @include list-item-padding-variant(\n variables.$thumbnail-variant-config, $query);\n @include list-item-height-variant(\n variables.$thumbnail-variant-config, $query);\n }\n\n .mdc-list--image-list & {\n @include list-item-padding-variant(\n variables.$image-variant-config, $query);\n @include list-item-height-variant(\n variables.$image-variant-config, $query);\n }\n\n .mdc-list--video-list & {\n @include list-item-padding-variant(\n variables.$video-variant-config, $query);\n @include list-item-height-variant(\n variables.$video-variant-config, $query);\n }\n }\n\n // This is included here to preserve expected specificity behavior (avatar\n // graphic styles must take priority).\n // TODO(b/157038316): regroup this with density styles when nesting is fixed.\n .mdc-list--dense .mdc-list-item__graphic {\n @include graphic-size-dense_(20px, $query);\n }\n\n .mdc-list-item__graphic {\n @include feature-targeting-mixins.targets($feat-structure) {\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n fill: currentColor;\n object-fit: cover;\n }\n\n // TODO(b/156624966): this retains legacy spacing but should be updated.\n @include graphic-size-variant(variables.$deprecated-graphic-config, $query);\n\n .mdc-list--icon-list & {\n @include graphic-size-variant(variables.$icon-variant-config, $query);\n }\n\n .mdc-list--avatar-list & {\n @include graphic-size-variant(variables.$avatar-variant-config, $query);\n @include feature-targeting-mixins.targets($feat-structure) {\n border-radius: 50%;\n }\n }\n\n .mdc-list--thumbnail-list & {\n @include graphic-size-variant(\n variables.$thumbnail-variant-config, $query);\n }\n\n .mdc-list--image-list & {\n @include graphic-size-variant(variables.$image-variant-config, $query);\n }\n\n .mdc-list--video-list & {\n @include graphic-size-variant(variables.$video-variant-config, $query);\n }\n }\n\n // Extra specificity is to override .material-icons display style if used in\n // conjunction with mdc-list-item__graphic\n // stylelint-disable plugin/selector-bem-pattern\n .mdc-list .mdc-list-item__graphic {\n @include feature-targeting-mixins.targets($feat-structure) {\n display: inline-flex;\n }\n }\n // stylelint-enable plugin/selector-bem-pattern\n\n .mdc-list-item__meta {\n // stylelint-disable selector-class-pattern\n &:not(.material-icons) {\n @include typography-mixins.typography(caption, $query);\n }\n // stylelint-enable selector-class-pattern\n\n @include feature-targeting-mixins.targets($feat-structure) {\n @include rtl-mixins.reflexive-property(margin, auto, 0, \".mdc-list-item\");\n }\n }\n\n .mdc-list-item__text {\n @include typography-mixins.overflow-ellipsis($query);\n }\n\n // Disable interaction on label elements that may automatically\n // toggle corresponding checkbox / radio input.\n .mdc-list-item__text[for] {\n @include feature-targeting-mixins.targets($feat-structure) {\n pointer-events: none;\n }\n }\n\n .mdc-list-item__primary-text {\n @include typography-mixins.overflow-ellipsis($query);\n @include typography-mixins.text-baseline(\n $top: variables.$item-primary-text-baseline-height,\n $bottom: variables.$item-secondary-text-baseline-height,\n $display: block,\n $query: $query\n );\n\n .mdc-list--video-list &,\n .mdc-list--image-list &,\n .mdc-list--thumbnail-list &,\n .mdc-list--avatar-list &,\n .mdc-list--icon-list & {\n @include typography-mixins.text-baseline(\n $top: variables.$item-primary-text-baseline-height-with-graphic,\n $bottom: variables.$item-secondary-text-baseline-height,\n $query: $query\n );\n }\n\n // stylelint-disable plugin/selector-bem-pattern\n .mdc-list--dense & {\n @include typography-mixins.text-baseline(\n $top: variables.$dense-item-primary-text-baseline-height,\n $bottom: variables.$item-secondary-text-baseline-height,\n $query: $query\n );\n }\n // stylelint-enable plugin/selector-bem-pattern\n }\n\n .mdc-list-item__secondary-text {\n @include typography-mixins.typography(body2, $query);\n @include typography-mixins.overflow-ellipsis($query);\n @include typography-mixins.text-baseline(\n $top: variables.$item-secondary-text-baseline-height,\n $display: block,\n $query: $query\n );\n\n // stylelint-disable plugin/selector-bem-pattern\n .mdc-list--dense & {\n @include feature-targeting-mixins.targets($feat-structure) {\n font-size: inherit;\n }\n }\n // stylelint-enable plugin/selector-bem-pattern\n }\n\n // stylelint-disable plugin/selector-bem-pattern\n .mdc-list--dense .mdc-list-item {\n @include feature-targeting-mixins.targets($feat-structure) {\n height: 40px;\n }\n }\n\n .mdc-list--two-line .mdc-list-item__text {\n @include feature-targeting-mixins.targets($feat-structure) {\n align-self: flex-start;\n }\n }\n\n .mdc-list--two-line {\n .mdc-list-item {\n @include feature-targeting-mixins.targets($feat-structure) {\n height: variables.$two-line-height;\n }\n }\n\n &.mdc-list--video-list .mdc-list-item ,\n &.mdc-list--image-list .mdc-list-item ,\n &.mdc-list--thumbnail-list .mdc-list-item ,\n &.mdc-list--avatar-list .mdc-list-item,\n &.mdc-list--icon-list .mdc-list-item {\n @include feature-targeting-mixins.targets($feat-structure) {\n height: variables.$two-line-graphic-height;\n }\n }\n\n // Icons in multiline lists are the only graphic that isn't centered.\n &.mdc-list--icon-list .mdc-list-item__graphic {\n @include feature-targeting-mixins.targets($feat-structure) {\n align-self: flex-start;\n margin-top: variables.$two-line-icon-top-margin;\n }\n }\n }\n\n .mdc-list--two-line.mdc-list--dense .mdc-list-item,\n .mdc-list--avatar-list.mdc-list--dense .mdc-list-item {\n @include feature-targeting-mixins.targets($feat-structure) {\n height: 60px;\n }\n }\n\n .mdc-list--avatar-list.mdc-list--dense .mdc-list-item__graphic {\n @include graphic-size-dense_(36px, $query);\n }\n\n // Only change mouse cursor for list items which are not disabled.\n :not(.mdc-list-item--disabled).mdc-list-item {\n @include feature-targeting-mixins.targets($feat-structure) {\n cursor: pointer;\n }\n }\n\n // Override anchor tag styles for the use-case of a list being used for navigation\n // stylelint-disable selector-max-type,selector-no-qualifying-type\n a.mdc-list-item {\n @include feature-targeting-mixins.targets($feat-structure) {\n color: inherit;\n text-decoration: none;\n }\n }\n // stylelint-enable selector-max-type,selector-no-qualifying-type\n\n .mdc-list-divider {\n @include feature-targeting-mixins.targets($feat-structure) {\n height: 0;\n margin: 0;\n border: none;\n border-bottom-width: 1px;\n border-bottom-style: solid;\n }\n }\n\n // Note: ideally we'd be able to hoist this to the top-level `$feat-color`, but doing so\n // will cause the `border` declaration on `.mdc-list-divider` above to override it.\n @include divider-color($divider-color, $query);\n\n // Deprecated. Use the specialized inset classes instead.\n // Items are fully inset using padding.\n .mdc-list-divider--padded {\n @include divider-inset-variant(\n variables.$textual-variant-config, $use-padding: true, $query: $query);\n }\n\n // Deprecated. Use the specialized inset classes instead.\n // Items's leading, but not trailing, edge is inset to account for *avatar*\n // width.\n .mdc-list-divider--inset {\n @include divider-inset-variant(\n variables.$avatar-variant-config, $trailing: false, $query: $query);\n }\n\n // Deprecated. Use the specialized inset classes instead.\n // Item's leading and trailing edges are inset to account for *avatar* width.\n .mdc-list-divider--inset.mdc-list-divider--padded {\n @include divider-inset-variant(\n variables.$avatar-variant-config, $query: $query);\n }\n\n .mdc-list {\n @include divider-insets-variant(\n variables.$textual-variant-config, $query: $query);\n }\n\n .mdc-list--icon-list {\n @include divider-insets-variant(\n variables.$icon-variant-config, $query: $query);\n }\n\n .mdc-list--avatar-list {\n @include divider-insets-variant(\n variables.$avatar-variant-config, $query: $query);\n }\n\n .mdc-list--thumbnail-list {\n @include divider-insets-variant(\n variables.$thumbnail-variant-config, $query: $query);\n }\n\n .mdc-list--image-list {\n @include divider-insets-variant(\n variables.$image-variant-config, $query: $query);\n }\n\n .mdc-list--video-list {\n @include divider-insets-variant(\n variables.$video-variant-config, $query: $query);\n }\n\n .mdc-list-group {\n @include feature-targeting-mixins.targets($feat-structure) {\n // Cancel top/bottom padding on individual lists within group\n .mdc-list {\n padding: 0;\n }\n }\n }\n\n .mdc-list-group__subheader {\n $mdc-list-subheader-virtual-height: 3rem;\n $mdc-list-subheader-leading: map.get(map.get(typography-variables.$styles, body1), line-height);\n $mdc-list-subheader-margin: calc((#{$mdc-list-subheader-virtual-height} - #{$mdc-list-subheader-leading}) / 2);\n\n @include typography-mixins.typography(subtitle1, $query);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n margin: $mdc-list-subheader-margin variables.$side-padding;\n }\n }\n}\n\n// This API is intended for use by frameworks that may want to separate the ripple-related styles from the other\n// list styles. It is recommended that most users use `mdc-list-core-styles` instead.\n@mixin ripple($query: feature-targeting-functions.all()) {\n @include ripple-mixins.common($query); // COPYBARA_COMMENT_THIS_LINE\n\n // List items should support states by default, but it should be possible to opt out.\n :not(.mdc-list-item--disabled).mdc-list-item {\n @include item-interactive-ripple_($query);\n }\n\n // Set styles only for focus state on disabled list item.\n .mdc-list-item--disabled {\n @include ripple-mixins.surface($ripple-target: variables.$ripple-target, $query: $query);\n @include ripple-mixins.radius-bounded($ripple-target: variables.$ripple-target, $query: $query);\n @include ripple-mixins.states-base-color(theme-variables.prop-value(on-surface), $ripple-target: variables.$ripple-target, $query: $query);\n @include ripple-mixins.states-focus-opacity(ripple-functions.states-opacity(primary, focus), $ripple-target: variables.$ripple-target, $query: $query);\n\n #{variables.$ripple-target} {\n @include ripple-mixins.target-common($query: $query);\n }\n }\n}\n\n///\n/// Sets ripple color for a list item.\n///\n@mixin ripple-states($color, $query: feature-targeting-functions.all()) {\n @include ripple-mixins.states(\n $color: $color, $query: $query, $ripple-target: variables.$ripple-target);\n}\n\n/// Sets the text color of the list item in selected or activated state.\n/// @param {color} $color - The desired text color.\n@mixin item-selected-text-color($color, $query: feature-targeting-functions.all()) {\n // \"Selected\" is ephemeral and likely to change soon. E.g., selecting one or more photos to share in Google Photos.\n // \"Activated\" is more permanent. E.g., the currently highlighted navigation destination in a drawer.\n .mdc-list-item--selected,\n .mdc-list-item--activated {\n @include item-primary-text-ink-color($color, $query: $query);\n @include item-graphic-ink-color($color, $query: $query);\n }\n}\n\n@mixin item-primary-text-ink-color($color, $query: feature-targeting-functions.all()) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(color, $color);\n }\n}\n\n@mixin item-secondary-text-ink-color($color, $query: feature-targeting-functions.all()) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n .mdc-list-item__secondary-text {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(color, $color);\n }\n }\n}\n\n@mixin item-graphic-fill-color($color, $query: feature-targeting-functions.all()) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n .mdc-list-item__graphic {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(background-color, $color);\n }\n }\n}\n\n@mixin item-graphic-ink-color($color, $query: feature-targeting-functions.all()) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n .mdc-list-item__graphic {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(color, $color);\n }\n }\n}\n\n@mixin item-meta-ink-color($color, $query: feature-targeting-functions.all()) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n .mdc-list-item__meta {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(color, $color);\n }\n }\n}\n\n///\n/// Sets shape radius (rounded) to single line list variant.\n///\n/// @param {Number | List} $radius Radius size in `px` or percentage. It can be 4 value corner or single radius.\n/// Set to `50%` for rounded shape.\n/// @param {Boolean} $rtl-reflexive Set to true to flip border radius in RTL context. Defaults to `false`.\n/// @param {Number} $density-scale Density scale of single line list. Set this only when custom density is applied.\n/// Defaults to `$mdc-list-single-line-density-scale`.\n///\n/// @access public\n///\n@mixin single-line-shape-radius(\n $radius,\n $rtl-reflexive: false,\n $density-scale: variables.$single-line-density-scale,\n $query: feature-targeting-functions.all()) {\n\n $height: density-functions.prop-value(\n $density-config: variables.$single-line-density-config,\n $density-scale: $density-scale,\n $property-name: height,\n );\n\n .mdc-list-item {\n @include shape-mixins.radius(\n $radius,\n $rtl-reflexive,\n $component-height: $height,\n $query: $query\n );\n }\n}\n\n@mixin divider-color($color, $query: feature-targeting-functions.all()) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n .mdc-list-divider {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(border-bottom-color, $color);\n }\n }\n}\n\n@mixin group-subheader-ink-color($color, $query: feature-targeting-functions.all()) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n .mdc-list-group__subheader {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(color, $color);\n }\n }\n}\n\n@mixin item-disabled-text-opacity($opacity, $query: feature-targeting-functions.all()) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n .mdc-list-item--disabled .mdc-list-item__text {\n @include feature-targeting-mixins.targets($feat-color) {\n opacity: $opacity;\n }\n }\n}\n\n@mixin item-disabled-text-color($color, $query: feature-targeting-functions.all()) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n .mdc-list-item--disabled {\n .mdc-list-item__text,\n .mdc-list-item__primary-text,\n .mdc-list-item__secondary-text {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(color, $color);\n }\n }\n }\n}\n\n///\n/// Establishes each list item's padding using a variant config.\n///\n/// @param {Map} $variant-config The list variant's configuration.\n///\n/// @access public\n///\n@mixin list-item-padding-variant(\n $variant-config, $query: feature-targeting-functions.all()) {\n $leading-padding: map.get($variant-config, leading-padding);\n @include list-item-padding($leading-padding, $query);\n}\n\n///\n/// Establishes each list item's padding.\n///\n/// @param {Number} $leading-padding The item's leading padding.\n///\n/// @access public\n///\n@mixin list-item-padding(\n $leading-padding, $query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n @include rtl-mixins.reflexive-property(\n padding, $leading-padding, variables.$trailing-padding);\n }\n}\n\n///\n/// Establishes each list item's single line height using a variant config.\n///\n/// @param {Map} $variant-config The list variant's configuration.\n///\n/// @access public\n///\n@mixin list-item-height-variant(\n $variant-config, $query: feature-targeting-functions.all()) {\n $single-line-height: map.get($variant-config, single-line-height);\n @include list-item-height($single-line-height, $query);\n}\n\n///\n/// Establishes each list item's height.\n///\n/// @param {Number} $height The item's height.\n///\n/// @access public\n///\n@mixin list-item-height($height, $query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n height: $height;\n }\n}\n\n///\n/// Sets the trailing margin used by icons.\n///\n/// @param {Number} $margin The trailing margin applied to icons.\n///\n/// @access public\n///\n@mixin icon-margin($margin, $query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n .mdc-list-item__graphic {\n @include rtl-mixins.reflexive-box(\n margin, right, $margin);\n }\n }\n}\n\n///\n/// Sets divider inset sizes for each list variant.\n///\n/// @param {Map} $variant-config The list variant's configuration.\n///\n/// @access public\n///\n@mixin divider-insets-variant(\n $variant-config, $query: feature-targeting-functions.all()) {\n $leading-padding: map.get($variant-config, leading-padding);\n $text-offset: map.get($variant-config, text-offset);\n @include divider-insets($leading-padding, $text-offset, $query);\n}\n\n///\n/// Sets divider inset sizes for each list variant.\n///\n/// @param {Number} $leading-padding The item's leading padding.\n/// @param {Number} $text-offset The item's text offset.\n///\n/// @access public\n///\n@mixin divider-insets(\n $leading-padding, $text-offset, $query: feature-targeting-functions.all()) {\n .mdc-list-divider--inset-leading {\n @include divider-inset(\n $leading-padding, $text-offset, $trailing: false, $query: $query);\n }\n\n .mdc-list-divider--inset-trailing {\n @include divider-inset(\n $leading-padding, $text-offset, $leading: false, $query: $query);\n }\n\n .mdc-list-divider--inset-leading.mdc-list-divider--inset-trailing {\n @include divider-inset($leading-padding, $text-offset, $query: $query);\n }\n\n .mdc-list-divider--inset-leading.mdc-list-divider--padding {\n @include divider-inset(\n $leading-padding, $text-offset, $trailing: false, $use-padding: true,\n $query: $query);\n }\n\n .mdc-list-divider--inset-leading.mdc-list-divider--inset-trailing.mdc-list-divider--inset-padding {\n @include divider-inset(\n $leading-padding, $text-offset, $use-padding: true, $query: $query);\n }\n}\n\n// Sets the width and height of the graphic element using a variant config.\n@mixin graphic-size-variant(\n $variant-config, $query: feature-targeting-functions.all()) {\n $leading-padding: map.get($variant-config, leading-padding);\n $text-offset: map.get($variant-config, text-offset);\n $width: map.get(map.get($variant-config, graphic-size), width);\n $height: map.get(map.get($variant-config, graphic-size), height);\n\n @include graphic-size(\n $leading-padding, $text-offset, $width, $height, $query);\n}\n\n// Sets the width and height of the graphic element, as well as calculates the\n// trailing margin for the graphic element such that the text is always offset\n// from the item's leading edge by 72px, which is defined within the spec. If\n// height isn't specified, the graphic is assumed to be square.\n// TODO(b/155397992): restructure to use symmetric margins.\n@mixin graphic-size(\n $leading-padding, $text-offset, $width, $height,\n $query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n $margin-value: max(\n $text-offset - $leading-padding - $width, $leading-padding);\n @include feature-targeting-mixins.targets($feat-structure) {\n @include rtl-mixins.reflexive-box(\n margin, right, $margin-value);\n width: $width;\n height: $height;\n }\n}\n\n// Deprecated. Supports legacy density styles.\n@mixin graphic-size-dense_($size, $query: feature-targeting-functions.all()) {\n @include graphic-size(\n $leading-padding: 16px, $text-offset: 16px, $width: $size, $height: $size,\n $query: $query);\n}\n\n///\n/// Computes the appropriate leading inset for a divider based on list type.\n///\n/// @param {String} $variant-config The list variant configuration.\n/// @param {Boolean} $leading Whether to apply the leading inset.\n/// @param {Boolean} $trailing Whether to apply the trailing inset.\n/// @param {Boolean} $use-padding Whether to align with padding vs. text offset.\n///\n/// @access private\n///\n@mixin divider-inset-variant(\n $variant-config, $leading: true, $trailing: true, $use-padding: false,\n $query: feature-targeting-functions.all()) {\n $leading-padding: map.get($variant-config, leading-padding);\n $text-offset: map.get($variant-config, text-offset);\n\n @include divider-inset(\n $leading-padding, $text-offset, $leading, $trailing, $use-padding, $query);\n}\n\n@mixin divider-inset(\n $leading-padding, $text-offset, $leading: true, $trailing: true,\n $use-padding: false, $query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n $trailing-inset: if($trailing, variables.$trailing-padding, 0);\n $leading-inset:\n if($leading, if($use-padding, $leading-padding, $text-offset), 0);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n @if $leading {\n @include rtl-mixins.reflexive-box(margin, left, $leading-inset);\n }\n width: calc(100% - #{$leading-inset + $trailing-inset});\n }\n}\n\n///\n/// Sets density scale to single line list variant.\n///\n/// @param {Number} $density-scale Density scale for list. Supported density scales are `-4`, `-3`, `-2`, `-1` and `0`.\n///\n/// @access public\n///\n@mixin single-line-density($density-scale, $query: feature-targeting-functions.all()) {\n $height: density-functions.prop-value(\n $density-config: variables.$single-line-density-config,\n $density-scale: $density-scale,\n $property-name: height,\n );\n\n .mdc-list-item {\n @include single-line-height($height, $query: $query);\n }\n}\n\n///\n/// Sets height to single line list variant.\n///\n/// @param {Number} $height Height value in `px`.\n///\n/// @access public\n///\n@mixin single-line-height($height, $query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n height: $height;\n }\n}\n\n//\n// Private\n//\n\n@mixin base_($query: feature-targeting-functions.all()) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n $feat-typography: feature-targeting-functions.create-target($query, typography);\n\n @include typography-mixins.typography(subtitle1, $query);\n\n @include feature-targeting-mixins.targets($feat-typography) {\n // According to the mocks and stickersheet, the line-height is\n // adjusted to 24px for text content, same as for body1.\n /* @alternate */\n line-height: map.get(map.get(typography-variables.$styles, body1), line-height);\n }\n\n @include feature-targeting-mixins.targets($feat-structure) {\n margin: 0;\n padding: 8px 0;\n list-style-type: none;\n\n &:focus {\n outline: none;\n }\n }\n\n @include item-primary-text-ink-color(text-primary-on-background, $query);\n}\n\n@mixin item-base_ {\n display: flex;\n position: relative;\n align-items: center;\n justify-content: flex-start;\n overflow: hidden;\n padding: 0;\n\n &:focus {\n outline: none;\n }\n}\n\n// Ripple styles for an interactive list item (one that is enabled and inside an interactive list).\n@mixin item-interactive-ripple_($query: feature-targeting-functions.all()) {\n @include ripple-mixins.surface($ripple-target: variables.$ripple-target, $query: $query);\n @include ripple-mixins.radius-bounded($ripple-target: variables.$ripple-target, $query: $query);\n @include ripple-mixins.states(theme-variables.prop-value(on-surface), false, $ripple-target: variables.$ripple-target, $query: $query);\n @include ripple-mixins.states-activated(primary, false, $ripple-target: variables.$ripple-target, $query: $query);\n @include ripple-mixins.states-selected(primary, false, $ripple-target: variables.$ripple-target, $query: $query);\n\n #{variables.$ripple-target} {\n @include ripple-mixins.target-common($query: $query);\n }\n}\n","//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use \"sass:math\";\n@use \"@material/animation/functions\" as animation-functions;\n@use \"@material/button/variables\" as button-variables;\n@use \"@material/elevation/mixins\" as elevation-mixins;\n@use \"@material/feature-targeting/functions\" as feature-targeting-functions;\n@use \"@material/feature-targeting/mixins\" as feature-targeting-mixins;\n@use \"@material/rtl/mixins\" as rtl-mixins;\n@use \"@material/shape/mixins\" as shape-mixins;\n@use \"@material/theme/mixins\" as theme-mixins;\n@use \"@material/theme/variables\" as theme-variables; // for mdc-theme-prop-value\n@use \"@material/touch-target/variables\" as touch-target-variables;\n@use \"@material/typography/mixins\" as typography-mixins;\n@use \"./variables\";\n\n@mixin core-styles($query: feature-targeting-functions.all()) {\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include elevation-mixins.overlay-common($query); // COPYBARA_COMMENT_THIS_LINE\n\n // postcss-bem-linter: define dialog\n\n .mdc-dialog,\n .mdc-dialog__scrim {\n @include feature-targeting-mixins.targets($feat-structure) {\n position: fixed;\n top: 0;\n left: 0;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n }\n }\n\n .mdc-dialog {\n @include container-fill-color(surface, $query: $query);\n @include scrim-color(variables.$scrim-color, $query: $query);\n @include title-ink-color(variables.$title-ink-color, $query: $query);\n @include content-ink-color(variables.$content-ink-color, $query: $query);\n @include scroll-divider-color(\n variables.$scroll-divider-color,\n $query: $query\n );\n // Note: the top padding is only 20px for dialogs without titles; see below for override.\n @include content-padding(20px, 24px, 20px, 24px, $query: $query);\n @include min-width(variables.$min-width, $query: $query);\n @include max-width(variables.$max-width, variables.$margin, $query: $query);\n @include max-height(null, variables.$margin, $query: $query);\n @include shape-radius(variables.$shape-radius, $query: $query);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n // Use `display: none` instead of `visibility: hidden` to avoid recalculating layout when the dialog is closed.\n display: none;\n z-index: variables.$z-index;\n }\n }\n\n .mdc-dialog__scrim {\n @include feature-targeting-mixins.targets($feat-structure) {\n opacity: 0;\n z-index: -1;\n }\n }\n\n // This wrapper element is needed to make max-height work in IE 11.\n // See https://github.com/philipwalton/flexbugs/issues/216\n .mdc-dialog__container {\n @include feature-targeting-mixins.targets($feat-structure) {\n display: flex;\n flex-direction: row; // IE 11\n align-items: center;\n justify-content: space-around; // Ensure Safari centers the dialog (because it treats the container's width oddly)\n box-sizing: border-box;\n height: 100%;\n transform: scale(0.8);\n opacity: 0;\n // This element is necessary for IE 11 and needs to have `height: 100%`.\n // Let clicks on element fall through to scrim element underneath.\n pointer-events: none;\n }\n }\n\n .mdc-dialog__surface {\n @include elevation-mixins.overlay-surface-position($query: $query);\n @include elevation-mixins.overlay-dimensions(100%, $query: $query);\n @include elevation-mixins.elevation(24, $query: $query);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n display: flex;\n flex-direction: column;\n flex-grow: 0; // IE 11\n flex-shrink: 0; // IE 11\n box-sizing: border-box;\n max-width: 100%; // IE 11\n max-height: 100%; // IE 11\n pointer-events: auto; // Override from `.mdc-dialog__container`.\n // IE 11: Otherwise, scrolling content in `mdc-dialog__content` overflows.\n overflow-y: auto;\n\n @include rtl-mixins.rtl('.mdc-dialog') {\n /* @noflip */\n text-align: right;\n }\n }\n }\n\n .mdc-dialog__title {\n @include typography-mixins.text-baseline(\n $top: 40px,\n $display: block,\n $query: $query\n );\n @include typography-mixins.typography(headline6, $query: $query);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n position: relative;\n flex-shrink: 0;\n box-sizing: border-box;\n margin: 0;\n padding: 0 24px variables.$title-bottom-padding;\n border-bottom: 1px solid transparent;\n\n @include rtl-mixins.rtl('.mdc-dialog') {\n /* @noflip */\n text-align: right;\n }\n }\n }\n\n // stylelint-disable-next-line plugin/selector-bem-pattern\n .mdc-dialog--scrollable .mdc-dialog__title {\n @include feature-targeting-mixins.targets($feat-structure) {\n // Adjust bottom padding to make title height align to spec when divider is present.\n // (Titles for alert dialogs w/o dividers align based on text baseline. All spec values are divisible by 4.)\n padding-bottom: variables.$title-bottom-padding + 6px;\n }\n }\n\n .mdc-dialog__content {\n @include typography-mixins.typography(body1, $query: $query);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n flex-grow: 1;\n box-sizing: border-box;\n margin: 0;\n overflow: auto;\n -webkit-overflow-scrolling: touch;\n }\n\n // The content element already has top/bottom padding, so we need to suppress margins on its first/last children.\n > :first-child {\n @include feature-targeting-mixins.targets($feat-structure) {\n margin-top: 0;\n }\n }\n\n // The content element already has top/bottom padding, so we need to suppress margins on its first/last children.\n > :last-child {\n @include feature-targeting-mixins.targets($feat-structure) {\n margin-bottom: 0;\n }\n }\n }\n\n // stylelint-disable-next-line plugin/selector-bem-pattern\n .mdc-dialog__title + .mdc-dialog__content {\n @include feature-targeting-mixins.targets($feat-structure) {\n // Eliminate padding to bring as close to spec as possible, relying on title padding.\n // (Spec seems inconsistent RE title/body spacing on alert vs. simple variants.)\n padding-top: 0;\n }\n }\n\n // stylelint-disable-next-line plugin/selector-bem-pattern\n .mdc-dialog--scrollable .mdc-dialog__title + .mdc-dialog__content {\n @include feature-targeting-mixins.targets($feat-structure) {\n // Reduce and equalize vertical paddings when scrollable dividers are present\n // (Note: this is intentionally after title + content to take precedence)\n padding-top: 8px;\n padding-bottom: 8px;\n }\n }\n\n // stylelint-disable-next-line plugin/selector-bem-pattern\n .mdc-dialog__content .mdc-list:first-child:last-child {\n @include feature-targeting-mixins.targets($feat-structure) {\n // Override default .mdc-list padding for content consisting exclusively of a MDC List\n padding: 6px 0 0; // Top padding balances with title height\n }\n }\n\n // stylelint-disable-next-line plugin/selector-bem-pattern, selector-max-specificity\n .mdc-dialog--scrollable\n .mdc-dialog__content\n .mdc-list:first-child:last-child {\n @include feature-targeting-mixins.targets($feat-structure) {\n // Override default .mdc-list padding for content consisting exclusively of a MDC List\n padding: 0;\n }\n }\n\n .mdc-dialog__actions {\n @include feature-targeting-mixins.targets($feat-structure) {\n display: flex;\n position: relative;\n flex-shrink: 0;\n flex-wrap: wrap;\n align-items: center;\n justify-content: flex-end;\n box-sizing: border-box;\n min-height: 52px;\n margin: 0;\n padding: variables.$actions-padding;\n border-top: 1px solid transparent;\n }\n\n .mdc-dialog--stacked & {\n @include feature-targeting-mixins.targets($feat-structure) {\n flex-direction: column;\n align-items: flex-end;\n }\n }\n }\n\n .mdc-dialog__button {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include rtl-mixins.reflexive-box(margin, left, 8px);\n }\n\n &:first-child {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include rtl-mixins.reflexive-box(margin, left, 0);\n }\n }\n\n @include feature-targeting-mixins.targets($feat-structure) {\n max-width: 100%; // Prevent long text from overflowing parent element in IE 11\n /* @noflip */\n text-align: right;\n\n @include rtl-mixins.rtl('.mdc-dialog') {\n /* @noflip */\n text-align: left;\n }\n }\n\n .mdc-dialog--stacked &:not(:first-child) {\n @include feature-targeting-mixins.targets($feat-structure) {\n margin-top: 12px;\n }\n }\n }\n\n .mdc-dialog--open,\n .mdc-dialog--opening,\n .mdc-dialog--closing {\n @include feature-targeting-mixins.targets($feat-structure) {\n display: flex;\n }\n }\n\n .mdc-dialog--opening {\n .mdc-dialog__scrim {\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: opacity 150ms linear;\n }\n }\n\n .mdc-dialog__container {\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: opacity 75ms linear,\n animation-functions.enter(transform, 150ms);\n }\n }\n }\n\n .mdc-dialog--closing {\n .mdc-dialog__scrim,\n .mdc-dialog__container {\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: opacity 75ms linear;\n }\n }\n\n .mdc-dialog__container {\n @include feature-targeting-mixins.targets($feat-structure) {\n // Dialog container scales up while opening, but should remain scaled up while closing\n transform: none;\n }\n }\n }\n\n .mdc-dialog--open {\n .mdc-dialog__scrim {\n @include feature-targeting-mixins.targets($feat-structure) {\n opacity: 1;\n }\n }\n\n .mdc-dialog__container {\n @include feature-targeting-mixins.targets($feat-structure) {\n transform: none;\n opacity: 1;\n }\n }\n }\n\n // postcss-bem-linter: end\n\n // Class applied to body while dialog is open, to prevent scrolling behind the dialog\n .mdc-dialog-scroll-lock {\n @include feature-targeting-mixins.targets($feat-structure) {\n overflow: hidden;\n }\n }\n}\n\n@mixin container-fill-color($color, $query: feature-targeting-functions.all()) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n .mdc-dialog__surface {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(background-color, $color);\n }\n }\n}\n\n@mixin scrim-color(\n $color,\n $opacity: variables.$scrim-opacity,\n $query: feature-targeting-functions.all()\n) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n .mdc-dialog__scrim {\n @include feature-targeting-mixins.targets($feat-color) {\n background-color: rgba(theme-variables.prop-value($color), $opacity);\n }\n }\n}\n\n@mixin title-ink-color(\n $color,\n $opacity: variables.$title-ink-opacity,\n $query: feature-targeting-functions.all()\n) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n .mdc-dialog__title {\n @include feature-targeting-mixins.targets($feat-color) {\n color: rgba(theme-variables.prop-value($color), $opacity);\n }\n }\n}\n\n@mixin content-ink-color(\n $color,\n $opacity: variables.$content-ink-opacity,\n $query: feature-targeting-functions.all()\n) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n .mdc-dialog__content {\n @include feature-targeting-mixins.targets($feat-color) {\n color: rgba(theme-variables.prop-value($color), $opacity);\n }\n }\n}\n\n@mixin content-padding(\n $padding-top,\n $padding-right,\n $padding-bottom,\n $padding-left,\n $query: feature-targeting-functions.all()\n) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n .mdc-dialog__content {\n @include feature-targeting-mixins.targets($feat-structure) {\n padding: $padding-top $padding-right $padding-bottom $padding-left;\n }\n }\n}\n\n@mixin scroll-divider-color(\n $color,\n $opacity: variables.$scroll-divider-opacity,\n $query: feature-targeting-functions.all()\n) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n &.mdc-dialog--scrollable .mdc-dialog__title,\n &.mdc-dialog--scrollable .mdc-dialog__actions {\n @include feature-targeting-mixins.targets($feat-color) {\n border-color: rgba(theme-variables.prop-value($color), $opacity);\n }\n }\n}\n\n@mixin shape-radius(\n $radius,\n $rtl-reflexive: false,\n $query: feature-targeting-functions.all()\n) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n .mdc-dialog__surface {\n @include shape-mixins.radius($radius, $rtl-reflexive, $query: $query);\n }\n}\n\n@mixin min-width($min-width, $query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n .mdc-dialog__surface {\n @include feature-targeting-mixins.targets($feat-structure) {\n min-width: $min-width;\n }\n }\n}\n\n@mixin max-width(\n $max-width,\n $margin,\n $query: feature-targeting-functions.all()\n) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n $max-size-calc-expr: calc(100vw - #{$margin * 2});\n\n .mdc-dialog__surface {\n @include feature-targeting-mixins.targets($feat-structure) {\n @if $max-width {\n $max-width-breakpoint: $max-width + ($margin * 2);\n\n // Fit snugly within the viewport at smaller screen sizes.\n @media (max-width: $max-width-breakpoint) {\n max-width: $max-size-calc-expr;\n }\n\n // Once the screen gets big enough, apply a fixed maximum width.\n @media (min-width: $max-width-breakpoint) {\n max-width: $max-width;\n }\n } @else {\n max-width: $max-size-calc-expr;\n }\n }\n }\n}\n\n@mixin max-height(\n $max-height,\n $margin,\n $query: feature-targeting-functions.all()\n) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n $max-size-calc-expr: calc(100% - #{$margin * 2});\n\n .mdc-dialog__surface {\n @include feature-targeting-mixins.targets($feat-structure) {\n @if $max-height {\n $max-height-breakpoint: $max-height + ($margin * 2);\n\n // Fit snugly within the viewport at smaller screen sizes.\n @media (max-height: $max-height-breakpoint) {\n max-height: $max-size-calc-expr;\n }\n\n // Once the screen gets big enough, apply a fixed maximum height.\n @media (min-height: $max-height-breakpoint) {\n max-height: $max-height;\n }\n } @else {\n max-height: $max-size-calc-expr;\n }\n }\n }\n\n // Target IE 11.\n @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n // On IE 11, if surface height is fixed and container height is 100%,\n // scrolling content overflows. So, reset height if surface height\n // is fixed.\n .mdc-dialog__container {\n @include feature-targeting-mixins.targets($feat-structure) {\n /* stylelint-disable */\n // Disable stylelint here, as nesting depth > 3 is required to\n // work around IE 11.\n @if $max-height {\n $max-height-breakpoint: $max-height + ($margin * 2);\n\n @media (min-height: $max-height-breakpoint) {\n align-items: stretch;\n height: auto;\n }\n }\n /* stylelint-enable*/\n }\n }\n }\n}\n\n// Applied to dialogs that have buttons with an increased touch target.\n@mixin with-touch-target($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n $touch-target-margin: (\n touch-target-variables.$height - button-variables.$height\n ) / 2;\n $vertical-padding: math.max(\n 0,\n variables.$actions-padding - $touch-target-margin\n );\n\n // Buttons with an increased touch target have added vertical margin, so\n // decrease the actions element padding to compensate.\n .mdc-dialog__actions {\n @include feature-targeting-mixins.targets($feat-structure) {\n padding-top: $vertical-padding;\n padding-bottom: $vertical-padding;\n\n // The below styles override the default button touch target values,\n // which otherwise cause `mdc-dialog__surface` to scroll unnnecessarily\n // in IE 11.\n .mdc-button__touch {\n top: -$touch-target-margin; // IE 11\n transform: none; // IE 11\n }\n }\n }\n}\n","//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n$scrim-color: on-surface !default;\n$title-ink-color: on-surface !default;\n$content-ink-color: on-surface !default;\n$scroll-divider-color: on-surface !default;\n\n$scrim-opacity: 0.32 !default;\n$title-ink-opacity: 0.87 !default;\n$content-ink-opacity: 0.6 !default;\n$scroll-divider-opacity: 0.12 !default;\n\n$min-width: 280px !default;\n$max-width: 560px !default;\n$margin: 16px !default;\n$shape-radius: medium !default;\n$title-bottom-padding: 9px !default;\n$actions-padding: 8px !default;\n\n$z-index: 7 !default;\n","//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use \"sass:list\";\n@use \"sass:meta\";\n@use \"@material/feature-targeting/functions\";\n@use \"@material/feature-targeting/mixins\" as feature-targeting-mixins;\n@use \"@material/animation/functions\" as functions2;\n@use \"@material/animation/variables\" as animation-variables;\n@use \"@material/rtl/mixins\" as rtl-mixins;\n@use \"@material/typography/mixins\" as typography-mixins;\n@use \"@material/typography/variables\" as variables2;\n@use \"@material/theme/mixins\" as theme-mixins;\n@use \"@material/theme/variables\" as theme-variables;\n@use \"@material/list/mixins\" as list-mixins;\n@use \"@material/ripple/mixins\" as ripple-mixins;\n@use \"@material/shape/mixins\" as shape-mixins;\n@use \"@material/elevation/mixins\" as elevation-mixins;\n@use \"./variables\";\n\n//\n// Public\n//\n\n@mixin core-styles($query: functions.all()) {\n $feat-structure: functions.create-target($query, structure);\n $feat-animation: functions.create-target($query, animation);\n\n // postcss-bem-linter: define drawer\n .mdc-drawer {\n @include title-ink-color(variables.$title-ink-color, $query: $query);\n @include subtitle-ink-color(variables.$subtitle-ink-color, $query: $query);\n @include border-color(variables.$divider-color, $query: $query);\n @include surface-fill-color(variables.$surface-fill-color, $query: $query);\n @include item-icon-ink-color(\n variables.$item-inactive-ink-color,\n $query: $query\n );\n @include item-text-ink-color(\n variables.$item-inactive-ink-color,\n $query: $query\n );\n @include item-activated-icon-ink-color(\n variables.$item-activated-ink-color,\n $query: $query\n );\n @include item-activated-text-ink-color(\n variables.$item-activated-ink-color,\n $query: $query\n );\n @include shape-radius(variables.$shape-radius, $query: $query);\n @include item-shape-radius(variables.$item-shape-radius, $query: $query);\n @include z-index(variables.$z-index, $query: $query);\n @include width(variables.$width, $query: $query);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n display: flex;\n flex-direction: column;\n flex-shrink: 0;\n box-sizing: border-box;\n height: 100%;\n /* @noflip */\n border-right-width: 1px;\n /* @noflip */\n border-right-style: solid;\n overflow: hidden;\n\n @include rtl-mixins.rtl {\n /* @noflip */\n border-right-width: 0;\n /* @noflip */\n border-left-width: 1px;\n /* @noflip */\n border-right-style: none;\n /* @noflip */\n border-left-style: solid;\n }\n }\n\n @include feature-targeting-mixins.targets($feat-animation) {\n transition-property: transform;\n transition-timing-function: animation-variables.$standard-curve-timing-function;\n }\n\n @include list-item_($query);\n }\n\n .mdc-drawer--animate {\n @include feature-targeting-mixins.targets($feat-structure) {\n transform: translateX(-100%);\n\n @include rtl-mixins.rtl {\n transform: translateX(100%);\n }\n }\n }\n\n .mdc-drawer--opening {\n @include feature-targeting-mixins.targets($feat-structure) {\n transform: translateX(0);\n\n // Required to level the specificity with animate class.\n @include rtl-mixins.rtl {\n transform: translateX(0);\n }\n }\n\n @include feature-targeting-mixins.targets($feat-animation) {\n transition-duration: variables.$animation-enter;\n }\n }\n\n .mdc-drawer--closing {\n @include feature-targeting-mixins.targets($feat-structure) {\n transform: translateX(-100%);\n\n @include rtl-mixins.rtl {\n transform: translateX(100%);\n }\n }\n\n @include feature-targeting-mixins.targets($feat-animation) {\n transition-duration: variables.$animation-exit;\n }\n }\n\n .mdc-drawer__header {\n @include feature-targeting-mixins.targets($feat-structure) {\n flex-shrink: 0;\n box-sizing: border-box;\n min-height: 64px; // same as $mdc-top-app-bar-row-height\n padding: 0 variables.$surface-padding 4px;\n }\n }\n\n .mdc-drawer__title {\n @include typography-mixins.typography(headline6, $query: $query);\n @include typography-mixins.text-baseline(\n $top: 36px,\n $bottom: 20px,\n $query: $query\n );\n }\n\n .mdc-drawer__subtitle {\n @include typography-mixins.typography(body2, $query: $query);\n @include typography-mixins.text-baseline($top: 20px, $query: $query);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n margin-bottom: 0;\n }\n }\n\n .mdc-drawer__content {\n @include feature-targeting-mixins.targets($feat-structure) {\n height: 100%;\n overflow-y: auto;\n -webkit-overflow-scrolling: touch;\n }\n }\n\n // postcss-bem-linter: end\n}\n\n@mixin dismissible-core-styles($query: functions.all()) {\n $feat-structure: functions.create-target($query, structure);\n\n .mdc-drawer--dismissible {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include rtl-mixins.reflexive-position(left, 0);\n\n display: none;\n position: absolute;\n\n &.mdc-drawer--open {\n display: flex;\n }\n }\n }\n\n .mdc-drawer-app-content {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include rtl-mixins.reflexive-box(margin, left, 0);\n\n position: relative;\n }\n }\n}\n\n@mixin modal-core-styles($query: functions.all()) {\n $feat-structure: functions.create-target($query, structure);\n $feat-animation: functions.create-target($query, animation);\n\n .mdc-drawer--modal {\n @include scrim-fill-color(variables.$modal-scrim-color, $query: $query);\n @include elevation-mixins.elevation(\n variables.$modal-elevation,\n $query: $query\n );\n\n @include feature-targeting-mixins.targets($feat-structure) {\n @include rtl-mixins.reflexive-position(left, 0);\n\n display: none;\n position: fixed;\n }\n\n &.mdc-drawer--open {\n @include feature-targeting-mixins.targets($feat-structure) {\n display: flex;\n }\n }\n }\n\n .mdc-drawer-scrim {\n @include feature-targeting-mixins.targets($feat-structure) {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: variables.$z-index - 1;\n }\n\n @include feature-targeting-mixins.targets($feat-animation) {\n transition-property: opacity;\n transition-timing-function: animation-variables.$standard-curve-timing-function;\n }\n\n .mdc-drawer--open + & {\n @include feature-targeting-mixins.targets($feat-structure) {\n display: block;\n }\n }\n\n .mdc-drawer--animate + & {\n @include feature-targeting-mixins.targets($feat-structure) {\n opacity: 0;\n }\n }\n\n .mdc-drawer--opening + & {\n @include feature-targeting-mixins.targets($feat-animation) {\n transition-duration: variables.$animation-enter;\n }\n\n @include feature-targeting-mixins.targets($feat-structure) {\n opacity: 1;\n }\n }\n\n .mdc-drawer--closing + & {\n @include feature-targeting-mixins.targets($feat-animation) {\n transition-duration: variables.$animation-exit;\n }\n\n @include feature-targeting-mixins.targets($feat-structure) {\n opacity: 0;\n }\n }\n }\n}\n\n@mixin activated-overlay-color($color, $query: functions.all()) {\n :not(.mdc-list--non-interactive) > .mdc-list-item {\n @include ripple-mixins.states-activated($color, $query: $query);\n }\n}\n\n@mixin border-color($color, $query: functions.all()) {\n $feat-color: functions.create-target($query, color);\n $value: rgba(theme-variables.prop-value($color), variables.$divider-opacity);\n\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(border-color, $value);\n }\n}\n\n@mixin item-shape-radius(\n $radius,\n $rtl-reflexive: true,\n $query: functions.all()\n) {\n @include list-mixins.single-line-shape-radius(\n $radius,\n $rtl-reflexive,\n $query: $query\n );\n}\n\n@mixin shape-radius($radius, $query: functions.all()) {\n // Check type since $radius may be a custom property Map\n $is-list: meta.type-of($radius) == 'list';\n @if $is-list and list.length($radius) > 2 {\n @error \"Invalid radius: '#{$radius}' component doesn't allow customizing all corners\";\n } @else if $is-list and list.length($radius) == 2 {\n $radius: 0 list.nth($radius, 1) list.nth($radius, 2) 0;\n } @else {\n $radius: 0 $radius $radius 0;\n }\n\n @include shape-mixins.radius($radius, $rtl-reflexive: true, $query: $query);\n}\n\n@mixin divider-color($color, $query: functions.all()) {\n $value: rgba(theme-variables.prop-value($color), variables.$divider-opacity);\n\n @include list-mixins.divider-color($value, $query: $query);\n}\n\n@mixin title-ink-color($color, $query: functions.all()) {\n $feat-color: functions.create-target($query, color);\n $value: rgba(\n theme-variables.prop-value($color),\n variables.$title-ink-opacity\n );\n\n .mdc-drawer__title {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(color, $value);\n }\n }\n}\n\n@mixin subtitle-ink-color($color, $query: functions.all()) {\n $feat-color: functions.create-target($query, color);\n $value: rgba(\n theme-variables.prop-value($color),\n variables.$subtitle-ink-opacity\n );\n\n @include list-mixins.group-subheader-ink-color($value, $query: $query);\n\n .mdc-drawer__subtitle {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(color, $value);\n }\n }\n}\n\n@mixin fill-color-accessible($color, $query: functions.all()) {\n $accessibleColor: theme-variables.accessible-ink-color($color);\n\n @include title-ink-color($accessibleColor, $query: $query);\n @include subtitle-ink-color($accessibleColor, $query: $query);\n @include item-text-ink-color($accessibleColor, $query: $query);\n @include item-icon-ink-color($accessibleColor, $query: $query);\n @include surface-fill-color($color, $query: $query);\n}\n\n@mixin item-icon-ink-color($color, $query: functions.all()) {\n $value: rgba(\n theme-variables.prop-value($color),\n variables.$item-inactive-icon-ink-opacity\n );\n\n @include list-mixins.item-graphic-ink-color($value, $query: $query);\n}\n\n@mixin item-activated-icon-ink-color($color, $query: functions.all()) {\n $value: rgba(\n theme-variables.prop-value($color),\n variables.$item-active-icon-ink-opacity\n );\n\n .mdc-list-item--activated {\n @include list-mixins.item-graphic-ink-color($value, $query: $query);\n }\n}\n\n@mixin item-activated-text-ink-color($color, $query: functions.all()) {\n $value: rgba(\n theme-variables.prop-value($color),\n variables.$item-active-text-ink-opacity\n );\n\n .mdc-list-item--activated {\n @include list-mixins.item-primary-text-ink-color($value, $query: $query);\n }\n}\n\n@mixin item-text-ink-color($color, $query: functions.all()) {\n $value: rgba(\n theme-variables.prop-value($color),\n variables.$item-inactive-text-ink-opacity\n );\n\n .mdc-list-item {\n @include list-mixins.item-primary-text-ink-color($value, $query: $query);\n }\n}\n\n@mixin surface-fill-color($color, $query: functions.all()) {\n $feat-color: functions.create-target($query, color);\n $value: theme-variables.prop-value($color);\n\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(background-color, $value);\n }\n}\n\n@mixin scrim-fill-color($color, $query: functions.all()) {\n $feat-color: functions.create-target($query, color);\n $value: rgba(\n theme-variables.prop-value($color),\n variables.$modal-scrim-opacity\n );\n\n + .mdc-drawer-scrim {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(background-color, $value);\n }\n }\n}\n\n@mixin z-index($value, $query: functions.all()) {\n $feat-structure: functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n z-index: $value;\n }\n}\n\n@mixin width($width, $query: functions.all()) {\n $feat-structure: functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n @include theme-mixins.property(width, $width);\n }\n\n &.mdc-drawer--open:not(.mdc-drawer--closing) + .mdc-drawer-app-content {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include rtl-mixins.reflexive-box(margin, left, $width);\n }\n }\n}\n\n//\n// Private\n//\n@mixin list-item_($query: functions.all()) {\n $feat-structure: functions.create-target($query, structure);\n\n // postcss-bem-linter: ignore\n .mdc-list-item {\n @include typography-mixins.typography(subtitle2, $query: $query);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n height: calc(48px - 2 * #{variables.$list-item-spacing});\n // To accomodate margin conflict.\n margin: (variables.$list-item-spacing * 2) 8px;\n padding: 0 variables.$surface-padding / 2;\n }\n }\n\n // postcss-bem-linter: ignore\n .mdc-list-item:nth-child(1) {\n @include feature-targeting-mixins.targets($feat-structure) {\n margin-top: 2px;\n }\n }\n\n // postcss-bem-linter: ignore\n .mdc-list-item:nth-last-child(1) {\n @include feature-targeting-mixins.targets($feat-structure) {\n margin-bottom: 0;\n }\n }\n\n // postcss-bem-linter: ignore\n .mdc-list-group__subheader {\n @include typography-mixins.typography(body2, $query: $query);\n @include typography-mixins.text-baseline($top: 24px, $query: $query);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n margin: 0;\n padding: 0 variables.$surface-padding;\n }\n }\n\n // postcss-bem-linter: ignore\n .mdc-list-divider {\n @include feature-targeting-mixins.targets($feat-structure) {\n margin: 3px 0 4px;\n }\n }\n\n // Prevents list item children from being included in the click target.\n // postcss-bem-linter: ignore\n .mdc-list-item__text,\n .mdc-list-item__graphic {\n @include feature-targeting-mixins.targets($feat-structure) {\n pointer-events: none;\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@use \"@material/theme/variables\";\n\n// Colors\n$title-ink-color: variables.prop-value(on-surface) !default;\n$subtitle-ink-color: variables.prop-value(on-surface) !default;\n$item-inactive-ink-color: variables.prop-value(on-surface) !default;\n$item-activated-ink-color: variables.prop-value(primary) !default;\n$divider-color: variables.prop-value(on-surface) !default;\n$surface-fill-color: variables.prop-value(surface) !default;\n\n// Opacity\n$title-ink-opacity: variables.text-emphasis(high) !default;\n$subtitle-ink-opacity: variables.text-emphasis(medium) !default;\n$item-inactive-icon-ink-opacity: variables.text-emphasis(medium) !default;\n$item-inactive-text-ink-opacity: variables.text-emphasis(high) !default;\n$item-active-icon-ink-opacity: 1 !default;\n$item-active-text-ink-opacity: variables.text-emphasis(high) !default;\n$divider-opacity: 0.12 !default;\n\n// Widths\n$width: 256px !default;\n$list-item-spacing: 4px !default;\n$surface-padding: 16px !default;\n$shape-radius: large !default;\n$item-shape-radius: small !default;\n\n// Animations\n$animation-enter: 250ms !default;\n$animation-exit: 200ms !default;\n\n// Scrim\n$modal-scrim-color: variables.prop-value(on-surface) !default;\n$modal-scrim-opacity: 0.32 !default;\n\n$z-index: 6 !default;\n$modal-elevation: 16 !default;\n","//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use \"@material/animation/variables\";\n\n$baseline-color: black !default;\n$umbra-opacity: 0.2 !default;\n$penumbra-opacity: 0.14 !default;\n$ambient-opacity: 0.12 !default;\n\n$umbra-map: (\n 0: '0px 0px 0px 0px',\n 1: '0px 2px 1px -1px',\n 2: '0px 3px 1px -2px',\n 3: '0px 3px 3px -2px',\n 4: '0px 2px 4px -1px',\n 5: '0px 3px 5px -1px',\n 6: '0px 3px 5px -1px',\n 7: '0px 4px 5px -2px',\n 8: '0px 5px 5px -3px',\n 9: '0px 5px 6px -3px',\n 10: '0px 6px 6px -3px',\n 11: '0px 6px 7px -4px',\n 12: '0px 7px 8px -4px',\n 13: '0px 7px 8px -4px',\n 14: '0px 7px 9px -4px',\n 15: '0px 8px 9px -5px',\n 16: '0px 8px 10px -5px',\n 17: '0px 8px 11px -5px',\n 18: '0px 9px 11px -5px',\n 19: '0px 9px 12px -6px',\n 20: '0px 10px 13px -6px',\n 21: '0px 10px 13px -6px',\n 22: '0px 10px 14px -6px',\n 23: '0px 11px 14px -7px',\n 24: '0px 11px 15px -7px',\n) !default;\n\n$penumbra-map: (\n 0: '0px 0px 0px 0px',\n 1: '0px 1px 1px 0px',\n 2: '0px 2px 2px 0px',\n 3: '0px 3px 4px 0px',\n 4: '0px 4px 5px 0px',\n 5: '0px 5px 8px 0px',\n 6: '0px 6px 10px 0px',\n 7: '0px 7px 10px 1px',\n 8: '0px 8px 10px 1px',\n 9: '0px 9px 12px 1px',\n 10: '0px 10px 14px 1px',\n 11: '0px 11px 15px 1px',\n 12: '0px 12px 17px 2px',\n 13: '0px 13px 19px 2px',\n 14: '0px 14px 21px 2px',\n 15: '0px 15px 22px 2px',\n 16: '0px 16px 24px 2px',\n 17: '0px 17px 26px 2px',\n 18: '0px 18px 28px 2px',\n 19: '0px 19px 29px 2px',\n 20: '0px 20px 31px 3px',\n 21: '0px 21px 33px 3px',\n 22: '0px 22px 35px 3px',\n 23: '0px 23px 36px 3px',\n 24: '0px 24px 38px 3px',\n) !default;\n\n$ambient-map: (\n 0: '0px 0px 0px 0px',\n 1: '0px 1px 3px 0px',\n 2: '0px 1px 5px 0px',\n 3: '0px 1px 8px 0px',\n 4: '0px 1px 10px 0px',\n 5: '0px 1px 14px 0px',\n 6: '0px 1px 18px 0px',\n 7: '0px 2px 16px 1px',\n 8: '0px 3px 14px 2px',\n 9: '0px 3px 16px 2px',\n 10: '0px 4px 18px 3px',\n 11: '0px 4px 20px 3px',\n 12: '0px 5px 22px 4px',\n 13: '0px 5px 24px 4px',\n 14: '0px 5px 26px 4px',\n 15: '0px 6px 28px 5px',\n 16: '0px 6px 30px 5px',\n 17: '0px 6px 32px 5px',\n 18: '0px 7px 34px 6px',\n 19: '0px 7px 36px 6px',\n 20: '0px 8px 38px 7px',\n 21: '0px 8px 40px 7px',\n 22: '0px 8px 42px 7px',\n 23: '0px 9px 44px 8px',\n 24: '0px 9px 46px 8px',\n) !default;\n\n// The css property used for elevation. In most cases this should not be changed. It is exposed\n// as a variable for abstraction / easy use when needing to reference the property directly, for\n// example in a `will-change` rule.\n$property: box-shadow !default;\n\n// The default color for the elevation overlay.\n$overlay-color: #fff;\n\n// The css property used for elevation overlay transitions. In most cases this should not be changed. It is exposed\n// as a variable for abstraction / easy use when needing to reference the property directly, for\n// example in a `will-change` rule.\n$overlay-property: opacity !default;\n\n// The default duration value for elevation transitions.\n$transition-duration: 280ms !default;\n\n// The default easing value for elevation transitions.\n$transition-timing-function: variables.$standard-curve-timing-function !default;\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@use \"@material/animation/functions\" as animation-functions;\n@use \"@material/elevation/mixins\" as elevation-mixins;\n@use \"@material/elevation/variables\" as elevation-variables;\n@use \"@material/feature-targeting/functions\" as feature-targeting-functions;\n@use \"@material/feature-targeting/mixins\" as feature-targeting-mixins;\n@use \"@material/dom/mixins\" as dom-mixins;\n@use \"@material/ripple/mixins\" as ripple-mixins;\n@use \"@material/ripple/variables\" as variables2;\n@use \"@material/rtl/mixins\" as rtl-mixins;\n@use \"@material/shape/mixins\" as shape-mixins;\n@use \"@material/shape/functions\" as shape-functions;\n@use \"@material/theme/functions\" as theme-functions;\n@use \"@material/theme/mixins\" as theme-mixins;\n@use \"@material/touch-target/mixins\" as touch-target-mixins;\n@use \"@material/typography/mixins\" as typography-mixins;\n@use \"./variables\";\n\n$ripple-target: '.mdc-fab__ripple';\n\n@mixin core-styles($query: feature-targeting-functions.all()) {\n @include without-ripple($query);\n @include ripple($query);\n}\n\n@mixin without-ripple($query: feature-targeting-functions.all()) {\n // postcss-bem-linter: define fab\n\n @include touch-target-mixins.wrapper($query); // COPYBARA_COMMENT_THIS_LINE\n @include elevation-mixins.overlay-common($query); // COPYBARA_COMMENT_THIS_LINE\n\n .mdc-fab {\n @include base_($query: $query);\n @include container-color(secondary, $query: $query);\n @include icon-size(24px, $query: $query);\n @include ink-color(on-secondary, $query: $query);\n }\n\n .mdc-fab--mini {\n @include mini_($query: $query);\n }\n\n .mdc-fab--extended {\n @include extended_($query: $query);\n }\n\n .mdc-fab--touch {\n @include touch-target-mixins.margin(\n $component-height: variables.$mini-height,\n $component-width: variables.$mini-height,\n $query: $query\n );\n\n .mdc-fab__touch {\n @include touch-target-mixins.touch-target(\n $set-width: true,\n $query: $query\n );\n }\n }\n\n .mdc-fab::before {\n @include dom-mixins.transparent-border($query: $query);\n }\n\n .mdc-fab__label {\n @include label_($query: $query);\n }\n\n .mdc-fab__icon {\n @include icon_($query: $query);\n }\n\n // Increase specificity for FAB icon styles that need to override styles defined for .material-icons\n // (which is loaded separately so the order of CSS definitions is not guaranteed)\n .mdc-fab .mdc-fab__icon {\n @include icon-overrides_($query: $query);\n }\n\n .mdc-fab--exited {\n @include exited_($query: $query);\n }\n\n // postcss-bem-linter: end\n}\n\n@mixin ripple($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include ripple-mixins.common($query); // COPYBARA_COMMENT_THIS_LINE\n\n // postcss-bem-linter: define fab\n\n .mdc-fab {\n @include ripple-mixins.surface(\n $query: $query,\n $ripple-target: $ripple-target\n );\n @include ripple-mixins.radius-bounded(\n $query: $query,\n $ripple-target: $ripple-target\n );\n @include ripple-mixins.states(\n on-secondary,\n $query: $query,\n $ripple-target: $ripple-target\n );\n\n // stylelint-disable-next-line plugin/selector-bem-pattern\n #{$ripple-target} {\n @include ripple-mixins.target-common($query: $query);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n overflow: hidden;\n }\n }\n }\n\n // postcss-bem-linter: end\n}\n\n@mixin accessible($container-color, $query: feature-targeting-functions.all()) {\n @include container-color($container-color, $query: $query);\n\n $fill-tone: theme-functions.tone($container-color);\n\n @if ($fill-tone == 'dark') {\n @include ink-color(text-primary-on-dark, $query: $query);\n @include ripple-mixins.states(\n text-primary-on-dark,\n $query: $query,\n $ripple-target: $ripple-target\n );\n } @else {\n @include ink-color(text-primary-on-light, $query: $query);\n @include ripple-mixins.states(\n text-primary-on-light,\n $query: $query,\n $ripple-target: $ripple-target\n );\n }\n}\n\n@mixin container-color($color, $query: feature-targeting-functions.all()) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(background-color, $color);\n }\n}\n\n@mixin icon-size(\n $width,\n $height: $width,\n $query: feature-targeting-functions.all()\n) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n .mdc-fab__icon {\n @include feature-targeting-mixins.targets($feat-structure) {\n width: $width;\n height: $height;\n font-size: $height;\n }\n }\n}\n\n@mixin ink-color($color, $query: feature-targeting-functions.all()) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(color, $color);\n }\n}\n\n@mixin extended-fluid($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n width: 100%;\n }\n}\n\n@mixin extended-padding(\n $icon-padding,\n $label-padding,\n $query: feature-targeting-functions.all()\n) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include extended-label-padding($label-padding, $query: $query);\n\n // Offsets the outer label padding by deducting it from icon padding.\n .mdc-fab__icon {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include rtl-mixins.reflexive-property(\n margin,\n $icon-padding - $label-padding,\n $icon-padding\n );\n }\n }\n\n // For Extended FAB with text label followed by icon.\n .mdc-fab__label + .mdc-fab__icon {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include rtl-mixins.reflexive-property(\n margin,\n $icon-padding,\n $icon-padding - $label-padding\n );\n }\n }\n}\n\n@mixin extended-label-padding(\n $label-padding,\n $query: feature-targeting-functions.all()\n) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n padding: 0 $label-padding;\n }\n}\n\n@mixin shape-radius(\n $radius,\n $rtl-reflexive: false,\n $query: feature-targeting-functions.all()\n) {\n &:not(.mdc-fab--extended) {\n // Do not specify $component-height for shape radius. FABs are circular,\n // which means they can use percentage border radius without resolving to\n // a component height.\n @include shape-mixins.radius($radius, $rtl-reflexive, $query: $query);\n\n #{$ripple-target} {\n @include shape-mixins.radius($radius, $rtl-reflexive, $query: $query);\n }\n }\n}\n\n@mixin extended-shape-radius(\n $radius,\n $rtl-reflexive: false,\n $query: feature-targeting-functions.all()\n) {\n // Extended FABs _do_ need a $component-height since they are not circular.\n // Percentage radii must be resolved.\n @include shape-mixins.radius(\n $radius,\n $rtl-reflexive,\n $component-height: variables.$extended-height,\n $query: $query\n );\n\n #{$ripple-target} {\n @include shape-mixins.radius(\n $radius,\n $rtl-reflexive,\n $component-height: variables.$extended-height,\n $query: $query\n );\n }\n}\n\n$icon-enter-delay_: 90ms;\n$icon-enter-duration_: 180ms;\n\n@mixin base_($query: feature-targeting-functions.all()) {\n @include elevation-mixins.overlay-surface-position($query: $query);\n @include elevation-mixins.overlay-dimensions(100%, $query: $query);\n @include elevation-mixins.elevation(6, $query: $query);\n @include shape-radius(variables.$shape-radius, $query: $query);\n\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n display: inline-flex;\n position: relative;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: variables.$height;\n height: variables.$height;\n padding: 0;\n border: none;\n fill: currentColor;\n text-decoration: none;\n cursor: pointer;\n user-select: none;\n -moz-appearance: none;\n -webkit-appearance: none;\n // Even though `visible` is the default, IE 11 computes the property as\n // `hidden` in some cases, unless it's explicitly defined here.\n overflow: visible;\n }\n\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: box-shadow elevation-variables.$transition-duration\n elevation-variables.$transition-timing-function,\n opacity 15ms linear 30ms,\n animation-functions.enter(\n transform,\n $icon-enter-duration_ + $icon-enter-delay_\n );\n }\n\n &::-moz-focus-inner {\n @include feature-targeting-mixins.targets($feat-structure) {\n padding: 0;\n border: 0;\n }\n }\n\n &:hover,\n &:focus {\n @include elevation-mixins.elevation(8, $query: $query);\n }\n\n &:active {\n @include elevation-mixins.elevation(12, $query: $query);\n }\n\n &:active,\n &:focus {\n // TODO(acdvorak): Should this be paired with states and/or ripple? We don't want to disable outline\n // (an accessibility/usability feature) unless we're confident that there is also a visual indication that the\n // element has focus. If the client has customized the DOM in some unexpected way, and is certain that another\n // element will receive focus instead, they can always override this property manually in their CSS.\n @include feature-targeting-mixins.targets($feat-structure) {\n outline: none;\n }\n }\n\n &:hover {\n @include feature-targeting-mixins.targets($feat-structure) {\n cursor: pointer;\n }\n }\n\n // This allows for using SVGs within them to align properly in all browsers.\n // Can remove once: https://bugzilla.mozilla.org/show_bug.cgi?id=1294515 is resolved.\n\n // stylelint-disable selector-max-type\n // postcss-bem-linter: ignore\n > svg {\n @include feature-targeting-mixins.targets($feat-structure) {\n width: 100%;\n }\n }\n // stylelint-enable selector-max-type\n}\n\n@mixin mini_($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n width: variables.$mini-height;\n height: variables.$mini-height;\n }\n}\n\n@mixin extended_($query: feature-targeting-functions.all()) {\n @include typography-mixins.typography(button, $query: $query);\n @include extended-shape-radius(variables.$shape-radius, $query: $query);\n @include extended-padding(\n variables.$extended-icon-padding,\n variables.$extended-label-padding,\n $query: $query\n );\n\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n width: auto;\n max-width: 100%;\n height: variables.$extended-height;\n // This allows the text within the extended fab to be centered for varying font sizes.\n /* @alternate */\n line-height: normal;\n }\n}\n\n@mixin icon_($query: feature-targeting-functions.all()) {\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: animation-functions.enter(\n transform,\n $icon-enter-duration_,\n $icon-enter-delay_\n );\n }\n\n @include feature-targeting-mixins.targets($feat-structure) {\n fill: currentColor;\n will-change: transform;\n }\n}\n\n@mixin label_($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n justify-content: flex-start;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow-x: hidden;\n overflow-y: visible;\n }\n}\n\n@mixin icon-overrides_($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n}\n\n@mixin exited_($query: feature-targeting-functions.all()) {\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n transform: scale(0);\n opacity: 0;\n }\n\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: opacity 15ms linear 150ms,\n animation-functions.exit-permanent(transform, 180ms);\n }\n\n .mdc-fab__icon {\n @include feature-targeting-mixins.targets($feat-structure) {\n transform: scale(0);\n }\n\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: animation-functions.exit-permanent(transform, 135ms);\n }\n }\n}\n","//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n$extended-icon-padding: 12px !default;\n$extended-label-padding: 20px !default;\n$height: 56px !default;\n$mini-height: 40px !default;\n$extended-height: 48px !default;\n$shape-radius: 50% !default;\n","//\n// Copyright 2019 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 \"@material/feature-targeting/functions\";\n@use \"@material/feature-targeting/mixins\" as feature-targeting-mixins;\n@use \"@material/rtl/mixins\" as rtl-mixins;\n@use \"@material/theme/mixins\" as theme-mixins;\n@use \"@material/typography/mixins\" as typography-mixins;\n@use \"./variables\";\n\n@mixin core-styles($query: functions.all()) {\n $feat-color: functions.create-target($query, color);\n $feat-structure: functions.create-target($query, structure);\n\n .mdc-form-field {\n @include typography-mixins.typography(body2, $query);\n\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(color, text-primary-on-background);\n }\n\n @include feature-targeting-mixins.targets($feat-structure) {\n display: inline-flex;\n align-items: center;\n vertical-align: middle;\n }\n\n // stylelint-disable-next-line selector-max-type\n > label {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include rtl-mixins.reflexive-property(margin, 0, auto);\n @include rtl-mixins.reflexive-property(\n padding,\n variables.$item-spacing,\n 0\n );\n\n order: 0;\n }\n }\n }\n\n .mdc-form-field--nowrap {\n > label {\n @include feature-targeting-mixins.targets($feat-structure) {\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n }\n }\n }\n\n .mdc-form-field--align-end {\n // stylelint-disable-next-line selector-max-type\n > label {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include rtl-mixins.reflexive-property(margin, auto, 0);\n @include rtl-mixins.reflexive-property(\n padding,\n 0,\n variables.$item-spacing\n );\n\n order: -1;\n }\n }\n }\n\n .mdc-form-field--space-between {\n @include feature-targeting-mixins.targets($feat-structure) {\n justify-content: space-between;\n }\n\n // stylelint-disable-next-line selector-max-type\n > label {\n @include feature-targeting-mixins.targets($feat-structure) {\n margin: 0;\n\n @include rtl-mixins.rtl {\n // RTL needed for specificity\n margin: 0;\n }\n }\n }\n }\n}\n","//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use \"@material/density/variables\";\n\n$icon-size: 24px !default;\n\n$size: 48px !default;\n$minimum-height: 28px !default;\n$maximum-height: $size !default;\n$density-scale: variables.$default-scale !default;\n$density-config: (\n size: (\n default: $size,\n maximum: $maximum-height,\n minimum: $minimum-height,\n ),\n) !default;\n","// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\n@use \"@material/feature-targeting/functions\" as feature-targeting-functions;\n@use \"@material/feature-targeting/mixins\" as feature-targeting-mixins;\n@use \"@material/shape/mixins\" as shape-mixins;\n@use \"@material/shape/functions\" as shape-functions;\n@use \"@material/theme/mixins\" as theme-mixins;\n@use \"@material/typography/mixins\" as typography-mixins;\n@use \"./variables\";\n\n@mixin core-styles($query: feature-targeting-functions.all()) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n // postcss-bem-linter: define image-list\n .mdc-image-list {\n @include feature-targeting-mixins.targets($feat-structure) {\n display: flex;\n flex-wrap: wrap;\n // Margin and padding are set to override default user agent styles for lists, and also to center the Image List\n margin: 0 auto;\n padding: 0;\n }\n }\n\n .mdc-image-list__item,\n .mdc-image-list__image-aspect-container {\n @include feature-targeting-mixins.targets($feat-structure) {\n // Supports absolute positioning of protected supporting content for item, and image for image-aspect-container\n position: relative;\n box-sizing: border-box;\n }\n }\n\n .mdc-image-list__item {\n @include feature-targeting-mixins.targets($feat-structure) {\n list-style-type: none;\n }\n }\n\n .mdc-image-list__image {\n @include feature-targeting-mixins.targets($feat-structure) {\n width: 100%;\n }\n }\n\n // Descendant selector allows image-aspect-container to be optional in DOM structure\n .mdc-image-list__image-aspect-container .mdc-image-list__image {\n @include feature-targeting-mixins.targets($feat-structure) {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n height: 100%;\n // Background styles to support div instead of img\n background-repeat: no-repeat;\n background-position: center;\n background-size: cover;\n }\n }\n\n @include aspect(1, $query: $query);\n @include shape-radius(variables.$shape-radius, $query: $query);\n\n .mdc-image-list__supporting {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(color, text-primary-on-background);\n }\n\n @include feature-targeting-mixins.targets($feat-structure) {\n display: flex;\n align-items: center;\n justify-content: space-between;\n box-sizing: border-box;\n padding: 8px 0;\n line-height: variables.$icon-size;\n }\n }\n\n .mdc-image-list__label {\n @include typography-mixins.typography(subtitle1, $query: $query);\n @include typography-mixins.overflow-ellipsis($query: $query);\n }\n\n // Modifier for labels/icons with text protection, overlaying images.\n\n .mdc-image-list--with-text-protection .mdc-image-list__supporting {\n @include feature-targeting-mixins.targets($feat-structure) {\n position: absolute;\n bottom: 0;\n width: 100%;\n height: variables.$text-protection-height;\n padding: 0 variables.$text-protection-horizontal-padding;\n }\n\n @include feature-targeting-mixins.targets($feat-color) {\n background: variables.$text-protection-background-color;\n color: #fff;\n }\n }\n\n // Masonry Image List, using CSS columns (i.e. renders down then across)\n\n .mdc-image-list--masonry {\n @include feature-targeting-mixins.targets($feat-structure) {\n display: block; // Override flex\n }\n\n .mdc-image-list__item {\n @include feature-targeting-mixins.targets($feat-structure) {\n break-inside: avoid-column;\n }\n }\n\n .mdc-image-list__image {\n @include feature-targeting-mixins.targets($feat-structure) {\n display: block;\n height: auto;\n }\n }\n }\n // postcss-bem-linter: end\n}\n\n@mixin aspect($width-height-ratio, $query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n .mdc-image-list__image-aspect-container {\n @include feature-targeting-mixins.targets($feat-structure) {\n padding-bottom: calc(100% / #{$width-height-ratio});\n }\n }\n}\n\n@mixin shape-radius(\n $radius,\n $rtl-reflexive: false,\n $query: feature-targeting-functions.all()\n) {\n .mdc-image-list__image {\n @include shape-mixins.radius($radius, $rtl-reflexive, $query: $query);\n }\n\n $selector: if(\n &,\n '&.mdc-image-list--with-text-protection',\n '.mdc-image-list--with-text-protection'\n );\n\n #{$selector} .mdc-image-list__supporting {\n $masked-radius: shape-functions.mask-radius($radius, 0 0 1 1);\n\n @include shape-mixins.radius(\n $masked-radius,\n $rtl-reflexive,\n $query: $query\n );\n }\n}\n\n// Standard Image List\n\n@mixin standard-columns(\n $column-count,\n $gutter-size: variables.$standard-gutter-size,\n $query: feature-targeting-functions.all()\n) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n // This uses margin rather than padding to facilitate properly positioning the supporting content element when\n // --with-text-protection is used.\n .mdc-image-list__item {\n @include feature-targeting-mixins.targets($feat-structure) {\n // Subtract extra fraction from each item's width to ensure correct wrapping in IE/Edge which round differently\n width: calc(\n 100% / #{$column-count} - #{$gutter-size + 1 / $column-count}\n );\n margin: $gutter-size / 2;\n }\n }\n}\n\n// Masonry Image List\n\n@mixin masonry-columns(\n $column-count,\n $gutter-size: variables.$masonry-gutter-size,\n $query: feature-targeting-functions.all()\n) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n column-count: $column-count;\n column-gap: $gutter-size;\n }\n\n .mdc-image-list__item {\n @include feature-targeting-mixins.targets($feat-structure) {\n margin-bottom: $gutter-size;\n }\n }\n}\n","// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\n$standard-gutter-size: 4px !default;\n$masonry-gutter-size: 16px !default;\n$icon-size: 24px !default;\n$text-protection-background-color: rgba(0, 0, 0, 0.6) !default;\n$text-protection-height: 48px !default;\n$text-protection-horizontal-padding: 16px !default;\n$shape-radius: 0 !default;\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@use \"sass:list\";\n@use \"sass:map\";\n@use \"./variables\";\n@use \"./mixins\";\n\n:root {\n @each $size in map.keys(variables.$columns) {\n --mdc-layout-grid-margin-#{$size}: #{map.get(\n variables.$default-margin,\n $size\n )};\n --mdc-layout-grid-gutter-#{$size}: #{map.get(\n variables.$default-gutter,\n $size\n )};\n --mdc-layout-grid-column-width-#{$size}: #{map.get(\n variables.$column-width,\n $size\n )};\n }\n}\n\n// postcss-bem-linter: define layout-grid\n.mdc-layout-grid {\n @each $size in map.keys(variables.$columns) {\n @include mixins.media-query_($size) {\n $margin: map.get(variables.$default-margin, $size);\n\n @include mixins.layout-grid($size, $margin, variables.$max-width);\n }\n }\n}\n\n.mdc-layout-grid__inner {\n @each $size in map.keys(variables.$columns) {\n @include mixins.media-query_($size) {\n $margin: map.get(variables.$default-margin, $size);\n $gutter: map.get(variables.$default-gutter, $size);\n\n @include mixins.inner($size, $margin, $gutter);\n }\n }\n}\n\n.mdc-layout-grid__cell {\n // select the upper breakpoint\n $upper-breakpoint: list.nth(map.keys(variables.$columns), 1);\n\n @each $size in map.keys(variables.$columns) {\n @include mixins.media-query_($size) {\n $gutter: map.get(variables.$default-gutter, $size);\n\n @include mixins.cell($size, variables.$default-column-span, $gutter);\n\n @for $span from 1 through map.get(variables.$columns, $upper-breakpoint) {\n // Span classes.\n // stylelint-disable max-nesting-depth\n @at-root .mdc-layout-grid__cell--span-#{$span},\n .mdc-layout-grid__cell--span-#{$span}-#{$size} {\n @include mixins.cell-span_($size, $span, $gutter);\n }\n // stylelint-enable max-nesting-depth\n }\n }\n }\n\n // Order override classes.\n @for $i from 1 through map.get(variables.$columns, $upper-breakpoint) {\n &--order-#{$i} {\n @include mixins.cell-order($i);\n }\n }\n\n // Alignment classes.\n &--align-top {\n @include mixins.cell-align(top);\n }\n\n &--align-middle {\n @include mixins.cell-align(middle);\n }\n\n &--align-bottom {\n @include mixins.cell-align(bottom);\n }\n}\n\n.mdc-layout-grid--fixed-column-width {\n @each $size in map.keys(variables.$columns) {\n @include mixins.media-query_($size) {\n $margin: map.get(variables.$default-margin, $size);\n $gutter: map.get(variables.$default-gutter, $size);\n $column-width: map.get(variables.$column-width, $size);\n\n @include mixins.fixed-column-width(\n $size,\n $margin,\n $gutter,\n $column-width\n );\n }\n }\n}\n\n.mdc-layout-grid--align-left {\n margin-right: auto;\n margin-left: 0;\n}\n\n.mdc-layout-grid--align-right {\n margin-right: 0;\n margin-left: auto;\n}\n// postcss-bem-linter: end\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@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:math\";\n@use \"./variables\";\n\n// returns the lower grid boundary or null if the smallest grid is selected\n@function breakpoint-min($size) {\n @if not map.has-key(variables.$columns, $size) {\n @error \"Invalid style specified! Choose one of #{map.keys(variables.$columns)}\";\n }\n $min: map.get(variables.$breakpoints, $size);\n\n @return if($min > 0, $min, null);\n}\n\n// returns the upper grid boundary or null if the largest grid is selected\n@function breakpoint-max($size) {\n @if not map.has-key(variables.$columns, $size) {\n @error \"Invalid style specified! Choose one of #{map.keys(variables.$columns)}\";\n }\n $names: map.keys(variables.$columns);\n $n: list.index($names, $size);\n $prev: if($n > 1, list.nth($names, $n - 1), null);\n\n @return if($prev, (breakpoint-min($prev) - 1px), null);\n}\n\n// Private mixins, meant for internal use.\n@mixin media-query_($size) {\n @if not map.has-key(variables.$columns, $size) {\n @error \"Invalid style specified! Choose one of #{map.keys(variables.$columns)}\";\n }\n\n $min: breakpoint-min($size);\n $max: breakpoint-max($size);\n\n @if $min == null and $max != null {\n // Phone\n @media (max-width: $max) {\n @content;\n }\n } @else if $min != null and $max != null {\n // Tablet\n @media (min-width: $min) and (max-width: $max) {\n @content;\n }\n } @else if $min != null and $max == null {\n // Desktop\n @media (min-width: $min) {\n @content;\n }\n } @else {\n // Fallback - no breakpoints defined\n @content;\n }\n}\n\n@mixin cell-span_($size, $span, $gutter) {\n @if not map.has-key(variables.$columns, $size) {\n @error \"Invalid style specified! Choose one of #{map.keys(variables.$columns)}\";\n }\n\n $percent: math.percentage($span / map.get(variables.$columns, $size));\n\n @if $percent > 100% {\n $percent: 100%;\n }\n\n width: calc(#{$percent} - #{$gutter});\n // stylelint-disable-next-line declaration-block-no-duplicate-properties\n width: calc(#{$percent} - var(--mdc-layout-grid-gutter-#{$size}, #{$gutter}));\n\n @supports (display: grid) {\n width: auto;\n grid-column-end: span math.min($span, map.get(variables.$columns, $size));\n }\n}\n\n// Public mixins, meant for developer usage.\n@mixin layout-grid($size, $margin, $max-width: null) {\n @if not map.has-key(variables.$columns, $size) {\n @error \"Invalid style specified! Choose one of #{map.keys(variables.$columns)}\";\n }\n\n box-sizing: border-box;\n margin: 0 auto;\n padding: $margin;\n // stylelint-disable-next-line declaration-block-no-duplicate-properties\n padding: var(--mdc-layout-grid-margin-#{$size}, #{$margin});\n\n @if $max-width {\n max-width: $max-width;\n }\n}\n\n@mixin inner($size, $margin, $gutter) {\n @if not map.has-key(variables.$columns, $size) {\n @error \"Invalid style specified! Choose one of #{map.keys(variables.$columns)}\";\n }\n\n display: flex;\n flex-flow: row wrap;\n align-items: stretch;\n margin: -$gutter / 2;\n // stylelint-disable-next-line declaration-block-no-duplicate-properties\n margin: calc(var(--mdc-layout-grid-gutter-#{$size}, #{$gutter}) / 2 * -1);\n\n @supports (display: grid) {\n display: grid;\n margin: 0;\n grid-gap: $gutter;\n // stylelint-disable-next-line declaration-block-no-duplicate-properties\n grid-gap: var(--mdc-layout-grid-gutter-#{$size}, $gutter);\n grid-template-columns: repeat(\n map.get(variables.$columns, $size),\n minmax(0, 1fr)\n );\n }\n}\n\n@mixin cell($size, $default-span, $gutter) {\n @if not map.has-key(variables.$columns, $size) {\n @error \"Invalid style specified! Choose one of #{map.keys(variables.$columns)}\";\n }\n\n @include cell-span_($size, $default-span, $gutter);\n\n box-sizing: border-box;\n margin: $gutter / 2;\n // stylelint-disable-next-line declaration-block-no-duplicate-properties\n margin: calc(var(--mdc-layout-grid-gutter-#{$size}, #{$gutter}) / 2);\n\n @supports (display: grid) {\n margin: 0;\n }\n}\n\n@mixin cell-order($order) {\n order: $order;\n}\n\n@mixin cell-align($position) {\n @if $position == 'top' {\n align-self: flex-start;\n\n @supports (display: grid) {\n align-self: start;\n }\n }\n\n @if $position == 'middle' {\n align-self: center;\n }\n\n @if $position == 'bottom' {\n align-self: flex-end;\n\n @supports (display: grid) {\n align-self: end;\n }\n }\n\n @if $position == 'stretch' {\n align-self: stretch;\n }\n}\n\n@mixin fixed-column-width($size, $margin, $gutter, $column-width) {\n @if not map.has-key(variables.$columns, $size) {\n @error \"Invalid style specified! Choose one of #{map.keys(variables.$columns)}\";\n }\n\n $columnCount: map.get(variables.$columns, $size);\n $gutter-number: $columnCount - 1;\n $margin-number: 2;\n\n width: $column-width * $columnCount + $gutter * $gutter-number + $margin *\n $margin-number;\n // stylelint-disable-next-line declaration-block-no-duplicate-properties\n width: calc(\n var(--mdc-layout-grid-column-width-#{$size}, #{$column-width}) * #{$columnCount} +\n var(--mdc-layout-grid-gutter-#{$size}, #{$gutter}) * #{$gutter-number} +\n var(--mdc-layout-grid-margin-#{$size}, #{$margin}) * #{$margin-number}\n );\n}\n","//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use \"@material/feature-targeting/functions\" as feature-targeting-functions;\n@use \"@material/feature-targeting/mixins\" as feature-targeting-mixins;\n@use \"@material/theme/mixins\" as theme-mixins;\n@use \"./functions\";\n\n// Public\n\n@mixin core-styles($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n\n // postcss-bem-linter: define line-ripple\n .mdc-line-ripple {\n @include feature-targeting-mixins.targets($feat-structure) {\n &::before,\n &::after {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n border-bottom-style: solid;\n content: '';\n }\n\n &::before {\n border-bottom-width: 1px;\n z-index: 1;\n }\n\n &::after {\n transform: scaleX(0);\n border-bottom-width: 2px;\n opacity: 0;\n z-index: 2;\n }\n }\n\n @include feature-targeting-mixins.targets($feat-animation) {\n &::after {\n transition: functions.transition-value(transform),\n functions.transition-value(opacity);\n }\n }\n }\n\n .mdc-line-ripple--active::after {\n @include feature-targeting-mixins.targets($feat-structure) {\n transform: scaleX(1);\n opacity: 1;\n }\n }\n\n .mdc-line-ripple--deactivating::after {\n @include feature-targeting-mixins.targets($feat-structure) {\n opacity: 0;\n }\n }\n}\n\n@mixin active-color($color, $query: feature-targeting-functions.all()) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n @include feature-targeting-mixins.targets($feat-color) {\n &::after {\n @include theme-mixins.prop(border-bottom-color, $color);\n }\n }\n}\n\n@mixin inactive-color($color, $query: feature-targeting-functions.all()) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n @include feature-targeting-mixins.targets($feat-color) {\n &::before {\n @include theme-mixins.prop(border-bottom-color, $color);\n }\n }\n}\n","//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@mixin primary-indeterminate-translate-keyframes_ {\n @keyframes mdc-linear-progress-primary-indeterminate-translate {\n 0% {\n transform: translateX(0);\n }\n\n 20% {\n animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);\n transform: translateX(0);\n }\n\n 59.15% {\n animation-timing-function: cubic-bezier(\n 0.302435,\n 0.381352,\n 0.55,\n 0.956352\n );\n transform: translateX(83.67142%);\n }\n\n 100% {\n transform: translateX(200.611057%);\n }\n }\n}\n\n@mixin primary-indeterminate-scale-keyframes_ {\n @keyframes mdc-linear-progress-primary-indeterminate-scale {\n 0% {\n transform: scaleX(0.08);\n }\n\n 36.65% {\n animation-timing-function: cubic-bezier(0.334731, 0.12482, 0.785844, 1);\n transform: scaleX(0.08);\n }\n\n 69.15% {\n animation-timing-function: cubic-bezier(0.06, 0.11, 0.6, 1);\n transform: scaleX(0.661479);\n }\n\n 100% {\n transform: scaleX(0.08);\n }\n }\n}\n\n@mixin secondary-indeterminate-translate-keyframes_ {\n @keyframes mdc-linear-progress-secondary-indeterminate-translate {\n 0% {\n animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685);\n transform: translateX(0);\n }\n\n 25% {\n animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);\n transform: translateX(37.651913%);\n }\n\n 48.35% {\n animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026);\n transform: translateX(84.386165%);\n }\n\n 100% {\n transform: translateX(160.277782%);\n }\n }\n}\n\n@mixin secondary-indeterminate-scale-keyframes_ {\n @keyframes mdc-linear-progress-secondary-indeterminate-scale {\n 0% {\n animation-timing-function: cubic-bezier(\n 0.205028,\n 0.057051,\n 0.57661,\n 0.453971\n );\n transform: scaleX(0.08);\n }\n\n 19.15% {\n animation-timing-function: cubic-bezier(\n 0.152313,\n 0.196432,\n 0.648374,\n 1.004315\n );\n transform: scaleX(0.457104);\n }\n\n 44.15% {\n animation-timing-function: cubic-bezier(\n 0.257759,\n -0.003163,\n 0.211762,\n 1.38179\n );\n transform: scaleX(0.72796);\n }\n\n 100% {\n transform: scaleX(0.08);\n }\n }\n}\n\n@mixin buffering-keyframes_ {\n @keyframes mdc-linear-progress-buffering {\n from {\n // Normally the buffer dots start from the left and overflow to the right.\n // We rotate by 180deg so that the buffer dots start on the right when\n // in non-reversed mode and overflow to the left.\n transform: rotate(180deg) translateX(-10px);\n }\n }\n}\n\n@mixin primary-indeterminate-translate-reverse-keyframes_ {\n @keyframes mdc-linear-progress-primary-indeterminate-translate-reverse {\n 0% {\n transform: translateX(0);\n }\n\n 20% {\n animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);\n transform: translateX(0);\n }\n\n 59.15% {\n animation-timing-function: cubic-bezier(\n 0.302435,\n 0.381352,\n 0.55,\n 0.956352\n );\n transform: translateX(-83.67142%);\n }\n\n 100% {\n transform: translateX(-200.611057%);\n }\n }\n}\n\n@mixin secondary-indeterminate-translate-reverse-keyframes_ {\n @keyframes mdc-linear-progress-secondary-indeterminate-translate-reverse {\n 0% {\n animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685);\n transform: translateX(0);\n }\n\n 25% {\n animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);\n transform: translateX(-37.651913%);\n }\n\n 48.35% {\n animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026);\n transform: translateX(-84.386165%);\n }\n\n 100% {\n transform: translateX(-160.277782%);\n }\n }\n}\n\n@mixin buffering-reverse-keyframes_ {\n @keyframes mdc-linear-progress-buffering-reverse {\n from {\n transform: translateX(-10px);\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@use \"sass:string\";\n@use \"@material/animation/functions\" as animation-functions;\n@use \"@material/feature-targeting/functions\" as feature-targeting-functions;\n@use \"@material/feature-targeting/mixins\" as feature-targeting-mixins;\n@use \"@material/theme/mixins\" as theme-mixins;\n@use \"@material/theme/variables\" as theme-variables; // for mdc-theme-prop-value\n@use \"./variables\";\n@use \"./keyframes\";\n\n//\n// Public\n//\n\n@mixin core-styles($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n\n @include feature-targeting-mixins.targets($feat-animation) {\n @include keyframes.primary-indeterminate-translate-keyframes_;\n @include keyframes.primary-indeterminate-scale-keyframes_;\n @include keyframes.secondary-indeterminate-translate-keyframes_;\n @include keyframes.secondary-indeterminate-scale-keyframes_;\n @include keyframes.buffering-keyframes_;\n @include keyframes.primary-indeterminate-translate-reverse-keyframes_;\n @include keyframes.secondary-indeterminate-translate-reverse-keyframes_;\n @include keyframes.buffering-reverse-keyframes_;\n }\n\n .mdc-linear-progress {\n @include feature-targeting-mixins.targets($feat-structure) {\n position: relative;\n width: 100%;\n height: variables.$height;\n transform: translateZ(0);\n // Create a border around the bar in Windows High Contrast Mode.\n outline: 1px solid transparent;\n overflow: hidden;\n }\n\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: animation-functions.exit-temporary(opacity, 250ms);\n }\n\n &__bar {\n @include feature-targeting-mixins.targets($feat-structure) {\n position: absolute;\n width: 100%;\n height: 100%;\n animation: none;\n transform-origin: top left;\n }\n\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: animation-functions.exit-temporary(transform, 250ms);\n }\n }\n\n &__bar-inner {\n @include feature-targeting-mixins.targets($feat-structure) {\n display: inline-block;\n position: absolute;\n width: 100%;\n animation: none;\n // border-top is used rather than background-color to ensure that the\n // bar is visible in Windows High Contrast Mode.\n border-top: variables.$height solid;\n }\n }\n\n &__buffer {\n @include feature-targeting-mixins.targets($feat-structure) {\n display: flex;\n position: absolute;\n width: 100%;\n height: 100%;\n }\n }\n\n &__buffer-dots {\n @include feature-targeting-mixins.targets($feat-structure) {\n background-repeat: repeat-x;\n background-size: 10px variables.$height;\n flex: auto;\n transform: rotate(180deg);\n }\n\n @include feature-targeting-mixins.targets($feat-animation) {\n animation: mdc-linear-progress-buffering 250ms infinite linear;\n }\n }\n\n &__buffer-bar {\n @include feature-targeting-mixins.targets($feat-structure) {\n flex: 0 1 100%;\n }\n\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: animation-functions.exit-temporary(flex-basis, 250ms);\n }\n }\n\n &__primary-bar {\n @include feature-targeting-mixins.targets($feat-structure) {\n transform: scaleX(0);\n }\n }\n\n &__secondary-bar {\n @include feature-targeting-mixins.targets($feat-structure) {\n visibility: hidden;\n }\n }\n\n @include indeterminate_($query: $query);\n @include reversed_($query: $query);\n\n &--closed {\n @include feature-targeting-mixins.targets($feat-structure) {\n opacity: 0;\n }\n\n @include feature-targeting-mixins.targets($feat-animation) {\n animation: none;\n }\n }\n }\n\n @at-root {\n @include bar-color(primary, $query: $query);\n @include buffer-color(variables.$baseline-buffer-color, $query: $query);\n }\n\n .mdc-linear-progress--indeterminate.mdc-linear-progress--reversed {\n .mdc-linear-progress__primary-bar {\n @include feature-targeting-mixins.targets($feat-structure) {\n right: -145.166611%;\n left: auto;\n }\n }\n\n .mdc-linear-progress__secondary-bar {\n @include feature-targeting-mixins.targets($feat-structure) {\n right: -54.888891%;\n left: auto;\n }\n }\n }\n}\n\n@mixin bar-color($color, $query: feature-targeting-functions.all()) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n .mdc-linear-progress__bar-inner {\n @include feature-targeting-mixins.targets($feat-color) {\n // Border is used rather than background-color to ensure that the\n // bar is visible in Windows High Contrast Mode.\n @include theme-mixins.prop(border-color, $color);\n }\n }\n}\n\n@mixin buffer-color($color, $query: feature-targeting-functions.all()) {\n // We need to escape the '#' character as \"%23\" for SVG because '#' is a reserved character in URIs.\n $color-value-for-css: theme-variables.prop-value($color);\n $color-value-for-svg: str-replace_(\n string.unquote('#{$color-value-for-css}'),\n '#',\n '%23'\n );\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n .mdc-linear-progress__buffer-dots {\n @include feature-targeting-mixins.targets($feat-color) {\n // SVG is optimized for data URI (https://codepen.io/tigt/post/optimizing-svgs-in-data-uris)\n // stylelint-disable-next-line function-url-quotes\n background-image: url(\"data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' enable-background='new 0 0 5 2' xml:space='preserve' viewBox='0 0 5 2' preserveAspectRatio='none slice'%3E%3Ccircle cx='1' cy='1' r='1' fill='#{$color-value-for-svg}'/%3E%3C/svg%3E\");\n }\n }\n\n .mdc-linear-progress__buffer-bar {\n @include feature-targeting-mixins.targets($feat-color) {\n background-color: $color-value-for-css;\n }\n }\n}\n\n//\n// Private\n//\n\n@mixin indeterminate_($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n\n &--indeterminate {\n .mdc-linear-progress__bar {\n @include feature-targeting-mixins.targets($feat-structure) {\n transition: none;\n }\n }\n\n .mdc-linear-progress__primary-bar {\n @include feature-targeting-mixins.targets($feat-structure) {\n left: -145.166611%;\n }\n\n @include feature-targeting-mixins.targets($feat-animation) {\n animation: mdc-linear-progress-primary-indeterminate-translate 2s\n infinite linear;\n }\n\n > .mdc-linear-progress__bar-inner {\n @include feature-targeting-mixins.targets($feat-animation) {\n animation: mdc-linear-progress-primary-indeterminate-scale 2s infinite\n linear;\n }\n }\n }\n\n .mdc-linear-progress__secondary-bar {\n @include feature-targeting-mixins.targets($feat-structure) {\n left: -54.888891%;\n visibility: visible;\n }\n\n @include feature-targeting-mixins.targets($feat-animation) {\n animation: mdc-linear-progress-secondary-indeterminate-translate 2s\n infinite linear;\n }\n\n > .mdc-linear-progress__bar-inner {\n @include feature-targeting-mixins.targets($feat-animation) {\n animation: mdc-linear-progress-secondary-indeterminate-scale 2s\n infinite linear;\n }\n }\n }\n }\n}\n\n@mixin reversed_($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n\n &--reversed {\n .mdc-linear-progress__bar {\n @include feature-targeting-mixins.targets($feat-structure) {\n right: 0;\n transform-origin: center right;\n }\n }\n\n .mdc-linear-progress__primary-bar {\n @include feature-targeting-mixins.targets($feat-animation) {\n animation-name: mdc-linear-progress-primary-indeterminate-translate-reverse;\n }\n }\n\n .mdc-linear-progress__secondary-bar {\n @include feature-targeting-mixins.targets($feat-animation) {\n animation-name: mdc-linear-progress-secondary-indeterminate-translate-reverse;\n }\n }\n\n .mdc-linear-progress__buffer-dots {\n @include feature-targeting-mixins.targets($feat-animation) {\n animation: mdc-linear-progress-buffering-reverse 250ms infinite linear;\n }\n\n @include feature-targeting-mixins.targets($feat-structure) {\n order: 0;\n transform: rotate(0);\n }\n }\n\n .mdc-linear-progress__buffer-bar {\n @include feature-targeting-mixins.targets($feat-structure) {\n order: 1;\n }\n }\n }\n}\n\n// Based on https://css-tricks.com/snippets/sass/str-replace-function/\n@function str-replace_($string, $search, $replace) {\n $index: string.index($string, $search);\n\n @if $index {\n $head: string.slice($string, 1, $index - 1);\n $tail: str-replace_(\n string.slice($string, $index + string.length($search)),\n $search,\n $replace\n );\n\n @return $head + $replace + $tail;\n }\n\n @return $string;\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$baseline-buffer-color: #e6e6e6 !default;\n$height: 4px;\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@use \"@material/density/variables\" as density-variables;\n@use \"@material/theme/variables\" as theme-variables;\n\n$ripple-target: '.mdc-list-item__ripple';\n\n$divider-color-on-light-bg: rgba(0, 0, 0, .12) !default;\n$divider-color-on-dark-bg: rgba(255, 255, 255, .2) !default;\n$side-padding: 16px !default;\n$trailing-padding: 16px !default;\n$text-offset: 72px !default;\n$text-disabled-opacity: theme-variables.text-emphasis(disabled) !default;\n$text-disabled-color: on-surface !default;\n$text-selected-color: primary !default;\n\n$single-line-height: 48px !default;\n$single-line-minimum-height: 24px !default;\n$single-line-maximum-height: $single-line-height !default;\n$single-line-density-scale: density-variables.$default-scale !default;\n$single-line-density-config: (\n height: (\n default: $single-line-height,\n maximum: $single-line-maximum-height,\n minimum: $single-line-minimum-height,\n ),\n) !default;\n\n$item-primary-text-baseline-height: 28px !default;\n$item-primary-text-baseline-height-with-graphic: 32px !default;\n$item-secondary-text-baseline-height: 20px !default;\n$dense-item-primary-text-baseline-height: 24px !default;\n\n$two-line-height: 64px !default;\n$two-line-graphic-height: 72px !default;\n$two-line-icon-top-margin: 16px !default;\n\n// TODO(b/156624966): this is used to support legacy usage of embedded graphics.\n$deprecated-graphic-config: (\n graphic-size: (width: 24px, height: 24px),\n leading-padding: 16px,\n text-offset: 72px\n) !default;\n\n$textual-variant-config: (\n single-line-height: $single-line-height,\n graphic-size: (width: 24px, height: 24px),\n leading-padding: 16px,\n text-offset: 16px\n) !default;\n\n$icon-variant-config: (\n single-line-height: 56px,\n graphic-size: (width: 24px, height: 24px),\n leading-padding: 16px,\n text-offset: 72px\n) !default;\n\n$avatar-variant-config: (\n single-line-height: 56px,\n graphic-size: (width: 40px, height: 40px),\n leading-padding: 16px,\n text-offset: 72px\n) !default;\n\n$thumbnail-variant-config: (\n single-line-height: 56px,\n graphic-size: (width: 40px, height: 40px),\n leading-padding: 16px,\n text-offset: 72px\n) !default;\n\n$image-variant-config: (\n single-line-height: 72px,\n graphic-size: (width: 56px, height: 56px),\n leading-padding: 16px,\n text-offset: 88px\n) !default;\n\n$video-variant-config: (\n single-line-height: 72px,\n graphic-size: (width: 100px, height: 56px),\n leading-padding: 0px,\n text-offset: 116px\n) !default;\n","//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use \"@material/theme/mixins\";\n@use \"@material/theme/variables\";\n\n$ink-color: rgba(\n variables.prop-value(on-surface),\n variables.text-emphasis(high)\n) !default;\n\n$width-base: 56px !default;\n$min-width: 2 * $width-base !default;\n","//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use \"@material/feature-targeting/functions\";\n@use \"@material/feature-targeting/mixins\" as feature-targeting-mixins;\n@use \"@material/theme/mixins\" as theme-mixins;\n@use \"@material/shape/mixins\" as shape-mixins;\n@use \"@material/animation/variables\" as animation-variables;\n@use \"@material/elevation/mixins\" as elevation-mixins;\n@use \"@material/rtl/mixins\" as rtl-mixins;\n@use \"./variables\";\n\n//\n// Public\n//\n\n@mixin core-styles($query: functions.all()) {\n $feat-structure: functions.create-target($query, structure);\n\n // postcss-bem-linter: define menu-surface\n .mdc-menu-surface {\n @include base_($query);\n @include elevation-mixins.elevation($z-value: 8, $query: $query);\n @include fill-color(surface, $query);\n @include ink-color(on-surface, $query);\n @include shape-radius(variables.$shape-radius, false, $query);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n @include rtl-mixins.reflexive-property(\n transform-origin,\n top left,\n top right\n );\n }\n }\n\n .mdc-menu-surface--anchor {\n @include feature-targeting-mixins.targets($feat-structure) {\n position: relative;\n overflow: visible;\n }\n }\n\n .mdc-menu-surface--fixed {\n @include feature-targeting-mixins.targets($feat-structure) {\n position: fixed;\n }\n }\n\n .mdc-menu-surface--fullwidth {\n @include feature-targeting-mixins.targets($feat-structure) {\n width: 100%;\n }\n }\n // postcss-bem-linter: end\n}\n\n@mixin ink-color($color, $query: functions.all()) {\n $feat-color: functions.create-target($query, color);\n\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(color, $color);\n }\n}\n\n@mixin fill-color($color, $query: functions.all()) {\n $feat-color: functions.create-target($query, color);\n\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(background-color, $color);\n }\n}\n\n@mixin shape-radius($radius, $rtl-reflexive: false, $query: functions.all()) {\n @include shape-mixins.radius($radius, $rtl-reflexive, $query: $query);\n}\n\n// Used by filled variants of GM components to conditionally flatten the top\n// corners of the menu.\n@mixin flatten-top-when-opened-below($query: functions.all()) {\n .mdc-menu-surface--is-open-below {\n $feat-structure: functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n border-top-left-radius: 0px;\n border-top-right-radius: 0px;\n }\n }\n}\n\n//\n// Private\n//\n\n@mixin base_($query: functions.all()) {\n $feat-structure: functions.create-target($query, structure);\n $feat-animation: functions.create-target($query, animation);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n display: none;\n position: absolute;\n box-sizing: border-box;\n max-width: calc(100vw - #{variables.$min-distance-from-edge});\n max-height: calc(100vh - #{variables.$min-distance-from-edge});\n margin: 0;\n padding: 0;\n transform: scale(1);\n transform-origin: top left;\n opacity: 0;\n overflow: auto;\n will-change: transform, opacity;\n z-index: variables.$z-index;\n }\n\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: opacity variables.$fade-in-duration linear,\n transform variables.$scale-duration\n animation-variables.$deceleration-curve-timing-function;\n }\n\n &:focus {\n @include feature-targeting-mixins.targets($feat-structure) {\n outline: none;\n }\n }\n\n // stylelint-disable-next-line selector-max-type\n &--open {\n @include feature-targeting-mixins.targets($feat-structure) {\n display: inline-block;\n transform: scale(1);\n opacity: 1;\n }\n }\n\n &--animating-open {\n @include feature-targeting-mixins.targets($feat-structure) {\n display: inline-block;\n transform: scale(0.8);\n opacity: 0;\n }\n }\n\n &--animating-closed {\n @include feature-targeting-mixins.targets($feat-structure) {\n display: inline-block;\n opacity: 0;\n }\n\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: opacity variables.$fade-out-duration linear;\n }\n }\n}\n","//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n$fade-in-duration: 0.03s !default;\n$fade-out-duration: 0.075s !default;\n$scale-duration: 0.12s !default;\n$min-distance-from-edge: 32px !default;\n$z-index: 8 !default; // One above mdc-dialog\n$shape-radius: medium !default;\n","//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// Keep this in sync with constants.numbers.MIN_LEADING_STROKE_EDGE_POSITION\n$min-leading-stroke-edge-position: 12px !default;\n// The gap between the stroke end and floating label\n// Keep this in sync with constants.numbers.NOTCH_GUTTER_SIZE\n$notch-gutter-size: 4px !default;\n$border-width: 1px !default;\n$leading-width: 12px !default;\n$padding: 4px !default;\n// This variable keeps the before/after JS label centered in the notch when the font-size is changed.\n$label-adjust: 14% !default;\n\n/// Label box height when it is floating above for notched upgraded. This value is used to put the label vertically in\n/// the middle when it is notched.\n$label-box-height: 13.5px !default;\n\n/// Label adjust offset applied to floating label when it is notched. Since notch without upgraded has different font\n/// size we add additional offset value.\n$label-adjust-absolute: 2.5px !default;\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@use \"sass:map\";\n@use \"@material/animation/functions\" as functions2;\n@use \"@material/density/functions\" as density-functions;\n@use \"@material/feature-targeting/functions\" as feature-targeting-functions;\n@use \"@material/feature-targeting/mixins\" as feature-targeting-mixins;\n@use \"@material/ripple/mixins\" as ripple-mixins;\n@use \"@material/ripple/variables\" as ripple-variables;\n@use \"@material/theme/mixins\" as theme-mixins;\n@use \"@material/theme/variables\" as variables2;\n@use \"@material/touch-target/mixins\" as touch-target-mixins;\n@use \"@material/touch-target/variables\" as touch-target-variables;\n@use \"./functions\";\n@use \"./variables\";\n\n$ripple-target: '.mdc-radio__ripple';\n\n///\n/// Radio core styles.\n///\n@mixin core-styles($query: feature-targeting-functions.all()) {\n @include without-ripple($query);\n @include ripple($query);\n}\n\n// This API is intended for use by frameworks that may want to separate the ripple-related styles from the other\n// radio styles. It is recommended that most users use `mdc-radio-core-styles` instead.\n@mixin without-ripple($query: feature-targeting-functions.all()) {\n // postcss-bem-linter: define radio\n\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n $feat-color: feature-targeting-functions.create-target($query, color);\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include touch-target-mixins.wrapper($query); // COPYBARA_COMMENT_THIS_LINE\n\n .mdc-radio {\n @include unchecked-stroke-color(variables.$unchecked-color, $query: $query);\n @include checked-stroke-color(\n variables.$baseline-theme-color,\n $query: $query\n );\n @include ink-color(variables.$baseline-theme-color, $query: $query);\n @include disabled-unchecked-stroke-color(\n variables.$disabled-circle-color,\n $query: $query\n );\n @include disabled-checked-stroke-color(\n variables.$disabled-circle-color,\n $query: $query\n );\n @include disabled-ink-color(\n variables.$disabled-circle-color,\n $query: $query\n );\n @include focus-indicator-color(\n variables.$baseline-theme-color,\n $query: $query\n );\n @include density(variables.$density-scale, $query: $query);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n display: inline-block;\n position: relative;\n flex: 0 0 auto;\n box-sizing: content-box;\n width: variables.$icon-size;\n height: variables.$icon-size;\n cursor: pointer;\n /* @alternate */\n will-change: opacity, transform, border-color, color;\n }\n\n // Container for radio circles and ripple.\n &__background {\n @include feature-targeting-mixins.targets($feat-structure) {\n display: inline-block;\n position: relative;\n box-sizing: border-box;\n width: variables.$icon-size;\n height: variables.$icon-size;\n }\n\n &::before {\n @include feature-targeting-mixins.targets($feat-structure) {\n position: absolute;\n transform: scale(0, 0);\n border-radius: 50%;\n opacity: 0;\n pointer-events: none;\n content: '';\n }\n\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: functions.exit(opacity), functions.exit(transform);\n }\n }\n }\n\n &__outer-circle {\n @include feature-targeting-mixins.targets($feat-structure) {\n position: absolute;\n top: 0;\n left: 0;\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n border-width: 2px;\n border-style: solid;\n border-radius: 50%;\n }\n\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: functions.exit(border-color);\n }\n }\n\n &__inner-circle {\n @include feature-targeting-mixins.targets($feat-structure) {\n position: absolute;\n top: 0;\n left: 0;\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n transform: scale(0, 0);\n border-width: 10px;\n border-style: solid;\n border-radius: 50%;\n }\n\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: functions.exit(transform), functions.exit(border-color);\n }\n }\n\n &__native-control {\n @include feature-targeting-mixins.targets($feat-structure) {\n position: absolute;\n margin: 0;\n padding: 0;\n opacity: 0;\n cursor: inherit;\n z-index: 1;\n }\n }\n\n &--touch {\n @include touch-target-mixins.margin(\n $component-height: variables.$ripple-size,\n $component-width: variables.$ripple-size,\n $query: $query\n );\n @include touch-target(\n $size: touch-target-variables.$height,\n $query: $query\n );\n }\n }\n\n .mdc-radio__native-control:checked,\n .mdc-radio__native-control:disabled {\n + .mdc-radio__background {\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: functions.enter(opacity), functions.enter(transform);\n }\n\n .mdc-radio__outer-circle {\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: functions.enter(border-color);\n }\n }\n\n .mdc-radio__inner-circle {\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: functions.enter(transform), functions.enter(border-color);\n }\n }\n }\n }\n\n .mdc-radio--disabled {\n @include feature-targeting-mixins.targets($feat-structure) {\n cursor: default;\n pointer-events: none;\n }\n }\n\n .mdc-radio__native-control:checked {\n + .mdc-radio__background {\n .mdc-radio__inner-circle {\n @include feature-targeting-mixins.targets($feat-structure) {\n transform: scale(0.5);\n }\n\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: functions.enter(transform), functions.enter(border-color);\n }\n }\n }\n }\n\n .mdc-radio__native-control:disabled,\n [aria-disabled='true'] .mdc-radio__native-control {\n + .mdc-radio__background {\n @include feature-targeting-mixins.targets($feat-structure) {\n cursor: default;\n }\n }\n }\n\n .mdc-radio__native-control:focus {\n + .mdc-radio__background::before {\n @include feature-targeting-mixins.targets($feat-structure) {\n transform: scale(1);\n opacity: map.get(ripple-variables.$dark-ink-opacities, focus);\n }\n\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: functions.enter(opacity), functions.enter(transform);\n }\n }\n }\n\n // postcss-bem-linter: end\n}\n\n// This API is intended for use by frameworks that may want to separate the ripple-related styles from the other\n// radio styles. It is recommended that most users use `mdc-radio-core-styles` instead.\n@mixin ripple($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include ripple-mixins.common($query); // COPYBARA_COMMENT_THIS_LINE\n\n .mdc-radio {\n @include ripple-mixins.surface(\n $query: $query,\n $ripple-target: $ripple-target\n );\n @include ripple-mixins.radius-unbounded(\n $query: $query,\n $ripple-target: $ripple-target\n );\n @include ripple-mixins.states(\n $color: variables.$baseline-theme-color,\n $query: $query,\n $ripple-target: $ripple-target\n );\n\n &.mdc-ripple-upgraded--background-focused {\n .mdc-radio__background::before {\n @include feature-targeting-mixins.targets($feat-structure) {\n content: none;\n }\n }\n }\n }\n\n #{$ripple-target} {\n @include ripple-mixins.target-common($query: $query);\n }\n}\n\n///\n/// Sets the stroke color of an unchecked, enabled radio button.\n/// @param {Color} $color - The desired stroke color.\n///\n@mixin unchecked-stroke-color(\n $color,\n $query: feature-targeting-functions.all()\n) {\n @include if-enabled-unchecked_ {\n @include stroke-color_($color, $query: $query);\n }\n}\n\n///\n/// Sets the stroke color of a checked, enabled radio button.\n/// @param {Color} $color - The desired stroke color.\n///\n@mixin checked-stroke-color($color, $query: feature-targeting-functions.all()) {\n @include if-enabled-checked_ {\n @include stroke-color_($color, $query: $query);\n }\n}\n\n///\n/// Sets the ink color of an enabled radio button.\n/// @param {Color} $color - The desired ink color.\n///\n@mixin ink-color($color, $query: feature-targeting-functions.all()) {\n @include if-enabled_ {\n @include ink-color_($color, $query: $query);\n }\n}\n\n///\n/// Sets the stroke color of an unchecked, disabled radio button.\n/// @param {Color} $color - The desired stroke color.\n///\n@mixin disabled-unchecked-stroke-color(\n $color,\n $query: feature-targeting-functions.all()\n) {\n @include if-disabled-unchecked_ {\n @include stroke-color_($color, $query: $query);\n }\n}\n\n///\n/// Sets the stroke color of a checked, disabled radio button.\n/// @param {Color} $color - The desired stroke color.\n///\n@mixin disabled-checked-stroke-color(\n $color,\n $query: feature-targeting-functions.all()\n) {\n @include if-disabled-checked_ {\n @include stroke-color_($color, $query: $query);\n }\n}\n\n///\n/// Sets the ink color of a disabled radio button.\n/// @param {Color} $color - The desired ink color\n///\n@mixin disabled-ink-color($color, $query: feature-targeting-functions.all()) {\n @include if-disabled_ {\n @include ink-color_($color, $query: $query);\n }\n}\n\n@mixin focus-indicator-color(\n $color,\n $query: feature-targeting-functions.all()\n) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n .mdc-radio__background::before {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(background-color, $color);\n }\n }\n}\n\n///\n/// Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom\n/// ripple size.\n///\n/// @param {Number} $size Size of touch target (Native input) in `px`.\n/// @param {Number} $ripple-size Size of ripple in `px`. Required only for custom ripple size.\n///\n@mixin touch-target(\n $size: variables.$ripple-size,\n $ripple-size: variables.$ripple-size,\n $query: feature-targeting-functions.all()\n) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n $offset: ($ripple-size - $size) / 2;\n\n .mdc-radio__native-control {\n @include feature-targeting-mixins.targets($feat-structure) {\n top: $offset;\n right: $offset;\n left: $offset;\n width: $size;\n height: $size;\n }\n }\n}\n\n///\n/// Sets density scale for radio.\n///\n/// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values\n/// `-3`, `-2`, `-1`, `0`.\n///\n@mixin density($density-scale, $query: feature-targeting-functions.all()) {\n $size: density-functions.prop-value(\n $density-config: variables.$density-config,\n $density-scale: $density-scale,\n $property-name: size,\n );\n\n @include ripple-size($size, $query: $query);\n // Sets touch target size same as ripple size.\n @include touch-target($size: $size, $ripple-size: $size, $query: $query);\n\n @if $density-scale != 0 {\n @include touch-target-reset_($query: $query);\n }\n}\n\n///\n/// Sets radio ripple size.\n///\n/// @param {Number} $size - Ripple size in `px`.\n///\n@mixin ripple-size($size, $query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n $padding: ($size - variables.$icon-size) / 2;\n\n @include feature-targeting-mixins.targets($feat-structure) {\n padding: $padding;\n }\n\n .mdc-radio__background::before {\n @include feature-targeting-mixins.targets($feat-structure) {\n top: -$padding;\n left: -$padding;\n width: $size;\n height: $size;\n }\n }\n}\n\n///\n/// Resets touch target-related styles. This is called from the density mixin to\n/// automatically remove the increased touch target, since dense components\n/// don't have the same default a11y requirements.\n/// @access private\n///\n@mixin touch-target-reset_($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n margin: 0;\n }\n}\n\n///\n/// Helps select the radio background only when its native control is in the\n/// enabled state.\n/// @access private\n///\n@mixin if-enabled_ {\n .mdc-radio__native-control:enabled + {\n @content;\n }\n}\n\n///\n/// Helps select the radio background only when its native control is in the\n/// enabled & unchecked state.\n/// @access private\n///\n@mixin if-enabled-unchecked_ {\n .mdc-radio__native-control:enabled:not(:checked) + {\n @content;\n }\n}\n\n///\n/// Helps select the radio background only when its native control is in the\n/// enabled & checked state.\n/// @access private\n///\n@mixin if-enabled-checked_ {\n .mdc-radio__native-control:enabled:checked + {\n @content;\n }\n}\n\n///\n/// Helps select the radio background only when its native control is in the\n/// disabled state.\n/// @access private\n///\n@mixin if-disabled_ {\n [aria-disabled='true'] .mdc-radio__native-control,\n .mdc-radio__native-control:disabled {\n + {\n @content;\n }\n }\n}\n\n///\n/// Helps select the radio background only when its native control is in the\n/// disabled & unchecked state.\n/// @access private\n///\n@mixin if-disabled-unchecked_ {\n [aria-disabled='true'] .mdc-radio__native-control,\n .mdc-radio__native-control:disabled {\n &:not(:checked) + {\n @content;\n }\n }\n}\n\n///\n/// Helps select the radio background only when its native control is in the\n/// disabled & checked state.\n/// @access private\n///\n@mixin if-disabled-checked_ {\n [aria-disabled='true'] .mdc-radio__native-control,\n .mdc-radio__native-control:disabled {\n &:checked + {\n @content;\n }\n }\n}\n\n///\n/// Sets the ink color for radio. This is wrapped in a mixin\n/// that qualifies state such as `mdc-radio-if-enabled_`\n/// @access private\n///\n@mixin ink-color_($color, $query: feature-targeting-functions.all()) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n .mdc-radio__background .mdc-radio__inner-circle {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(border-color, $color);\n }\n }\n}\n\n///\n/// Sets the stroke color for radio. This is wrapped in a mixin\n/// that qualifies state such as `mdc-radio-if-enabled_`\n/// @access private\n///\n@mixin stroke-color_($color, $query: feature-targeting-functions.all()) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n .mdc-radio__background .mdc-radio__outer-circle {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(border-color, $color);\n }\n }\n}\n","//\n// Copyright 2016 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use \"@material/density/variables\" as density-variables;\n@use \"@material/theme/variables\" as theme-variables;\n\n$ripple-size: 40px !default;\n$icon-size: 20px !default;\n$transition-duration: 120ms !default;\n$ripple-opacity: 0.14 !default;\n$baseline-theme-color: secondary !default;\n$unchecked-color: rgba(theme-variables.prop-value(on-surface), 0.54) !default;\n$disabled-circle-color: rgba(\n theme-variables.prop-value(on-surface),\n 0.38\n) !default;\n\n$minimum-size: 28px !default;\n$maximum-size: $ripple-size !default;\n$density-scale: density-variables.$default-scale !default;\n$density-config: (\n size: (\n minimum: $minimum-size,\n default: $ripple-size,\n maximum: $maximum-size,\n ),\n) !default;\n","// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:/\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software./\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use \"@material/feature-targeting/functions\" as feature-targeting-functions;\n@use \"@material/feature-targeting/mixins\" as feature-targeting-mixins;\n@use \"@material/rtl/mixins\" as rtl-mixins;\n@use \"@material/theme/mixins\" as theme-mixins;\n@use \"@material/typography/mixins\" as typography-mixins;\n@use \"../functions\";\n\n// Public mixins\n\n@mixin helper-text-core-styles($query: feature-targeting-functions.all()) {\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n .mdc-select-helper-text {\n @include feature-targeting-mixins.targets($feat-structure) {\n margin: 0;\n @include rtl-mixins.reflexive-property(margin, 16px, 16px);\n }\n @include typography-mixins.typography(caption, $query: $query);\n @include typography-mixins.text-baseline(16px, $query: $query);\n }\n\n .mdc-select-helper-text--validation-msg {\n @include feature-targeting-mixins.targets($feat-structure) {\n opacity: 0;\n }\n\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: functions.transition(opacity);\n }\n }\n\n .mdc-select--invalid + .mdc-select-helper-text--validation-msg,\n .mdc-select-helper-text--validation-msg-persistent {\n @include feature-targeting-mixins.targets($feat-structure) {\n opacity: 1;\n }\n }\n}\n\n@mixin helper-text-color($color, $query: feature-targeting-functions.all()) {\n &:not(.mdc-select--disabled) {\n @include helper-text-color_($color, $query: $query);\n }\n}\n\n@mixin disabled-helper-text-color(\n $color,\n $query: feature-targeting-functions.all()\n) {\n &.mdc-select--disabled {\n @include helper-text-color_($color, $query: $query);\n }\n}\n\n@mixin helper-text-validation-color(\n $color,\n $query: feature-targeting-functions.all()\n) {\n &:not(.mdc-select--disabled) {\n @include helper-text-validation-color_($color, $query: $query);\n }\n}\n\n@mixin hover-helper-text-validation-color(\n $color,\n $query: feature-targeting-functions.all()\n) {\n &:not(.mdc-select--disabled):not(.mdc-select--focused):hover {\n @include helper-text-validation-color_($color, $query: $query);\n }\n}\n\n// Private mixins\n\n@mixin helper-text-color_($color, $query: feature-targeting-functions.all()) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n & + .mdc-select-helper-text {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(color, $color);\n }\n }\n}\n\n@mixin helper-text-validation-color_(\n $color,\n $query: feature-targeting-functions.all()\n) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n &.mdc-select--invalid + .mdc-select-helper-text--validation-msg {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(color, $color);\n }\n }\n}\n","// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:/\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software./\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use \"@material/feature-targeting/functions\" as feature-targeting-functions;\n@use \"@material/feature-targeting/mixins\" as feature-targeting-mixins;\n@use \"@material/rtl/mixins\" as rtl-mixins;\n@use \"@material/theme/mixins\" as theme-mixins;\n@use \"./variables\";\n\n// Public mixins\n\n@mixin icon-core-styles($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n .mdc-select--with-leading-icon {\n @include icon_($query: $query);\n @include icon-horizontal-margins(\n $left: variables.$icon-horizontal-margin,\n $right: variables.$icon-horizontal-margin,\n $query: $query\n );\n }\n\n .mdc-select__icon:not([tabindex]),\n .mdc-select__icon[tabindex='-1'] {\n @include feature-targeting-mixins.targets($feat-structure) {\n cursor: default;\n pointer-events: none;\n }\n }\n}\n\n///\n/// Customizes the size (both width and height) of the icon.\n/// @param {Number} $size - the intended icon size.\n///\n@mixin size($size, $query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n .mdc-select__icon {\n width: $size;\n height: $size;\n font-size: $size;\n }\n }\n}\n\n@mixin icon-color($color, $query: feature-targeting-functions.all()) {\n &:not(.mdc-select--disabled) {\n @include icon-color_($color, $query: $query);\n }\n}\n\n@mixin disabled-icon-color($color, $query: feature-targeting-functions.all()) {\n &.mdc-select--disabled {\n @include icon-color_($color, $query: $query);\n }\n}\n\n@mixin icon-horizontal-margins(\n $left,\n $right,\n $query: feature-targeting-functions.all()\n) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n .mdc-select__icon {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include rtl-mixins.reflexive-property(margin, $left, $right);\n }\n }\n}\n\n// Private mixins\n\n@mixin icon_($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n .mdc-select__icon {\n @include feature-targeting-mixins.targets($feat-structure) {\n display: inline-block;\n box-sizing: border-box;\n border: none;\n text-decoration: none;\n cursor: pointer;\n user-select: none;\n flex-shrink: 0;\n align-self: center;\n }\n\n @include feature-targeting-mixins.targets($feat-color) {\n background-color: transparent;\n fill: currentColor;\n }\n }\n}\n\n@mixin icon-color_($color, $query: feature-targeting-functions.all()) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n .mdc-select__icon {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(color, $color);\n }\n }\n}\n","//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use \"sass:color\";\n@use \"@material/density/variables\" as density-variables;\n@use \"@material/notched-outline/variables\" as notched-outline-variables;\n@use \"@material/theme/variables\";\n\n@function get-outlined-label-position-y($select-anchor-height) {\n @return $select-anchor-height / 2 +\n notched-outline-variables.$label-box-height / 2;\n}\n$ripple-target: '.mdc-select__ripple';\n$arrow-padding: 52px !default;\n$label-padding: 16px !default;\n$height: 56px !default;\n$minimum-height-for-filled-label: 52px !default;\n$filled-baseline-top: 40px !default;\n$selected-text-height: 28px !default;\n$anchor-padding-left: 16px !default;\n$anchor-padding-left-with-leading-icon: 0 !default;\n$anchor-padding-right: 0 !default;\n$outlined-stroke-width: 2px !default;\n$min-width: 200px !default;\n\n$minimum-height: 40px !default;\n$minimum-height-for-filled-label: 52px !default;\n$maximum-height: $height !default;\n$density-scale: density-variables.$default-scale !default;\n$density-config: (\n height: (\n default: $height,\n maximum: $maximum-height,\n minimum: $minimum-height,\n ),\n) !default;\n\n$ink-color: rgba(variables.prop-value(on-surface), 0.87) !default;\n$dropdown-icon-color: rgba(variables.prop-value(on-surface), 0.54) !default;\n$icon-color: rgba(variables.prop-value(on-surface), 0.54) !default;\n$label-color: rgba(variables.prop-value(on-surface), 0.6) !default;\n$focused-label-color: rgba(variables.prop-value(primary), 0.87) !default;\n$bottom-line-idle-color: rgba(variables.prop-value(on-surface), 0.42) !default;\n$bottom-line-hover-color: rgba(variables.prop-value(on-surface), 0.87) !default;\n$helper-text-color: rgba(variables.prop-value(on-surface), 0.6) !default;\n\n$fill-color: color.mix(\n variables.prop-value(on-surface),\n variables.prop-value(surface),\n 4%\n) !default;\n\n// Disabled Styles\n$disabled-label-color: rgba(variables.prop-value(on-surface), 0.38) !default;\n$disabled-icon-color: rgba(variables.prop-value(on-surface), 0.38) !default;\n$disabled-ink-color: rgba(variables.prop-value(on-surface), 0.38) !default;\n$disabled-fill-color: color.mix(\n variables.prop-value(on-surface),\n variables.prop-value(surface),\n 2%\n) !default;\n$disabled-fill-border: rgba(variables.prop-value(on-surface), 0.06) !default;\n$disabled-helper-text-color: rgba(\n variables.prop-value(on-surface),\n 0.38\n) !default;\n$disabled-bottom-line-color: rgba(\n variables.prop-value(on-surface),\n 0.06\n) !default;\n$disabled-dropdown-icon-color: rgba(\n variables.prop-value(on-surface),\n 0.38\n) !default;\n$disabled-outline-color: rgba(variables.prop-value(on-surface), 0.06) !default;\n\n$outlined-idle-border: rgba(variables.prop-value(on-surface), 0.38) !default;\n$outlined-hover-border: rgba(variables.prop-value(on-surface), 0.87) !default;\n\n$label-position-y: 106% !default;\n$outline-label-offset: 16px !default;\n$outlined-label-position-y: get-outlined-label-position-y($height) !default;\n$outlined-with-leading-icon-label-position-x: 32px !default;\n\n$dropdown-transition-duration: 150ms !default;\n// Transition durartions to active state\n$icon-active-fade-out-duration: 0.33 * $dropdown-transition-duration !default;\n$icon-active-fade-in-duration: 0.67 * $dropdown-transition-duration !default;\n// Transition durartions to inactive state\n$icon-inactive-fade-out-duration: 0.5 * $dropdown-transition-duration !default;\n$icon-inactive-fade-in-duration: 0.5 * $dropdown-transition-duration !default;\n\n// Error colors\n$error-color: error !default;\n","//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@mixin emphasize-keyframes_ {\n @keyframes mdc-slider-emphasize {\n 0% {\n animation-timing-function: ease-out;\n }\n\n 50% {\n animation-timing-function: ease-in;\n transform: scale(0.85);\n }\n\n 100% {\n transform: scale(0.571);\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@use \"@material/feature-targeting/functions\" as feature-targeting-functions;\n@use \"@material/feature-targeting/mixins\" as feature-targeting-mixins;\n@use \"@material/theme/functions\" as theme-functions;\n@use \"@material/theme/mixins\" as theme-mixins;\n@use \"@material/theme/variables\" as theme-variables; // for mdc-theme-prop-value\n@use \"@material/typography/mixins\" as typography-mixins;\n@use \"@material/rtl/mixins\" as rtl-mixins;\n@use \"./variables\";\n@use \"./keyframes\";\n\n//\n// Public\n//\n@mixin core-styles($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n\n // postcss-bem-linter: define slider\n\n @include feature-targeting-mixins.targets($feat-animation) {\n @include keyframes.emphasize-keyframes_;\n }\n\n .mdc-slider {\n @include color-accessible(secondary, $query: $query);\n\n &--disable-touch-action {\n @include feature-targeting-mixins.targets($feat-structure) {\n touch-action: none;\n }\n }\n\n &--disabled {\n $disabled-color: #9a9a9a;\n\n @include highlight-color_($disabled-color, $query: $query);\n @include rail-color_($disabled-color, $query: $query);\n @include rail-tick-mark-color_($disabled-color, $query: $query);\n @include thumb-color_($disabled-color, $query: $query);\n @include thumb-stroke-cutout_(white, $query: $query);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n cursor: auto;\n }\n }\n\n @include feature-targeting-mixins.targets($feat-structure) {\n position: relative;\n width: 100%;\n height: 48px;\n cursor: pointer;\n touch-action: pan-x;\n -webkit-tap-highlight-color: rgba(black, 0);\n\n &:focus {\n outline: none;\n }\n }\n\n @include track_($query: $query);\n @include track-marker_($query: $query);\n @include thumb_($query: $query);\n @include focus-ring_($query: $query);\n @include pin_($query: $query);\n }\n\n .mdc-slider--active {\n .mdc-slider__thumb {\n @include feature-targeting-mixins.targets($feat-structure) {\n transform: scale3d(1, 1, 1);\n }\n }\n }\n\n .mdc-slider--focus {\n .mdc-slider__thumb {\n @include feature-targeting-mixins.targets($feat-animation) {\n animation: mdc-slider-emphasize 266.67ms linear;\n }\n }\n\n .mdc-slider__focus-ring {\n @include feature-targeting-mixins.targets($feat-structure) {\n transform: scale3d(1.55, 1.55, 1.55);\n opacity: 0.25;\n }\n }\n }\n\n .mdc-slider--in-transit {\n .mdc-slider__thumb {\n @include feature-targeting-mixins.targets($feat-animation) {\n transition-delay: 140ms;\n }\n }\n }\n\n // NOTE(traviskaufman): There are multiple cases where we want the slider to\n // transition seamlessly even though we're jumping to a spot. The selectors\n // below highlight these cases. The selectors are supplemented by a comment\n // denoting their semantic meaning within the slider.\n\n // When a user clicks somewhere on the track that is not directly the slider\n // thumb container, we transition to the place where the user clicked.\n .mdc-slider--in-transit,\n // When a user is using the arrow keys to modify the value of the slider rather\n // than dragging with a pointer, we transition from one value to another.\n .mdc-slider:focus:not(.mdc-slider--active) {\n .mdc-slider__thumb-container,\n .mdc-slider__track {\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: transform 80ms ease;\n }\n }\n }\n\n .mdc-slider--discrete {\n // stylelint-disable plugin/selector-bem-pattern\n &.mdc-slider--active {\n .mdc-slider__thumb {\n @include feature-targeting-mixins.targets($feat-structure) {\n transform: scale(calc(12 / 21));\n }\n }\n\n .mdc-slider__pin {\n @include feature-targeting-mixins.targets($feat-structure) {\n transform: rotate(-45deg) scale(1) translate(19px, -20px);\n }\n }\n }\n\n &.mdc-slider--focus {\n .mdc-slider__thumb {\n @include feature-targeting-mixins.targets($feat-animation) {\n animation: none;\n }\n }\n }\n\n &.mdc-slider--display-markers {\n .mdc-slider__track-marker-container {\n @include feature-targeting-mixins.targets($feat-structure) {\n visibility: visible;\n }\n }\n }\n // stylelint-enable plugin/selector-bem-pattern\n }\n\n // postcss-bem-linter: end\n}\n\n@mixin highlight-color($color, $query: feature-targeting-functions.all()) {\n &:not(.mdc-slider--disabled) {\n @include highlight-color_($color, $query: $query);\n }\n}\n\n@mixin rail-color(\n $color,\n $opacity: variables.$baseline-rail-opacity,\n $query: feature-targeting-functions.all()\n) {\n &:not(.mdc-slider--disabled) {\n @include rail-color_($color, $opacity, $query: $query);\n }\n}\n\n@mixin rail-tick-mark-color($color, $query: feature-targeting-functions.all()) {\n &:not(.mdc-slider--disabled) {\n @include rail-tick-mark-color_($color, $query: $query);\n }\n}\n\n@mixin thumb-color($color, $query: feature-targeting-functions.all()) {\n &:not(.mdc-slider--disabled) {\n @include thumb-color_($color, $query: $query);\n }\n}\n\n@mixin focus-halo-color($color, $query: feature-targeting-functions.all()) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n &:not(.mdc-slider--disabled) {\n .mdc-slider__focus-ring {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(background-color, $color);\n }\n }\n }\n}\n\n@mixin value-pin-ink-color($color, $query: feature-targeting-functions.all()) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n &:not(.mdc-slider--disabled) {\n .mdc-slider__pin {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(color, $color);\n }\n }\n }\n}\n\n@mixin value-pin-fill-color($color, $query: feature-targeting-functions.all()) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n &:not(.mdc-slider--disabled) {\n .mdc-slider__pin {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(background-color, $color);\n }\n }\n }\n}\n\n@mixin value-pin-fill-color-accessible(\n $color,\n $query: feature-targeting-functions.all()\n) {\n $color-value: theme-variables.prop-value($color);\n $ink-color: if(\n theme-functions.tone($color-value) == 'light',\n text-primary-on-light,\n text-primary-on-dark\n );\n\n @include value-pin-fill-color($color, $query: $query);\n @include value-pin-ink-color($ink-color, $query: $query);\n}\n\n// NOTE: This mixin sets the color of ALL customizable elements in the slider. If new elements are added, this mixin\n// should be updated to cover those additional elements.\n@mixin color-accessible($color, $query: feature-targeting-functions.all()) {\n @include highlight-color($color, $query: $query);\n @include rail-color($color, $query: $query);\n @include rail-tick-mark-color($color, $query: $query);\n @include thumb-color($color, $query: $query);\n @include focus-halo-color($color, $query: $query);\n @include value-pin-fill-color-accessible($color, $query: $query);\n}\n\n//\n// Private\n//\n\n@mixin track_($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n\n &__track-container {\n @include feature-targeting-mixins.targets($feat-structure) {\n position: absolute;\n top: 50%;\n width: 100%;\n height: 2px;\n overflow: hidden;\n }\n\n &::after {\n @include feature-targeting-mixins.targets($feat-structure) {\n position: absolute;\n top: 0;\n left: 0;\n display: block;\n width: 100%;\n height: 100%;\n content: '';\n }\n }\n }\n\n &__track {\n @include feature-targeting-mixins.targets($feat-structure) {\n position: absolute;\n width: 100%;\n height: 100%;\n transform-origin: left top;\n\n @include rtl-mixins.rtl('.mdc-slider') {\n transform-origin: right top;\n }\n }\n\n @include feature-targeting-mixins.targets($feat-animation) {\n will-change: transform;\n }\n }\n}\n\n@mixin track-marker_($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n // stylelint-disable-next-line selector-max-type\n &__track-marker-container {\n @include feature-targeting-mixins.targets($feat-structure) {\n display: flex;\n margin-right: 0;\n margin-left: -1px;\n visibility: hidden;\n\n @include rtl-mixins.rtl('.mdc-slider') {\n margin-right: -1px;\n margin-left: 0;\n }\n\n // Last marker at the very end of the slider (right-most in LTR, left-most in RTL)\n // stylelint-disable-next-line selector-max-type\n &::after {\n display: block;\n width: 2px;\n height: 2px;\n content: '';\n }\n }\n }\n\n &__track-marker {\n @include feature-targeting-mixins.targets($feat-structure) {\n flex: 1;\n\n // stylelint-disable-next-line selector-max-type\n &::after {\n display: block;\n width: 2px;\n height: 2px;\n content: '';\n }\n\n // stylelint-disable-next-line selector-max-type\n &:first-child::after {\n width: 3px;\n }\n }\n }\n}\n\n@mixin thumb_($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n\n &__thumb-container {\n @include feature-targeting-mixins.targets($feat-structure) {\n position: absolute;\n top: 15px;\n left: 0;\n width: 21px;\n // Ensure that touching anywhere within the Y-coordinate space of thumb\n // is considered \"clicking on the thumb\".\n height: 100%;\n user-select: none;\n }\n\n @include feature-targeting-mixins.targets($feat-animation) {\n will-change: transform;\n }\n }\n\n &__thumb {\n @include feature-targeting-mixins.targets($feat-structure) {\n position: absolute;\n top: 0;\n left: 0;\n transform: scale(0.571);\n stroke-width: 3.5;\n }\n\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: transform 100ms ease-out, fill 100ms ease-out,\n stroke 100ms ease-out;\n }\n }\n}\n\n@mixin focus-ring_($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n\n &__focus-ring {\n @include feature-targeting-mixins.targets($feat-structure) {\n width: 21px;\n height: 21px;\n border-radius: 50%;\n opacity: 0;\n }\n\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: transform 266.67ms ease-out, opacity 266.67ms ease-out,\n background-color 266.67ms ease-out;\n }\n }\n}\n\n@mixin pin_($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n\n &__pin {\n @include feature-targeting-mixins.targets($feat-structure) {\n display: flex;\n position: absolute;\n top: 0;\n left: 0;\n align-items: center;\n justify-content: center;\n width: 26px;\n height: 26px;\n margin-top: -2px;\n margin-left: -2px;\n transform: rotate(-45deg) scale(0) translate(0, 0);\n border-radius: 50% 50% 50% 0%;\n\n // Ensuring that the pin is higher than the thumb in the stacking order\n // removes some rendering jank observed in Chrome.\n z-index: 1;\n }\n\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: transform 100ms ease-out;\n }\n }\n\n &__pin-value-marker {\n @include typography-mixins.typography(body2, $query: $query);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n transform: rotate(45deg);\n }\n }\n}\n\n@mixin highlight-color_($color, $query: feature-targeting-functions.all()) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n .mdc-slider__track {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(background-color, $color);\n }\n }\n}\n\n@mixin rail-color_(\n $color,\n $opacity: variables.$baseline-rail-opacity,\n $query: feature-targeting-functions.all()\n) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n .mdc-slider__track-container::after {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(background-color, $color);\n\n opacity: $opacity;\n }\n }\n}\n\n@mixin rail-tick-mark-color_(\n $color,\n $query: feature-targeting-functions.all()\n) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n .mdc-slider__track-marker-container {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(background-color, $color);\n }\n }\n}\n\n@mixin thumb-color_($color, $query: feature-targeting-functions.all()) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n .mdc-slider__thumb {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(fill, $color);\n @include theme-mixins.prop(stroke, $color);\n }\n }\n}\n\n@mixin thumb-stroke-cutout_($color, $query: feature-targeting-functions.all()) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n .mdc-slider__thumb {\n @include feature-targeting-mixins.targets($feat-color) {\n /* @alternate */\n stroke: $color;\n // stylelint-disable-next-line declaration-block-no-duplicate-properties\n stroke: var(--mdc-slider-bg-color-behind-component, $color);\n }\n }\n}\n","//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n$baseline-rail-opacity: 0.26 !default;\n","//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use \"@material/feature-targeting/functions\" as feature-targeting-functions;\n@use \"@material/feature-targeting/mixins\" as feature-targeting-mixins;\n@use \"@material/animation/functions\" as animation-functions;\n@use \"@material/button/mixins\" as button-mixins;\n@use \"@material/icon-button/mixins\" as icon-button-mixins;\n@use \"@material/ripple/mixins\" as ripple-mixins;\n@use \"@material/rtl/mixins\" as rtl-mixins;\n@use \"@material/typography/mixins\" as typography-mixins;\n@use \"@material/elevation/mixins\" as elevation-mixins;\n@use \"@material/shape/mixins\" as shape-mixins;\n@use \"@material/theme/mixins\" as theme-mixins;\n@use \"./variables\";\n\n@mixin core-styles($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n\n // postcss-bem-linter: define snackbar\n .mdc-snackbar {\n @include z-index(variables.$z-index, $query: $query);\n @include viewport-margin(variables.$viewport-margin-narrow, $query: $query);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n display: none;\n position: fixed;\n right: 0;\n bottom: 0;\n left: 0;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n\n // Ignore mouse events on the root layout element.\n pointer-events: none;\n\n // For some reason, iOS Safari displays a tap highlight on the entire snackbar element.\n // Mobile Safari only supports `rgba` values for this property; named values like\n // `transparent` are ignored. From Apple's docs:\n // > This property obeys the alpha value, if specified.\n // > If you don’t specify an alpha value, Safari on iOS applies a default alpha value to the color.\n // > To disable tap highlighting, set the alpha value to 0 (invisible).\n // > If you set the alpha value to 1.0 (opaque), the element is not visible when tapped.\n // See https://github.com/ben-eb/postcss-colormin/issues/1\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n }\n }\n\n @at-root {\n @include fill-color(variables.$fill-color, $query: $query);\n @include label-ink-color(variables.$label-ink-color, $query: $query);\n @include min-width(variables.$min-width, $query: $query);\n @include max-width(variables.$max-width, $query: $query);\n @include elevation(variables.$elevation, $query: $query);\n @include shape-radius(variables.$shape-radius, $query: $query);\n }\n\n .mdc-snackbar--opening,\n .mdc-snackbar--open,\n .mdc-snackbar--closing {\n @include feature-targeting-mixins.targets($feat-structure) {\n display: flex;\n }\n }\n\n .mdc-snackbar--leading {\n @include position-leading($query: $query);\n }\n\n .mdc-snackbar--stacked {\n @include layout-stacked($query: $query);\n }\n\n .mdc-snackbar__surface {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include rtl-mixins.reflexive-property(padding, 0, variables.$padding);\n\n display: flex;\n align-items: center;\n justify-content: flex-start;\n box-sizing: border-box;\n transform: scale(0.8);\n opacity: 0;\n }\n\n .mdc-snackbar--open & {\n @include feature-targeting-mixins.targets($feat-structure) {\n transform: scale(1);\n opacity: 1;\n pointer-events: auto; // Allow mouse events on surface element while snackbar is open\n }\n\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: animation-functions.enter(\n opacity,\n variables.$enter-duration\n ),\n animation-functions.enter(transform, variables.$enter-duration);\n }\n }\n\n .mdc-snackbar--closing & {\n @include feature-targeting-mixins.targets($feat-structure) {\n transform: scale(1);\n }\n\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: animation-functions.exit-permanent(\n opacity,\n variables.$exit-duration\n );\n }\n }\n }\n\n .mdc-snackbar__label {\n @include typography-mixins.typography(\n variables.$label-type-scale,\n $query: $query\n );\n\n @include feature-targeting-mixins.targets($feat-structure) {\n @include rtl-mixins.reflexive-property(padding, 16px, variables.$padding);\n\n width: 100%;\n flex-grow: 1;\n box-sizing: border-box;\n margin: 0;\n\n // 14px top/bottom padding needed to make the height 48px.\n padding-top: 14px;\n padding-bottom: 14px;\n }\n }\n\n // Used to prevent visual jank when announcing label text to screen readers.\n // See the `announce()` function in util.js for details.\n .mdc-snackbar__label::before {\n @include feature-targeting-mixins.targets($feat-structure) {\n display: inline;\n content: attr(data-mdc-snackbar-label-text);\n }\n }\n\n .mdc-snackbar__actions {\n @include feature-targeting-mixins.targets($feat-structure) {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n box-sizing: border-box;\n }\n }\n\n .mdc-snackbar__action {\n @include button-mixins.ink-color(\n variables.$action-ink-color,\n $query: $query\n );\n @include ripple-mixins.states(variables.$action-ink-color, $query: $query);\n }\n\n .mdc-snackbar__dismiss {\n @include icon-button-mixins.ink-color(\n variables.$dismiss-ink-color,\n $query: $query\n );\n }\n\n // Two selectors are needed to increase specificity above `.material-icons`.\n // stylelint-disable-next-line selector-class-pattern\n .mdc-snackbar__dismiss.mdc-snackbar__dismiss {\n @include icon-button-mixins.icon-size(\n variables.$dismiss-icon-size,\n $query: $query\n );\n }\n\n .mdc-snackbar__action + .mdc-snackbar__dismiss {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include rtl-mixins.reflexive-property(margin, variables.$padding, 0);\n }\n }\n // postcss-bem-linter: end\n}\n\n@mixin fill-color($color, $query: feature-targeting-functions.all()) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n .mdc-snackbar__surface {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(background-color, $color);\n }\n }\n}\n\n@mixin label-ink-color($color, $query: feature-targeting-functions.all()) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n .mdc-snackbar__label {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(color, $color);\n }\n }\n}\n\n@mixin shape-radius(\n $radius,\n $rtl-reflexive: false,\n $query: feature-targeting-functions.all()\n) {\n .mdc-snackbar__surface {\n @include shape-mixins.radius($radius, $rtl-reflexive, $query: $query);\n }\n}\n\n@mixin min-width(\n $min-width,\n $mobile-breakpoint: variables.$mobile-breakpoint,\n $query: feature-targeting-functions.all()\n) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n .mdc-snackbar__surface {\n @include feature-targeting-mixins.targets($feat-structure) {\n min-width: $min-width;\n\n // The first media query ensures that snackbars are always 100% width on mobile devices, as required by the spec.\n // The second media query prevents snackbars from being wider than the viewport for large min-width values.\n @media (max-width: $mobile-breakpoint), (max-width: $min-width) {\n min-width: 100%;\n }\n }\n }\n}\n\n@mixin max-width($max-width, $query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n .mdc-snackbar__surface {\n @include feature-targeting-mixins.targets($feat-structure) {\n max-width: $max-width;\n }\n }\n}\n\n@mixin elevation($z-index, $query: feature-targeting-functions.all()) {\n .mdc-snackbar__surface {\n @include elevation-mixins.elevation($z-index, $query: $query);\n }\n}\n\n@mixin viewport-margin($margin, $query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n margin: $margin;\n }\n}\n\n@mixin z-index($z-index, $query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n z-index: $z-index;\n }\n}\n\n@mixin position-leading($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n justify-content: flex-start;\n }\n}\n\n@mixin layout-stacked($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n .mdc-snackbar__label {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include rtl-mixins.reflexive-property(padding, 16px, 0);\n padding-bottom: 12px;\n }\n }\n\n .mdc-snackbar__surface {\n @include feature-targeting-mixins.targets($feat-structure) {\n flex-direction: column;\n align-items: flex-start;\n }\n }\n\n .mdc-snackbar__actions {\n @include feature-targeting-mixins.targets($feat-structure) {\n align-self: flex-end;\n margin-bottom: variables.$padding;\n }\n }\n}\n","//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use \"sass:color\";\n@use \"@material/theme/functions\";\n@use \"@material/theme/variables\"; // for mdc-theme-prop-value() function\n\n$fill-color: color.mix(\n variables.prop-value(on-surface),\n variables.prop-value(surface),\n 80%\n) !default;\n$label-ink-color: rgba(\n variables.prop-value(surface),\n variables.text-emphasis(high)\n) !default;\n$action-ink-color: #bb86fc !default;\n$dismiss-ink-color: rgba(\n variables.prop-value(surface),\n variables.text-emphasis(high)\n) !default;\n\n$label-type-scale: body2 !default;\n$dismiss-icon-size: 18px !default;\n$min-width: 344px !default;\n$max-width: 672px !default;\n$mobile-breakpoint: 480px !default;\n$viewport-margin-narrow: 8px !default;\n$viewport-margin-wide: 24px !default;\n$padding: 8px !default;\n\n$elevation: 6 !default;\n$shape-radius: small !default; // Key from shape.$category-keywords or CSS length value (e.g., 4px)\n$z-index: 8 !default; // One above mdc-dialog\n\n// These variables need to be kept in sync with the values in constants.js.\n$enter-duration: 150ms !default;\n$exit-duration: 75ms !default;\n","//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use \"@material/density/functions\" as density-functions;\n@use \"@material/elevation/mixins\" as elevation-mixins;\n@use \"@material/feature-targeting/functions\" as feature-targeting-functions;\n@use \"@material/feature-targeting/mixins\" as feature-targeting-mixins;\n@use \"@material/ripple/mixins\" as ripple-mixins;\n@use \"@material/rtl/mixins\" as rtl-mixins;\n@use \"@material/theme/mixins\" as theme-mixins;\n@use \"./functions\";\n@use \"./variables\";\n\n//\n// Public\n//\n\n@mixin core-styles($query: feature-targeting-functions.all()) {\n @include without-ripple($query);\n @include ripple($query);\n}\n\n// This API is intended for use by frameworks that may want to separate the ripple-related styles from the other\n// switch styles. It is recommended that most users use `mdc-switch-core-styles` instead.\n@mixin without-ripple($query: feature-targeting-functions.all()) {\n // postcss-bem-linter: define switch\n\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include density(variables.$density-scale, $query: $query);\n\n .mdc-switch {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include base_;\n }\n\n @include toggled-on-track-color(variables.$baseline-theme-color, $query);\n @include toggled-on-thumb-color(variables.$baseline-theme-color, $query);\n @include toggled-off-track-color(\n variables.$toggled-off-track-color,\n $query\n );\n @include toggled-off-thumb-color(\n variables.$toggled-off-thumb-color,\n $query\n );\n }\n\n .mdc-switch__native-control {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include native-control_;\n }\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: functions.transition(transform);\n }\n }\n\n .mdc-switch__track {\n @include track_($query);\n }\n\n .mdc-switch__thumb-underlay {\n @include thumb-underlay_($query);\n }\n\n .mdc-switch__thumb {\n @include thumb_($query);\n }\n\n .mdc-switch--checked {\n @include feature-targeting-mixins.targets($feat-structure) {\n .mdc-switch__track {\n @include track-checked_;\n }\n\n .mdc-switch__thumb-underlay {\n @include thumb-underlay-checked_;\n }\n\n .mdc-switch__native-control {\n @include native-control-checked_;\n }\n }\n }\n\n .mdc-switch--disabled {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include disabled-base_;\n\n .mdc-switch__thumb {\n @include thumb-disabled_;\n }\n\n .mdc-switch__native-control {\n @include native-control-disabled_;\n }\n }\n }\n\n // postcss-bem-linter: end\n}\n\n// This API is intended for use by frameworks that may want to separate the ripple-related styles from the other\n// switch styles. It is recommended that most users use `mdc-switch-core-styles` instead.\n@mixin ripple($query: feature-targeting-functions.all()) {\n @include ripple-mixins.common($query); // COPYBARA_COMMENT_THIS_LINE\n\n .mdc-switch {\n @include toggled-off-ripple-color(\n variables.$toggled-off-ripple-color,\n $query\n );\n }\n\n .mdc-switch__thumb-underlay {\n @include ripple-mixins.surface($query);\n @include ripple-mixins.radius-unbounded(100%, $query);\n @include ripple-mixins.states(\n variables.$baseline-theme-color,\n false,\n $query\n );\n }\n}\n\n@mixin toggled-on-color($color, $query: feature-targeting-functions.all()) {\n @include toggled-on-track-color($color, $query);\n @include toggled-on-thumb-color($color, $query);\n @include toggled-on-ripple-color($color, $query);\n}\n\n@mixin toggled-off-color($color, $query: feature-targeting-functions.all()) {\n @include toggled-off-track-color($color, $query);\n @include toggled-off-thumb-color($color, $query);\n @include toggled-off-ripple-color($color, $query);\n}\n\n@mixin toggled-on-track-color(\n $color,\n $query: feature-targeting-functions.all()\n) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n &.mdc-switch--checked .mdc-switch__track {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(background-color, $color);\n }\n }\n}\n\n@mixin toggled-on-thumb-color(\n $color,\n $query: feature-targeting-functions.all()\n) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n &.mdc-switch--checked .mdc-switch__thumb {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(background-color, $color);\n @include theme-mixins.prop(border-color, $color);\n }\n }\n}\n\n@mixin toggled-on-ripple-color(\n $color,\n $query: feature-targeting-functions.all()\n) {\n &.mdc-switch--checked .mdc-switch__thumb-underlay {\n @include ripple-mixins.states($color, false, $query);\n }\n}\n\n@mixin toggled-off-track-color(\n $color,\n $query: feature-targeting-functions.all()\n) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n &:not(.mdc-switch--checked) .mdc-switch__track {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(background-color, $color);\n }\n }\n}\n\n@mixin toggled-off-thumb-color(\n $color,\n $query: feature-targeting-functions.all()\n) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n &:not(.mdc-switch--checked) .mdc-switch__thumb {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(background-color, $color);\n @include theme-mixins.prop(border-color, $color);\n }\n }\n}\n\n@mixin toggled-off-ripple-color(\n $color,\n $query: feature-targeting-functions.all()\n) {\n &:not(.mdc-switch--checked) .mdc-switch__thumb-underlay {\n @include ripple-mixins.states($color, false, $query);\n }\n}\n\n///\n/// Sets density scale for switch.\n///\n/// @param {Number | String} $density-scale - Density scale value for component.\n/// Supported density scale values are `-5`, `-4`, `-3`, `-2`, `-1`,\n/// `0` (default).\n///\n@mixin density($density-scale, $query: feature-targeting-functions.all()) {\n $size: density-functions.prop-value(\n $density-config: variables.$density-config,\n $density-scale: $density-scale,\n $property-name: size,\n );\n\n @include ripple-size($size, $query: $query);\n}\n\n@mixin ripple-size($ripple-size, $query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n // Position for the tap target that contains the thumb to align the thumb\n // correctly offset from the track.\n $tap-target-initial-position: -$ripple-size / 2 + variables.$thumb-diameter /\n 2 - variables.$thumb-offset;\n // Value to cover the whole switch area (including the ripple) with the\n // native control.\n $native-control-width: variables.$track-width +\n ($ripple-size - variables.$thumb-diameter) + variables.$thumb-offset * 2;\n\n .mdc-switch__thumb-underlay {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include rtl-mixins.reflexive-position(\n left,\n $tap-target-initial-position\n );\n\n // Ensures the knob is centered on the track.\n top: -(($ripple-size - variables.$track-height) / 2);\n width: $ripple-size;\n height: $ripple-size;\n }\n }\n\n .mdc-switch__native-control {\n @include feature-targeting-mixins.targets($feat-structure) {\n width: $native-control-width;\n height: $ripple-size;\n }\n }\n}\n\n///\n/// Customizes ripple opacities surrounding the thumb in `hover`, `focus`, or `press` states\n/// The customizations apply to both on and off switches to ensure symmetry\n/// @param {map} $opacity-map - map specifying custom opacity of zero or more states\n///\n@mixin ripple-states-opacity(\n $opacity-map: (),\n $query: feature-targeting-functions.all()\n) {\n // Ensure sufficient specificity to override base state opacities\n &.mdc-switch .mdc-switch__thumb-underlay {\n @include ripple-mixins.states-opacities($opacity-map, $query: $query);\n }\n}\n\n//\n// Private\n//\n\n// Structure\n@mixin base_ {\n display: inline-block;\n position: relative;\n outline: none;\n user-select: none;\n}\n\n@mixin track_($query: feature-targeting-functions.all()) {\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n box-sizing: border-box;\n width: variables.$track-width;\n height: variables.$track-height;\n border: 1px solid transparent;\n border-radius: variables.$track-height / 2;\n opacity: 0.38;\n }\n\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: functions.transition(opacity),\n functions.transition(background-color), functions.transition(border-color);\n }\n}\n\n@mixin thumb-underlay_($query: feature-targeting-functions.all()) {\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n $feat-color: feature-targeting-functions.create-target($query, color);\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n transform: translateX(0);\n }\n\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: functions.transition(transform),\n functions.transition(background-color), functions.transition(border-color);\n }\n}\n\n@mixin native-control_ {\n @include rtl-mixins.reflexive-position(left, 0);\n\n position: absolute;\n top: 0;\n margin: 0;\n opacity: 0;\n cursor: pointer;\n pointer-events: auto;\n}\n\n@mixin thumb_($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n @include elevation-mixins.elevation($z-value: 2, $query: $query);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n box-sizing: border-box;\n width: variables.$thumb-diameter;\n height: variables.$thumb-diameter;\n border: variables.$thumb-diameter / 2 solid;\n border-radius: 50%;\n // Allow events to go through to the native control, necessary for IE and Edge.\n pointer-events: none;\n z-index: 1;\n }\n}\n\n// Checked state\n\n@mixin track-checked_ {\n opacity: 0.54;\n}\n\n@mixin thumb-underlay-checked_ {\n transform: translateX(variables.$thumb-active-margin);\n\n @include rtl-mixins.rtl {\n transform: translateX(-(variables.$thumb-active-margin));\n }\n}\n\n@mixin native-control-checked_ {\n // Translate the native control the opposite direction so that the tap target stays the same.\n transform: translateX(-(variables.$thumb-active-margin));\n\n @include rtl-mixins.rtl {\n transform: translateX(variables.$thumb-active-margin);\n }\n}\n\n// Disabled state\n\n@mixin disabled-base_ {\n opacity: 0.38;\n pointer-events: none;\n}\n\n@mixin thumb-disabled_ {\n border-width: 1px; // In high contrast mode, only show outline of knob.\n}\n\n@mixin native-control-disabled_ {\n cursor: default;\n pointer-events: none;\n}\n","//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use \"@material/density/variables\" as density-variables;\n\n$track-width: 32px !default;\n$track-height: 14px !default;\n$thumb-diameter: 20px !default;\n$ripple-size: 48px !default;\n\n$minimum-size: 28px !default;\n$maximum-size: $ripple-size !default;\n$density-scale: density-variables.$default-scale !default;\n$density-config: (\n size: (\n minimum: $minimum-size,\n default: $maximum-size,\n maximum: $maximum-size,\n ),\n) !default;\n\n// Amount the edge of the thumb should be offset from the edge of the track.\n$thumb-offset: 4px !default;\n\n$thumb-active-margin: $track-width - $thumb-diameter + $thumb-offset * 2 !default;\n\n$toggled-off-thumb-color: surface !default;\n$toggled-off-track-color: on-surface !default;\n$toggled-off-ripple-color: #9e9e9e !default;\n$disabled-thumb-color: surface !default;\n$disabled-track-color: on-surface !default;\n\n$baseline-theme-color: secondary !default;\n","//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use \"@material/feature-targeting/functions\";\n@use \"@material/feature-targeting/mixins\" as feature-targeting-mixins;\n@use \"@material/ripple/mixins\" as ripple-mixins;\n@use \"@material/theme/mixins\" as theme-mixins;\n@use \"@material/typography/mixins\" as typography-mixins;\n@use \"@material/rtl/mixins\" as rtl-mixins;\n@use \"@material/tab-indicator/mixins\" as tab-indicator-mixins;\n@use \"./variables\";\n\n// Public mixins\n\n@mixin core-styles($query: functions.all()) {\n @include without-ripple($query);\n @include ripple($query);\n}\n\n// This API is intended for use by frameworks that may want to separate the ripple-related styles\n// from the other tah styles. It is recommended that most users use `mdc-tab-core-styles` instead.\n@mixin without-ripple($query: functions.all()) {\n $feat-structure: functions.create-target($query, structure);\n $feat-animation: functions.create-target($query, animation);\n\n // postcss-bem-linter: define tab\n\n .mdc-tab {\n @include base_($query);\n }\n\n .mdc-tab--min-width {\n @include feature-targeting-mixins.targets($feat-structure) {\n flex: 0 1 auto;\n }\n }\n\n .mdc-tab__content {\n @include content_($query);\n }\n\n .mdc-tab__text-label {\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: 150ms color linear;\n }\n\n @include feature-targeting-mixins.targets($feat-structure) {\n display: inline-block;\n // Setting line-height here overrides the line-height from the typography\n // mixin above. The line-height needs to be overridden so that the spacing\n // between the text label and the icon as well as the text label and the\n // bottom of the tab remain the same.\n line-height: 1;\n z-index: 2;\n }\n }\n\n .mdc-tab__icon {\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: 150ms color linear;\n }\n\n @include feature-targeting-mixins.targets($feat-structure) {\n width: variables.$icon-size;\n height: variables.$icon-size;\n font-size: variables.$icon-size;\n z-index: 2;\n }\n }\n\n .mdc-tab--stacked {\n @include stacked_($query);\n }\n\n .mdc-tab--active {\n @include active_($query);\n }\n\n .mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon + .mdc-tab__text-label {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include rtl-mixins.reflexive-box(padding, left, 8px);\n }\n }\n\n // postcss-bem-linter: end\n}\n\n// This API is intended for use by frameworks that may want to separate the ripple-related styles\n// from the other tah styles. It is recommended that most users use `mdc-tab-core-styles` instead.\n@mixin ripple($query: functions.all()) {\n @include ripple-mixins.common($query); // COPYBARA_COMMENT_THIS_LINE\n\n .mdc-tab__ripple {\n @include ripple_($query);\n }\n}\n\n@mixin horizontal-padding($padding, $query: functions.all()) {\n $feat-structure: functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n padding-right: $padding;\n padding-left: $padding;\n }\n}\n\n@mixin text-label-color($color, $query: functions.all()) {\n $feat-color: functions.create-target($query, color);\n\n .mdc-tab__text-label {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(color, $color);\n }\n }\n}\n\n@mixin icon-color($color, $query: functions.all()) {\n $feat-color: functions.create-target($query, color);\n\n .mdc-tab__icon {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(color, $color);\n\n fill: currentColor;\n }\n }\n}\n\n@mixin states-color($color, $query: functions.all()) {\n .mdc-tab__ripple {\n @include ripple-mixins.states($color, $query: $query);\n }\n}\n\n@mixin ink-color($color, $query: functions.all()) {\n @include icon-color($color, $query);\n @include states-color($color, $query);\n @include text-label-color($color, $query);\n}\n\n@mixin active-text-label-color($color, $query: functions.all()) {\n &.mdc-tab--active {\n @include text-label-color($color, $query);\n }\n}\n\n@mixin active-icon-color($color, $query: functions.all()) {\n &.mdc-tab--active {\n @include icon-color($color, $query);\n }\n}\n\n@mixin active-states-color($color, $query: functions.all()) {\n &.mdc-tab--active {\n @include states-color($color, $query);\n }\n}\n\n@mixin parent-positioning($query: functions.all()) {\n $feat-structure: functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n position: relative;\n }\n}\n\n@mixin fixed-width($width, $query: functions.all()) {\n $feat-structure: functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n flex: 0 1 $width;\n }\n}\n\n///\n/// Sets tab height\n///\n/// @param {Number} $height Height value in `px`.\n///\n@mixin height($height, $query: functions.all()) {\n $feat-structure: functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n height: $height;\n }\n}\n\n///\n/// Sets tab text transform\n///\n/// @param {String} $transform The text-transform property to apply.\n///\n@mixin text-transform($transform, $query: functions.all()) {\n $feat-structure: functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n text-transform: $transform;\n }\n}\n\n//\n// Private\n//\n\n@mixin base_($query: functions.all()) {\n $feat-structure: functions.create-target($query, structure);\n\n @include typography-mixins.typography(button, $query);\n @include text-label-color(variables.$text-label-color-default, $query);\n @include icon-color(variables.$icon-color-default, $query);\n @include horizontal-padding(variables.$horizontal-padding, $query);\n @include tab-indicator-mixins.surface($query);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n display: flex;\n flex: 1 0 auto;\n justify-content: center;\n box-sizing: border-box;\n // Explicitly setting margin to 0 is to override safari default margin for button elements.\n margin: 0;\n padding-top: 0;\n padding-bottom: 0;\n border: none;\n outline: none;\n background: none;\n text-align: center;\n white-space: nowrap;\n cursor: pointer;\n -webkit-appearance: none;\n z-index: 1;\n\n // Firefox still draws a dotted border around focused buttons unless specifically overridden.\n &::-moz-focus-inner {\n padding: 0;\n border: 0;\n }\n }\n}\n\n@mixin ripple_($query: functions.all()) {\n $feat-structure: functions.create-target($query, structure);\n\n @include ripple-mixins.surface($query);\n @include ripple-mixins.radius-bounded($query: $query);\n @include ripple-mixins.states($color: primary, $query: $query);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow: hidden;\n }\n}\n\n@mixin content_($query: functions.all()) {\n $feat-structure: functions.create-target($query, structure);\n\n @include tab-indicator-mixins.surface($query);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n display: flex;\n align-items: center;\n justify-content: center;\n height: inherit;\n pointer-events: none;\n }\n}\n\n@mixin stacked_($query: functions.all()) {\n $feat-structure: functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n .mdc-tab__content {\n flex-direction: column;\n align-items: center;\n justify-content: center;\n }\n\n .mdc-tab__text-label {\n padding-top: 6px;\n padding-bottom: 4px;\n }\n }\n}\n\n@mixin active_($query: functions.all()) {\n $feat-animation: functions.create-target($query, animation);\n\n @include text-label-color(variables.$text-label-color-active, $query);\n @include icon-color(variables.$icon-color-active, $query);\n\n .mdc-tab__text-label,\n .mdc-tab__icon {\n @include feature-targeting-mixins.targets($feat-animation) {\n transition-delay: 100ms;\n }\n }\n}\n","//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use \"@material/theme/variables\"; // for mdc-theme-prop-value()\n\n$icon-size: 24px !default;\n$height: 48px !default;\n$stacked-height: 72px !default;\n$horizontal-padding: 24px !default;\n$text-label-opacity: 0.6 !default;\n$icon-opacity: 0.54 !default;\n$text-label-color-default: rgba(\n variables.prop-value(on-surface),\n $text-label-opacity\n) !default;\n$icon-color-default: rgba(\n variables.prop-value(on-surface),\n $icon-opacity\n) !default;\n$text-label-color-active: primary !default;\n$icon-color-active: primary !default;\n","//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use \"@material/animation/variables\";\n@use \"@material/theme/mixins\" as theme-mixins;\n@use \"@material/feature-targeting/functions\";\n@use \"@material/feature-targeting/mixins\" as feature-targeting-mixins;\n\n@mixin core-styles($query: functions.all()) {\n $feat-structure: functions.create-target($query, structure);\n $feat-animation: functions.create-target($query, animation);\n\n // postcss-bem-linter: define tab-indicator\n\n .mdc-tab-indicator {\n @include base_($query);\n }\n\n .mdc-tab-indicator__content {\n @include feature-targeting-mixins.targets($feat-structure) {\n transform-origin: left;\n opacity: 0;\n }\n }\n\n .mdc-tab-indicator__content--underline {\n @include feature-targeting-mixins.targets($feat-structure) {\n align-self: flex-end;\n box-sizing: border-box;\n width: 100%;\n border-top-style: solid;\n }\n }\n\n .mdc-tab-indicator__content--icon {\n @include feature-targeting-mixins.targets($feat-structure) {\n align-self: center;\n margin: 0 auto;\n }\n }\n\n .mdc-tab-indicator--active .mdc-tab-indicator__content {\n @include feature-targeting-mixins.targets($feat-structure) {\n opacity: 1;\n }\n }\n\n // Slide by default\n .mdc-tab-indicator .mdc-tab-indicator__content {\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: 250ms transform variables.$standard-curve-timing-function;\n }\n }\n\n // --no-transition is applied in cases where styles need to be applied immediately to set up a transition\n .mdc-tab-indicator--no-transition .mdc-tab-indicator__content {\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: none;\n }\n }\n\n .mdc-tab-indicator--fade .mdc-tab-indicator__content {\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: 150ms opacity linear;\n }\n }\n\n // postcss-bem-linter: ignore\n .mdc-tab-indicator--active.mdc-tab-indicator--fade\n .mdc-tab-indicator__content {\n @include feature-targeting-mixins.targets($feat-animation) {\n transition-delay: 100ms;\n }\n }\n\n // postcss-bem-linter: end\n}\n\n@mixin surface($query: functions.all()) {\n $feat-structure: functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n position: relative;\n }\n}\n\n@mixin underline-color($color, $query: functions.all()) {\n $feat-color: functions.create-target($query, color);\n\n .mdc-tab-indicator__content--underline {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(border-color, $color);\n }\n }\n}\n\n@mixin underline-height($height, $query: functions.all()) {\n $feat-structure: functions.create-target($query, structure);\n\n .mdc-tab-indicator__content--underline {\n @include feature-targeting-mixins.targets($feat-structure) {\n border-top-width: $height;\n }\n }\n}\n\n@mixin underline-top-corner-radius($radius, $query: functions.all()) {\n $feat-structure: functions.create-target($query, structure);\n\n .mdc-tab-indicator__content--underline {\n @include feature-targeting-mixins.targets($feat-structure) {\n border-top-left-radius: $radius;\n border-top-right-radius: $radius;\n }\n }\n}\n\n@mixin icon-color($color, $query: functions.all()) {\n $feat-color: functions.create-target($query, color);\n\n .mdc-tab-indicator__content--icon {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(color, $color);\n }\n }\n}\n\n@mixin icon-height($height, $query: functions.all()) {\n $feat-structure: functions.create-target($query, structure);\n\n .mdc-tab-indicator__content--icon {\n @include feature-targeting-mixins.targets($feat-structure) {\n height: $height;\n font-size: $height;\n }\n }\n}\n\n//\n// Private\n//\n\n@mixin base_($query) {\n $feat-structure: functions.create-target($query, structure);\n\n @include underline-color(primary, $query);\n @include icon-color(secondary, $query);\n @include underline-height(2px, $query);\n @include icon-height(34px, $query);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n display: flex;\n position: absolute;\n top: 0;\n left: 0;\n justify-content: center;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: 1;\n }\n}\n","/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n@use \"./mixins\";\n@include mixins.core-styles;\n","//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use \"@material/animation/variables\" as animation-variables;\n@use \"@material/density/functions\" as density-functions;\n@use \"@material/feature-targeting/functions\" as feature-targeting-functions;\n@use \"@material/feature-targeting/mixins\" as feature-targeting-mixins;\n@use \"@material/tab-scroller/mixins\" as tab-scroller-mixins;\n@use \"@material/tab/mixins\" as tab-mixins;\n@use \"./variables\";\n\n@mixin core-styles($query: feature-targeting-functions.all()) {\n // postcss-bem-linter: define tab-bar\n .mdc-tab-bar {\n @include width(100%, $query);\n }\n\n @include density(variables.$density-scale, $query: $query);\n @include stacked-density(variables.$stacked-density-scale, $query: $query);\n // postcss-bem-linter: end\n}\n\n@mixin width($width, $query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n width: $width;\n }\n}\n\n///\n/// Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density()` mixin for stacked tab bar\n/// variant.\n///\n/// @param {Number} $density-scale Density scale value. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n///\n@mixin density($density-scale, $query: feature-targeting-functions.all()) {\n $height: density-functions.prop-value(\n $density-config: variables.$density-config,\n $density-scale: $density-scale,\n $property-name: height,\n );\n\n .mdc-tab {\n @include tab-mixins.height($height, $query: $query);\n }\n}\n\n///\n/// Sets density scale to stacked tab bar variant.\n///\n/// @param {Number} $density-scale Density scale value. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.\n///\n@mixin stacked-density(\n $density-scale,\n $query: feature-targeting-functions.all()\n) {\n $height: density-functions.prop-value(\n $density-config: variables.$stacked-density-config,\n $density-scale: $density-scale,\n $property-name: height,\n );\n\n .mdc-tab--stacked {\n @include tab-mixins.height($height, $query: $query);\n }\n}\n\n///\n/// Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition`\n/// mixin.\n///\n/// @param {Number | String} $duration-ms - Duration (in ms) of the animation.\n/// @param {String} $timing-function - Optionally overrides the default animation timing function.\n///\n@mixin tab-scroller-transition(\n $duration-ms,\n $timing-function: animation-variables.$standard-curve-timing-function,\n $query: feature-targeting-functions.all()\n) {\n .mdc-tab-scroller {\n @include tab-scroller-mixins.transition(\n $duration-ms,\n $timing-function: $timing-function,\n $query: $query\n );\n }\n}\n","/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n@use \"./mixins\";\n@include mixins.core-styles;\n","/**\n * @license\n * Copyright 2018 Google Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\n@use \"./mixins\";\n@include mixins.core-styles;\n","//\n// Copyright 2018 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use \"@material/animation/variables\" as animation-variables;\n@use \"@material/tab/mixins\" as tab-mixins;\n@use \"@material/feature-targeting/functions\";\n@use \"@material/feature-targeting/mixins\" as feature-targeting-mixins;\n@use \"./variables\";\n\n///\n/// Sets the CSS transition for the tab scrolling animation.\n///\n/// @param {Number | String} $duration-ms - Duration (in ms) of the animation.\n/// @param {String} $timing-function - Optionally overrides the default animation timing function.\n///\n@mixin transition(\n $duration-ms,\n $timing-function: animation-variables.$standard-curve-timing-function,\n $query: functions.all()\n) {\n $feat-animation: functions.create-target($query, animation);\n\n &.mdc-tab-scroller--animating .mdc-tab-scroller__scroll-content {\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: $duration-ms transform $timing-function;\n }\n }\n}\n\n@mixin core-styles($query: functions.all()) {\n $feat-structure: functions.create-target($query, structure);\n $feat-animation: functions.create-target($query, animation);\n\n // postcss-bem-linter: define tab-scroller\n .mdc-tab-scroller {\n @include transition(\n $duration-ms: variables.$transition-duration,\n $query: $query\n );\n\n @include feature-targeting-mixins.targets($feat-structure) {\n overflow-y: hidden;\n }\n }\n\n // Selector for test element used to feature-detect horizontal scrollbar height\n .mdc-tab-scroller__test {\n @include feature-targeting-mixins.targets($feat-structure) {\n position: absolute;\n top: -9999px;\n width: 100px;\n height: 100px;\n overflow-x: scroll;\n }\n }\n\n .mdc-tab-scroller__scroll-area {\n @include feature-targeting-mixins.targets($feat-structure) {\n -webkit-overflow-scrolling: touch;\n display: flex;\n overflow-x: hidden;\n }\n }\n\n .mdc-tab-scroller__scroll-area,\n .mdc-tab-scroller__test {\n @include feature-targeting-mixins.targets($feat-structure) {\n &::-webkit-scrollbar {\n display: none;\n }\n }\n }\n\n // This modifier class will be added in JS after computing the OS scrollbar size in order to hide the scrollbar.\n .mdc-tab-scroller__scroll-area--scroll {\n @include feature-targeting-mixins.targets($feat-structure) {\n overflow-x: scroll;\n }\n }\n\n .mdc-tab-scroller__scroll-content {\n @include scroll-content_($query);\n }\n\n .mdc-tab-scroller--align-start .mdc-tab-scroller__scroll-content {\n @include feature-targeting-mixins.targets($feat-structure) {\n justify-content: flex-start;\n }\n }\n\n .mdc-tab-scroller--align-end .mdc-tab-scroller__scroll-content {\n @include feature-targeting-mixins.targets($feat-structure) {\n justify-content: flex-end;\n }\n }\n\n .mdc-tab-scroller--align-center .mdc-tab-scroller__scroll-content {\n @include feature-targeting-mixins.targets($feat-structure) {\n justify-content: center;\n }\n }\n\n .mdc-tab-scroller--animating {\n .mdc-tab-scroller__scroll-area {\n @include feature-targeting-mixins.targets($feat-animation) {\n -webkit-overflow-scrolling: auto;\n }\n }\n }\n\n // postcss-bem-linter: end\n}\n\n//\n// Private\n//\n\n@mixin scroll-content_($query: functions.all()) {\n $feat-structure: functions.create-target($query, structure);\n $feat-animation: functions.create-target($query, animation);\n\n @include tab-mixins.parent-positioning($query);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n display: flex;\n flex: 1 0 auto;\n transform: none;\n }\n\n @include feature-targeting-mixins.targets($feat-animation) {\n will-change: transform;\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 \"@material/density/functions\" as density-functions;\n@use \"@material/floating-label/mixins\" as floating-label-mixins;\n@use \"@material/floating-label/variables\" as floating-label-variables;\n@use \"@material/line-ripple/mixins\" as line-ripple-mixins;\n@use \"@material/notched-outline/mixins\" as notched-outline-mixins;\n@use \"@material/notched-outline/variables\" as notched-outline-variables;\n@use \"@material/ripple/mixins\" as ripple-mixins;\n@use \"@material/ripple/functions\" as ripple-functions;\n@use \"@material/theme/mixins\" as theme-mixins;\n@use \"@material/shape/mixins\" as shape-mixins;\n@use \"@material/shape/functions\" as shape-functions;\n@use \"@material/feature-targeting/functions\" as feature-targeting-functions;\n@use \"@material/feature-targeting/mixins\" as feature-targeting-mixins;\n@use \"@material/typography/mixins\" as typography-mixins;\n@use \"helper-text/mixins\" as helper-text-mixins;\n@use \"character-counter/mixins\" as character-counter-mixins;\n@use \"icon/mixins\" as icon-mixins;\n@use \"icon/variables\" as icon-variables;\n@use \"./variables\";\n@use \"./functions\";\n@use \"@material/rtl/mixins\" as rtl-mixins;\n\n@mixin core-styles($query: feature-targeting-functions.all()) {\n @include ripple($query);\n @include without-ripple($query);\n @include helper-text-mixins.helper-text-core-styles($query);\n @include character-counter-mixins.character-counter-core-styles($query);\n @include icon-mixins.icon-core-styles($query);\n}\n\n@mixin without-ripple($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n // Baseline\n // postcss-bem-linter: define text-field\n .mdc-text-field {\n @include _base($query);\n }\n\n .mdc-text-field__input {\n @include _input($query);\n\n @include placeholder-selector_ {\n @include _input-placeholder($query);\n }\n\n // Always show placeholder for text fields that has no\n // label and show only on focused state when label is present.\n .mdc-text-field--fullwidth &,\n .mdc-text-field--no-label &,\n .mdc-text-field--focused & {\n @include placeholder-selector_ {\n @include _input-placeholder-visible($query);\n }\n }\n }\n\n .mdc-text-field__affix {\n @include _affix($query: $query);\n\n .mdc-text-field--label-floating &,\n .mdc-text-field--no-label & {\n @include _affix-visible($query: $query);\n }\n }\n\n .mdc-text-field__affix--prefix {\n @include _prefix($query: $query);\n\n .mdc-text-field--end-aligned & {\n @include _prefix-end-aligned($query: $query);\n }\n }\n\n .mdc-text-field__affix--suffix {\n @include _suffix($query: $query);\n\n .mdc-text-field--end-aligned & {\n @include _suffix-end-aligned($query: $query);\n }\n }\n\n // stylelint-disable-next-line plugin/selector-bem-pattern\n // Move label when text-field gets auto-filled in Chrome.\n .mdc-text-field__input:-webkit-autofill + .mdc-floating-label {\n @include feature-targeting-mixins.targets($feat-structure) {\n transform: translateY(-50%) scale(0.75);\n cursor: auto;\n }\n }\n\n // Variants\n\n .mdc-text-field--filled {\n @include _filled($query);\n\n &.mdc-text-field--no-label {\n @include _filled-no-label($query);\n }\n }\n\n .mdc-text-field--outlined {\n @include outlined_($query);\n }\n\n // Other Variations\n\n .mdc-text-field--textarea {\n @include textarea_($query);\n\n .mdc-text-field__input {\n @include _textarea-input($query);\n }\n\n &.mdc-text-field--filled {\n @include _textarea-filled($query);\n\n .mdc-text-field__input {\n @include _textarea-filled-input($query);\n }\n\n &.mdc-text-field--no-label {\n .mdc-text-field__input {\n @include _textarea-filled-no-label-input($query);\n }\n }\n }\n\n &.mdc-text-field--outlined {\n @include _textarea-outlined($query);\n\n .mdc-text-field__input {\n @include _textarea-outlined-input($query);\n }\n\n .mdc-floating-label {\n @include _textarea-outlined-floating-label($query);\n }\n }\n\n &.mdc-text-field--with-internal-counter {\n .mdc-text-field__input {\n @include _textarea-input-with-internal-counter($query);\n }\n\n .mdc-text-field-character-counter {\n @include _textarea-internal-counter($query);\n }\n }\n }\n\n // Resizer element does not need to be under mdc-text-field--textarea, that\n // just adds specificity\n .mdc-text-field__resizer {\n @include _textarea-resizer($query);\n\n .mdc-text-field--filled & {\n @include _textarea-filled-resizer($query);\n\n .mdc-text-field__input,\n .mdc-text-field-character-counter {\n @include _textarea-filled-resizer-children($query);\n }\n }\n\n .mdc-text-field--outlined & {\n @include _textarea-outlined-resizer($query);\n\n .mdc-text-field__input,\n .mdc-text-field-character-counter {\n @include _textarea-outlined-resizer-children($query);\n }\n }\n }\n\n .mdc-text-field--fullwidth {\n @include fullwidth_($query);\n }\n\n .mdc-text-field--with-leading-icon {\n &.mdc-text-field--filled {\n @include with-leading-icon_($query);\n }\n\n &.mdc-text-field--outlined {\n @include outlined-with-leading-icon_($query);\n }\n }\n\n .mdc-text-field--with-trailing-icon {\n &.mdc-text-field--filled {\n @include _with-trailing-icon($query);\n }\n\n &.mdc-text-field--outlined {\n @include _outlined-with-trailing-icon($query);\n }\n }\n\n .mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon {\n &.mdc-text-field--filled {\n @include _with-leading-and-trailing-icon($query);\n }\n }\n\n // postcss-bem-linter: define text-field-helper-text\n // stylelint-disable plugin/selector-bem-pattern\n .mdc-text-field-helper-line {\n @include feature-targeting-mixins.targets($feat-structure) {\n display: flex;\n justify-content: space-between;\n box-sizing: border-box;\n }\n\n .mdc-text-field + & {\n @include feature-targeting-mixins.targets($feat-structure) {\n padding-right: variables.$helper-line-padding;\n padding-left: variables.$helper-line-padding;\n }\n }\n }\n // stylelint-enable plugin/selector-bem-pattern\n // postcss-bem-linter: end\n\n // mdc-form-field tweaks to align text field label correctly\n // stylelint-disable selector-max-type\n .mdc-form-field > .mdc-text-field + label {\n @include feature-targeting-mixins.targets($feat-structure) {\n align-self: flex-start;\n }\n }\n // stylelint-enable selector-max-type\n\n // States\n .mdc-text-field--focused {\n @include focused_($query);\n\n &.mdc-text-field--outlined {\n @include _focused-outlined($query);\n\n &.mdc-text-field--textarea {\n @include _focused-outlined-textarea($query);\n }\n }\n }\n\n .mdc-text-field--invalid {\n @include invalid_($query);\n }\n\n .mdc-text-field--disabled {\n @include disabled_($query);\n\n &.mdc-text-field--filled {\n @include _disabled-filled($query);\n }\n\n .mdc-text-field__input {\n @include _disabled-input($query);\n }\n }\n\n .mdc-text-field--end-aligned {\n @include end-aligned_($query);\n }\n\n .mdc-text-field--ltr-text {\n @include _ltr-text($query);\n\n &.mdc-text-field--end-aligned {\n @include _ltr-text-end-aligned($query);\n }\n }\n}\n\n// This API is intended for use by frameworks that may want to separate the ripple-related styles\n// from the other text field styles. It is recommended that most users use `mdc-text-field-core-styles` instead.\n@mixin ripple($query: feature-targeting-functions.all()) {\n @include ripple-mixins.common($query); // COPYBARA_COMMENT_THIS_LINE\n\n .mdc-text-field--filled {\n @include ripple-mixins.surface(\n $query: $query,\n $ripple-target: variables.$ripple-target\n );\n @include ripple-mixins.radius-bounded(\n $query: $query,\n $ripple-target: variables.$ripple-target\n );\n }\n\n #{variables.$ripple-target} {\n @include ripple-mixins.target-common($query: $query);\n }\n}\n\n///\n/// Sets density scale for default text field variant.\n///\n/// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values `-4`,\n/// `-3`, `-2`, `-1`, `0`. Default is `0`.\n/// @param {Number} $minimum-height-for-filled-label Sets the minimum height for\n/// filled textfields at which to allow floating labels.\n///\n@mixin density(\n $density-scale,\n $minimum-height-for-filled-label: variables.$minimum-height-for-filled-label,\n $query: feature-targeting-functions.all()\n) {\n $height: density-functions.prop-value(\n $density-config: variables.$density-config,\n $density-scale: $density-scale,\n $property-name: height,\n );\n\n @include height(\n $height,\n $minimum-height-for-filled-label: $minimum-height-for-filled-label,\n $query: $query\n );\n // TODO(b/151839219): resize icons and adjust label position\n // @if $density-scale < 0 {\n // @include icon-mixins.size(icon-variables.$dense-icon-size);\n // }\n}\n\n///\n/// Sets density scale for outlined text field (Excluding outlined text field with leading icon).\n///\n/// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values `-4`,\n/// `-3`, `-2`, `-1`, `0`. Default is `0`.\n///\n@mixin outlined-density(\n $density-scale,\n $query: feature-targeting-functions.all()\n) {\n $height: density-functions.prop-value(\n $density-config: variables.$density-config,\n $density-scale: $density-scale,\n $property-name: height,\n );\n\n @include outlined-height($height, $query: $query);\n // TODO(b/151839219): resize icons and adjust label position\n // @if $density-scale < 0 {\n // @include icon-mixins.size(icon-variables.$dense-icon-size);\n // }\n}\n\n///\n/// Sets density scale for outlined text field with leading icon.\n///\n/// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values `-4`,\n/// `-3`, `-2`, `-1`, `0`. Default is `0`.\n///\n@mixin outlined-with-leading-icon-density(\n $density-scale,\n $query: feature-targeting-functions.all()\n) {\n $height: density-functions.prop-value(\n $density-config: variables.$density-config,\n $density-scale: $density-scale,\n $property-name: height,\n );\n\n @include outlined-with-leading-icon-height($height, $query: $query);\n // TODO(b/151839219): resize icons and adjust label position\n // @if $density-scale < 0 {\n // @include icon-mixins.size(icon-variables.$dense-icon-size);\n // }\n}\n\n///\n/// Sets density scale for filled textarea.\n///\n/// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values `-4`,\n/// `-3`, `-2`, `-1`, `0`. Default is `0`.\n///\n@mixin filled-textarea-density(\n $density-scale,\n $query: feature-targeting-functions.all()\n) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n $textfield-height: density-functions.prop-value(\n $density-config: variables.$density-config,\n $density-scale: $density-scale,\n $property-name: height,\n );\n $no-label-margin-top: density-functions.prop-value(\n $density-config: variables.$textarea-filled-no-label-density-config,\n $density-scale: $density-scale / 2,\n $property-name: margin-top,\n );\n $no-label-margin-bottom: density-functions.prop-value(\n $density-config: variables.$textarea-filled-no-label-density-config,\n $density-scale: $density-scale / 2,\n $property-name: margin-bottom,\n );\n\n // Textarea mixins require two modifier classes since two are used internally\n // for styles (textarea and filled). An extra class is added for the public\n // mixin so that only a single public class is needed for specificity.\n &.mdc-text-field--filled {\n .mdc-text-field__resizer {\n @include feature-targeting-mixins.targets($feat-structure) {\n min-height: $textfield-height;\n }\n }\n\n @if $density-scale >= -1 {\n $keyframe-suffix: text-field-filled-#{$density-scale};\n $label-top: density-functions.prop-value(\n $density-config: variables.$textarea-filled-label-density-config,\n $density-scale: $density-scale / 2,\n $property-name: top,\n );\n\n // Adjust the floating position and animation/keyframes of the floating\n // label by the new position of the resting label\n $label-top-difference: variables.$textarea-outlined-label-top -\n $label-top;\n\n // Floating label position\n @include floating-label-mixins.float-position(\n variables.$textarea-filled-label-position-y - $label-top-difference,\n $query: $query\n );\n\n // Floating label animation\n @include floating-label-mixins.shake-animation(\n $keyframe-suffix,\n $query: $query\n );\n @at-root {\n @include floating-label-mixins.shake-keyframes(\n $keyframe-suffix,\n variables.$textarea-filled-label-position-y - $label-top-difference,\n 0%,\n $query: $query\n );\n }\n\n // Resting label position\n .mdc-floating-label {\n @include feature-targeting-mixins.targets($feat-structure) {\n top: $label-top;\n }\n }\n\n $margin-bottom: density-functions.prop-value(\n $density-config: variables.$textarea-filled-density-config,\n $density-scale: $density-scale,\n $property-name: margin-bottom,\n );\n\n .mdc-text-field__input {\n @include feature-targeting-mixins.targets($feat-structure) {\n margin-bottom: $margin-bottom;\n }\n }\n } @else {\n // The textarea is too dense to show a floating label\n .mdc-floating-label {\n @include feature-targeting-mixins.targets($feat-structure) {\n display: none;\n }\n }\n\n .mdc-text-field__input {\n @include feature-targeting-mixins.targets($feat-structure) {\n margin-top: $no-label-margin-top;\n margin-bottom: $no-label-margin-bottom;\n }\n }\n }\n\n &.mdc-text-field--no-label {\n .mdc-text-field__input {\n @include feature-targeting-mixins.targets($feat-structure) {\n margin-top: $no-label-margin-top;\n margin-bottom: $no-label-margin-bottom;\n }\n }\n }\n\n &.mdc-text-field--with-internal-counter {\n .mdc-text-field__input {\n // Space between textarea and internal counter should not be affected\n @include _textarea-input-with-internal-counter($query);\n }\n }\n }\n}\n\n///\n/// Sets density scale for outlined textarea.\n///\n/// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values `-4`,\n/// `-3`, `-2`, `-1`, `0`. Default is `0`.\n///\n@mixin outlined-textarea-density(\n $density-scale,\n $query: feature-targeting-functions.all()\n) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n $keyframe-suffix: text-field-outlined-#{$density-scale};\n $label-top: density-functions.prop-value(\n $density-config: variables.$textarea-outlined-label-density-config,\n $density-scale: $density-scale / 2,\n $property-name: top,\n );\n $textfield-height: density-functions.prop-value(\n $density-config: variables.$density-config,\n $density-scale: $density-scale,\n $property-name: height,\n );\n $margin-top: density-functions.prop-value(\n $density-config: variables.$textarea-outlined-density-config,\n $density-scale: $density-scale / 2,\n $property-name: margin-top,\n );\n $margin-bottom: density-functions.prop-value(\n $density-config: variables.$textarea-outlined-density-config,\n $density-scale: $density-scale / 2,\n $property-name: margin-bottom,\n );\n\n // Textarea mixins require two modifier classes since two are used internally\n // for styles (textarea and outlined). An extra class is added for the public\n // mixin so that only a single public class is needed for specificity.\n &.mdc-text-field--outlined {\n // Adjust the floating position and animation/keyframes of the floating\n // label by the new position of the resting label\n $label-top-difference: variables.$textarea-outlined-label-top - $label-top;\n\n // Floating label position\n @include notched-outline-mixins.floating-label-float-position-absolute(\n variables.$textarea-outlined-label-position-y - $label-top-difference,\n $query: $query\n );\n\n // Floating label animation\n @include floating-label-mixins.shake-animation(\n $keyframe-suffix,\n $query: $query\n );\n @at-root {\n @include floating-label-mixins.shake-keyframes(\n $keyframe-suffix,\n variables.$textarea-outlined-label-position-y - $label-top-difference,\n 0%,\n $query: $query\n );\n }\n\n // Resting label position\n .mdc-floating-label {\n @include feature-targeting-mixins.targets($feat-structure) {\n top: $label-top;\n }\n }\n\n .mdc-text-field__resizer {\n @include feature-targeting-mixins.targets($feat-structure) {\n min-height: $textfield-height;\n }\n }\n\n .mdc-text-field__input {\n @include feature-targeting-mixins.targets($feat-structure) {\n margin-top: $margin-top;\n margin-bottom: $margin-bottom;\n }\n }\n\n &.mdc-text-field--with-internal-counter {\n .mdc-text-field__input {\n // Space between textarea and internal counter should not be affected\n @include _textarea-input-with-internal-counter($query);\n }\n }\n }\n}\n\n///\n/// Sets the minimum number of rows for a textarea a textarea may be resized to.\n///\n/// For IE11 this mixin can be used instead of the rows attribute.\n///\n/// @param {Number} $rows - The minimum number of rows for a textarea.\n/// @param {Number} $line-height - The line-height of the textarea.\n///\n@mixin textarea-min-rows(\n $rows,\n $line-height: variables.$textarea-line-height,\n $query: feature-targeting-functions.all()\n) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n .mdc-text-field__input {\n @include feature-targeting-mixins.targets($feat-structure) {\n min-height: $rows * $line-height;\n }\n }\n}\n\n///\n/// Sets height of default text field variant.\n///\n/// @param {Number} $height\n/// @param {Number} $minimum-height-for-filled-label Sets the minimum height for\n/// filled textfields at which to allow floating labels.\n/// @access public\n///\n@mixin height(\n $height,\n $minimum-height-for-filled-label: variables.$minimum-height-for-filled-label,\n $query: feature-targeting-functions.all()\n) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n @include feature-targeting-mixins.targets($feat-structure) {\n height: $height;\n }\n\n @if $height < $minimum-height-for-filled-label {\n @include _filled-no-label($query: $query);\n }\n}\n\n///\n/// Sets height of outlined text field variant (Excluding outlined text field with leading icon).\n///\n/// @param {Number} $height\n/// @param {String} $keyframe-suffix - Optional suffix to use for generated\n/// floating label keyframes\n/// @access public\n///\n@mixin outlined-height(\n $height,\n $keyframe-suffix: text-field-outlined-#{$height},\n $query: feature-targeting-functions.all()\n) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n $positionY: variables.get-outlined-label-position-y($height);\n\n // Floating label position\n @include notched-outline-mixins.floating-label-float-position-absolute(\n $positionY,\n $query: $query\n );\n\n // Floating label animation\n @include floating-label-mixins.shake-animation(\n $keyframe-suffix,\n $query: $query\n );\n @at-root {\n @include floating-label-mixins.shake-keyframes(\n $keyframe-suffix,\n $positionY,\n $query: $query\n );\n }\n\n @include feature-targeting-mixins.targets($feat-structure) {\n height: $height;\n }\n}\n\n///\n/// Sets height of outlined text field with leading icon variant.\n///\n/// @param {Number} $height\n/// @param {String} $keyframe-suffix - Optional suffix to use for generated\n/// floating label keyframes\n/// @access public\n///\n@mixin outlined-with-leading-icon-height(\n $height,\n $keyframe-suffix: null,\n $query: feature-targeting-functions.all()\n) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n // This extra specificity is needed because textfield applies the below mixin\n // already to two selectors (outlined + with-leading-icon). To override\n // them with a new label position and animation, another selector is needed.\n &.mdc-text-field--outlined {\n @include _outlined-with-leading-icon-floating-label-position-animation(\n $height,\n $keyframe-suffix,\n $query\n );\n }\n\n @include feature-targeting-mixins.targets($feat-structure) {\n height: $height;\n }\n}\n\n// Mixin that sets the floating label position and animations for a given height.\n// This mixin is separate to allow outlined-with-leading-icon-height() to\n// provide greater specificity over the default mixin that adds styles for\n// outlined with leading icons.\n@mixin _outlined-with-leading-icon-floating-label-position-animation(\n $height,\n $keyframe-suffix: text-field-outlined-with-leading-icon-#{$height},\n $query: feature-targeting-functions.all()\n) {\n $positionY: variables.get-outlined-label-position-y($height);\n\n // Floating label position\n @include notched-outline-mixins.floating-label-float-position-absolute(\n $positionY,\n variables.$outlined-with-leading-icon-label-position-x,\n $query: $query\n );\n\n // Floating label animation\n @include floating-label-mixins.shake-animation(\n $keyframe-suffix,\n $query: $query\n );\n @at-root {\n @include floating-label-mixins.shake-keyframes(\n $keyframe-suffix,\n $positionY,\n variables.$outlined-with-leading-icon-label-position-x,\n $query: $query\n );\n }\n\n $keyframe-suffix-rtl: #{$keyframe-suffix}-rtl;\n @include rtl-mixins.rtl {\n @include floating-label-mixins.shake-animation(\n $keyframe-suffix,\n $query: $query\n );\n }\n @at-root {\n @include floating-label-mixins.shake-keyframes(\n $keyframe-suffix-rtl,\n $positionY,\n -(variables.$outlined-with-leading-icon-label-position-x),\n $query: $query\n );\n }\n}\n\n///\n/// Sets shape radius of default text field variant.\n///\n/// @param {Number} $radius Shape radius value in `px` or in percentage.\n/// @param {Number} $text-field-height Height of default text field variant. Required only when `$radius` is in\n/// percentage unit and if text field has custom height. Defaults to `variables.$height`.\n/// @param {Boolean} $rtl-reflexive Set to true to flip shape radius in RTL context. Defaults to `false`.\n///\n@mixin shape-radius(\n $radius,\n $density-scale: variables.$density-scale,\n $rtl-reflexive: false,\n $query: feature-targeting-functions.all()\n) {\n @if list.length($radius) > 2 {\n @error \"Invalid radius: '#{$radius}' component doesn't allow customizing all corners\";\n }\n\n $height: density-functions.prop-value(\n $density-config: variables.$density-config,\n $density-scale: $density-scale,\n $property-name: height,\n );\n\n $masked-radius: shape-functions.mask-radius($radius, 1 1 0 0);\n\n @include shape-mixins.radius(\n shape-functions.resolve-percentage-radius($height, $masked-radius),\n $rtl-reflexive,\n $query: $query\n );\n}\n\n@mixin textarea-shape-radius(\n $radius,\n $rtl-reflexive: false,\n $query: feature-targeting-functions.all()\n) {\n @include notched-outline-mixins.shape-radius(\n $radius,\n $rtl-reflexive,\n $query: $query\n );\n}\n\n///\n/// Customizes the color of the text entered into an enabled text field.\n/// @param {Color} $color - The desired input text color.\n///\n@mixin ink-color($color, $query: feature-targeting-functions.all()) {\n @include if-enabled_ {\n @include ink-color_($color, $query: $query);\n }\n}\n\n///\n/// Customizes the color of the entered text in a disabled text field.\n/// @param {Color} $color - The desired input text color.\n///\n@mixin disabled-ink-color($color, $query: feature-targeting-functions.all()) {\n @include if-disabled_ {\n @include ink-color_($color, $query: $query);\n }\n}\n\n///\n/// Customizes the color of the placeholder in an enabled text field.\n/// @param {Color} $color - The desired placeholder text color.\n///\n@mixin placeholder-color($color, $query: feature-targeting-functions.all()) {\n @include if-enabled_ {\n @include placeholder-color_($color, $query: $query);\n }\n}\n\n///\n/// Customizes the color of the placeholder in a disabled text field.\n/// @param {Color} $color - The desired placeholder text color.\n///\n@mixin disabled-placeholder-color(\n $color,\n $query: feature-targeting-functions.all()\n) {\n @include if-disabled_ {\n @include placeholder-color_($color, $query: $query);\n }\n}\n\n///\n/// Customizes the background color of the text field or textarea when enabled.\n/// @param {Color} $color - The desired background color.\n///\n@mixin fill-color($color, $query: feature-targeting-functions.all()) {\n @include if-enabled_ {\n @include fill-color_($color, $query: $query);\n }\n}\n\n///\n/// Customizes the background color of the text field or textarea when disabled.\n/// @param {Color} $color - The desired background color.\n///\n@mixin disabled-fill-color($color, $query: feature-targeting-functions.all()) {\n @include if-disabled_ {\n @include fill-color_($color, $query: $query);\n }\n}\n\n///\n/// Customizes the text field bottom line color for the filled variant.\n/// @param {Color} $color - The desired bottom line color.\n///\n@mixin bottom-line-color($color, $query: feature-targeting-functions.all()) {\n @include if-enabled_ {\n @include bottom-line-color_($color, $query: $query);\n }\n}\n\n///\n/// Customizes the disabled text field bottom line color for the filled variant.\n/// @param {Color} $color - The desired bottom line color.\n///\n@mixin disabled-bottom-line-color(\n $color,\n $query: feature-targeting-functions.all()\n) {\n @include if-disabled_ {\n @include bottom-line-color_($color, $query: $query);\n }\n}\n\n///\n/// Customizes the hover text field bottom line color for the filled variant.\n/// @param {Color} $color - The desired bottom line color.\n///\n@mixin hover-bottom-line-color(\n $color,\n $query: feature-targeting-functions.all()\n) {\n @include if-enabled_ {\n @include hover-bottom-line-color_($color, $query: $query);\n }\n}\n\n///\n/// Customizes the color of the default line ripple of the text field.\n/// @param {Color} $color - The desired line ripple color.\n///\n@mixin line-ripple-color($color, $query: feature-targeting-functions.all()) {\n @include if-enabled_ {\n @include line-ripple-color_($color, $query: $query);\n }\n}\n\n///\n/// Customizes the text color of the label in an enabled text field.\n/// @param {Color} $color - The desired label text color.\n///\n@mixin label-color($color, $query: feature-targeting-functions.all()) {\n @include if-enabled_ {\n @include label-ink-color_($color, $query: $query);\n }\n}\n\n///\n/// Customizes the text color of the label in a disabled text field.\n/// @param {Color} $color - The desired label text color.\n///\n@mixin disabled-label-color($color, $query: feature-targeting-functions.all()) {\n @include if-disabled_ {\n @include label-ink-color_($color, $query: $query);\n }\n}\n\n///\n/// Customizes the border color of the outlined text field or textarea.\n/// @param {Color} $color - The desired outline border color.\n///\n@mixin outline-color($color, $query: feature-targeting-functions.all()) {\n @include if-enabled_ {\n @include notched-outline-mixins.color($color, $query: $query);\n }\n}\n\n///\n/// Customizes the outline border color when the text field or textarea is hovered.\n/// @param {Color} $color - The desired outline border color.\n///\n@mixin hover-outline-color($color, $query: feature-targeting-functions.all()) {\n @include if-enabled_ {\n @include hover-outline-color_($color, $query: $query);\n }\n}\n\n///\n/// Customizes the outline border color when the text field or textarea is focused.\n/// @param {Color} $color - The desired outline border color.\n///\n@mixin focused-outline-color(\n $color,\n $query: feature-targeting-functions.all()\n) {\n @include if-enabled_ {\n @include focused-outline-color_($color, $query: $query);\n }\n}\n\n///\n/// Customizes the outline border color when the text field or textarea is disabled.\n/// @param {Color} $color - The desired outline border color.\n///\n@mixin disabled-outline-color(\n $color,\n $query: feature-targeting-functions.all()\n) {\n @include if-disabled_ {\n @include notched-outline-mixins.color($color, $query: $query);\n }\n}\n\n///\n/// Customizes the caret color of the text field or textarea.\n/// @param {Color} $color - The desired caret color.\n///\n@mixin caret-color($color, $query: feature-targeting-functions.all()) {\n $feat-color: feature-targeting-functions.create-target($query, color);\n\n .mdc-text-field__input {\n @include feature-targeting-mixins.targets($feat-color) {\n @include theme-mixins.prop(caret-color, $color);\n }\n }\n}\n\n///\n/// Customizes the color of the prefix text for an enabled text field.\n/// @param {Color} $color - The desired prefix text color.\n///\n@mixin prefix-color($color, $query: feature-targeting-functions.all()) {\n @include if-enabled_ {\n @include _prefix-color($color, $query: $query);\n }\n}\n\n///\n/// Customizes the color of the prefix text for a disabled text field.\n/// @param {Color} $color - The desired prefix text color.\n///\n@mixin disabled-prefix-color(\n $color,\n $query: feature-targeting-functions.all()\n) {\n @include if-disabled_ {\n @include _prefix-color($color, $query: $query);\n }\n}\n\n///\n/// Customizes the color of the suffix text for an enabled text field.\n/// @param {Color} $color - The desired suffix text color.\n///\n@mixin suffix-color($color, $query: feature-targeting-functions.all()) {\n @include if-enabled_ {\n @include _suffix-color($color, $query: $query);\n }\n}\n\n///\n/// Customizes the color of the suffix text for a disabled text field.\n/// @param {Color} $color - The desired suffix text color.\n///\n@mixin disabled-suffix-color(\n $color,\n $query: feature-targeting-functions.all()\n) {\n @include if-disabled_ {\n @include _suffix-color($color, $query: $query);\n }\n}\n\n///\n/// Sets shape radius of outlined text field variant.\n///\n/// @param {Number} $radius Shape radius value in `px` or in percentage.\n/// @param {Number} $text-field-height Height of outlined text field variant. Required only when `$radius` is in\n/// percentage unit and if text field has custom height. Defaults to `variables.$height`.\n/// @param {Boolean} $rtl-reflexive Set to true to flip shape radius in RTL context. Defaults to `false`.\n///\n@mixin outline-shape-radius(\n $radius,\n $density-scale: variables.$density-scale,\n $rtl-reflexive: false,\n $query: feature-targeting-functions.all()\n) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n $height: density-functions.prop-value(\n $density-config: variables.$density-config,\n $density-scale: $density-scale,\n $property-name: height,\n );\n\n $resolved-radius: list.nth(\n shape-functions.resolve-percentage-radius(\n $height,\n shape-functions.prop-value($radius)\n ),\n 1\n );\n\n @if (list.length(shape-functions.prop-value($radius)) > 1) {\n // stylelint-disable max-line-length\n @warn \"mdc-text-field-outline-shape-radius only supports a single radius; see https://github.com/material-components/material-components-web/issues/4140\";\n // stylelint-enable\n }\n\n .mdc-notched-outline {\n @include notched-outline-mixins.shape-radius(\n $resolved-radius,\n $rtl-reflexive,\n $query: $query\n );\n }\n\n @if ($resolved-radius > notched-outline-variables.$leading-width) {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include rtl-mixins.reflexive-property(\n padding,\n $resolved-radius + notched-outline-variables.$padding,\n 0\n );\n }\n\n + .mdc-text-field-helper-line {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include rtl-mixins.reflexive-property(\n padding,\n $resolved-radius + notched-outline-variables.$padding,\n $resolved-radius\n );\n }\n }\n }\n}\n\n///\n/// Sets the CSS transition for the floating label's \"float\" animation.\n///\n/// @param {Number} $duration-ms - Duration (in ms) of the animation.\n/// @param {String} $timing-function - Optionally overrides the default animation timing function.\n///\n@mixin floating-label-float-transition(\n $duration-ms,\n $timing-function: null,\n $query: feature-targeting-functions.all()\n) {\n .mdc-floating-label {\n @include floating-label-mixins.float-transition(\n $duration-ms,\n $timing-function,\n $query: $query\n );\n }\n}\n\n// Private mixins\n\n// Base shared styles\n@mixin _base($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n // Shape\n @include shape-radius(small, $query: $query);\n\n // Colors\n @include label-color(variables.$label, $query: $query);\n @include ink-color(variables.$ink-color, $query: $query);\n @include placeholder-color(variables.$placeholder-ink-color, $query: $query);\n @include caret-color(primary, $query: $query);\n @include helper-text-mixins.helper-text-color(\n variables.$helper-text-color,\n $query: $query\n );\n @include character-counter-mixins.character-counter-color(\n variables.$helper-text-color,\n $query: $query\n );\n @include icon-mixins.leading-icon-color(\n variables.$icon-color,\n $query: $query\n );\n @include icon-mixins.trailing-icon-color(\n variables.$icon-color,\n $query: $query\n );\n @include prefix-color(variables.$affix-color, $query: $query);\n @include suffix-color(variables.$affix-color, $query: $query);\n\n // Floating Label\n @include floating-label_($query);\n\n // Structural\n @include padding-horizontal_(\n variables.$padding-horizontal,\n 0,\n 0,\n $query: $query\n );\n\n @include feature-targeting-mixins.targets($feat-structure) {\n // display and align-items are necessary to make the text field participate\n // in baseline alignment, even though some variants are \"centered\". Those\n // variants should use the _baseline-center-aligned() mixin\n display: inline-flex;\n align-items: baseline;\n position: relative;\n box-sizing: border-box;\n overflow: hidden;\n /* @alternate */\n will-change: opacity, transform, color;\n }\n}\n\n// This mixin adds styles to visually center the text within the text field.\n// Sibling text will align to the baseline and appear centered next to the\n// text field.\n@mixin _baseline-center-aligned($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n // In order for a flexbox container to participate in baseline alignment,\n // it follows these rules to determine where its baseline is:\n // https://www.w3.org/TR/css-flexbox-1/#flex-baselines\n //\n // In order to avoid leading icons \"controlling\" the baseline (since they\n // are the first child), flexbox will generate a baseline from any child\n // flex items that participate in baseline alignment.\n //\n // Icons are set to \"align-self: center\", while all other children are\n // aligned to baseline. The next problem is deciding which child is\n // used to determine the baseline.\n //\n // According to spec, the item with the largest distance between its\n // baseline and the edge of the cross axis is placed flush with that edge,\n // making it the baseline of the container.\n // https://www.w3.org/TR/css-flexbox-1/#baseline-participation\n //\n // For the filled variant, the pseudo ::before strut is the \"largest\"\n // child since the input has a height of 28px and the strut is 40px. We\n // can emulate center alignment and force the baseline to use the input\n // text by making the input the full height of the container and removing\n // the baseline strut.\n\n // IE11 does not respect this, and makes the leading icon (if present) the\n // baseline. This is a gap with IE11 that we have accepted.\n .mdc-text-field__input {\n height: 100%;\n }\n }\n}\n\n/// Adds horizontal padding to the text field\n///\n/// @param {Number} $padding - left and right-side padding\n/// @param {Number} $left-with-leading-icon - left-side padding when a leading\n/// icon is present\n/// @param {Number} $right-with-trailing-icon - right-side padding when a\n/// trailing icon is present\n@mixin padding-horizontal_(\n $padding,\n $left-with-leading-icon,\n $right-with-trailing-icon,\n $query: feature-targeting-functions.all()\n) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n padding: 0 $padding;\n\n &.mdc-text-field--with-leading-icon {\n @include rtl-mixins.reflexive-property(\n padding,\n $left-with-leading-icon,\n $padding\n );\n }\n\n &.mdc-text-field--with-trailing-icon {\n @include rtl-mixins.reflexive-property(\n padding,\n $padding,\n $right-with-trailing-icon\n );\n }\n\n &.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon {\n @include rtl-mixins.reflexive-property(\n padding,\n $left-with-leading-icon,\n $right-with-trailing-icon\n );\n }\n }\n}\n\n@mixin floating-label_($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n .mdc-floating-label {\n @include feature-targeting-mixins.targets($feat-structure) {\n top: 50%;\n transform: translateY(-50%);\n pointer-events: none;\n }\n }\n}\n\n// Filled\n\n@mixin _filled($query: feature-targeting-functions.all()) {\n // Text Field intentionally omits press ripple, so each state needs to be specified individually.\n @include ripple-mixins.states-base-color(\n variables.$ink-color,\n $query: $query,\n $ripple-target: variables.$ripple-target\n );\n @include ripple-mixins.states-hover-opacity(\n ripple-functions.states-opacity(variables.$ink-color, hover),\n $query: $query,\n $ripple-target: variables.$ripple-target\n );\n @include ripple-mixins.states-focus-opacity(\n ripple-functions.states-opacity(variables.$ink-color, focus),\n $query: $query,\n $ripple-target: variables.$ripple-target\n );\n\n @include height(variables.$height, $query: $query);\n @include typography-mixins.baseline-top(\n variables.$filled-baseline-top,\n $query: $query\n );\n @include fill-color(variables.$background, $query: $query);\n @include bottom-line-color(variables.$bottom-line-idle, $query: $query);\n @include hover-bottom-line-color(\n variables.$bottom-line-hover,\n $query: $query\n );\n @include line-ripple-color_(primary, $query: $query);\n @include _filled-floating-label($query);\n}\n\n@mixin _filled-floating-label($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n .mdc-floating-label {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include rtl-mixins.reflexive-position(left, variables.$label-offset);\n }\n }\n\n @include floating-label-mixins.float-position(\n variables.$label-position-y,\n $query: $query\n );\n}\n\n// Filled variant with no label. This variant centers the text elements and\n// hides the label and is used with there is explicitly no label provided or\n// when the height of the text field is too small for a label to be allowed.\n@mixin _filled-no-label($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include _baseline-center-aligned($query);\n @include feature-targeting-mixins.targets($feat-structure) {\n .mdc-floating-label {\n display: none;\n }\n\n &::before {\n // Remove baseline-top strut\n display: none;\n }\n }\n}\n\n// Outlined\n\n@mixin outlined_($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include outlined-height(\n $height: variables.$height,\n $keyframe-suffix: text-field-outlined,\n $query: $query\n );\n @include _baseline-center-aligned($query: $query);\n @include outline-color(variables.$outlined-idle-border, $query: $query);\n @include hover-outline-color(\n variables.$outlined-hover-border,\n $query: $query\n );\n @include focused-outline-color(primary, $query: $query);\n @include outline-shape-radius(small, $query: $query);\n @include notched-outline-mixins.notch-offset(\n notched-outline-variables.$border-width,\n $query: $query\n );\n @include ripple-mixins.states-base-color(\n transparent,\n $query: $query,\n $ripple-target: variables.$ripple-target\n );\n @include _outlined-floating-label($query);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n overflow: visible;\n }\n\n .mdc-text-field__input {\n @include feature-targeting-mixins.targets($feat-structure) {\n // TODO(b/154349735): Investigate the neccessity of these styles\n display: flex;\n border: none !important; // FF adds unwanted border in HC mode on windows.\n background-color: transparent;\n }\n }\n}\n\n@mixin _outlined-floating-label($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n .mdc-floating-label {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include rtl-mixins.reflexive-position(\n left,\n notched-outline-variables.$padding\n );\n }\n }\n}\n\n// States\n\n@mixin disabled_($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include ink-color_(variables.$disabled-ink-color, $query: $query);\n @include placeholder-color_(\n variables.$disabled-placeholder-ink-color,\n $query: $query\n );\n @include label-ink-color_(variables.$disabled-label-color, $query: $query);\n @include helper-text-mixins.helper-text-color_(\n variables.$disabled-helper-text-color,\n $query: $query\n );\n @include character-counter-mixins.character-counter-color_(\n variables.$disabled-helper-text-color,\n $query: $query\n );\n @include icon-mixins.leading-icon-color_(\n variables.$disabled-icon,\n $query: $query\n );\n @include icon-mixins.trailing-icon-color_(\n variables.$disabled-icon,\n $query: $query\n );\n @include _prefix-color(variables.$disabled-affix-color, $query: $query);\n @include _suffix-color(variables.$disabled-affix-color, $query: $query);\n\n // Mixins that are ok to include since they target variant-specific elements\n @include bottom-line-color_(variables.$disabled-border, $query: $query);\n @include notched-outline-mixins.color(\n variables.$outlined-disabled-border,\n $query: $query\n );\n\n @media screen and (-ms-high-contrast: active) {\n @include placeholder-color_(GrayText, $query: $query);\n @include label-ink-color_(GrayText, $query: $query);\n @include helper-text-mixins.helper-text-color_(GrayText, $query: $query);\n @include character-counter-mixins.character-counter-color_(\n GrayText,\n $query: $query\n );\n @include icon-mixins.leading-icon-color_(GrayText, $query: $query);\n @include icon-mixins.trailing-icon-color_(GrayText, $query: $query);\n @include _prefix-color(GrayText, $query: $query);\n @include _suffix-color(GrayText, $query: $query);\n\n // Mixins that are ok to include since they target variant-specific elements\n @include bottom-line-color_(GrayText, $query: $query);\n @include notched-outline-mixins.color(GrayText, $query: $query);\n }\n\n @include feature-targeting-mixins.targets($feat-structure) {\n pointer-events: none;\n }\n\n .mdc-floating-label {\n @include feature-targeting-mixins.targets($feat-structure) {\n cursor: default;\n }\n }\n}\n\n@mixin _disabled-input($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n // disabled inputs should still allow users to interact with them to select\n // text and scroll for textareas\n pointer-events: auto;\n }\n}\n\n@mixin _disabled-filled($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include fill-color_(variables.$disabled-background, $query: $query);\n\n #{variables.$ripple-target} {\n @include feature-targeting-mixins.targets($feat-structure) {\n // prevent ripple from displaying on hover when some interactible\n // elements like input and resize handles are hovered\n display: none;\n }\n }\n}\n\n@mixin invalid_($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include hover-bottom-line-color(variables.$error, $query: $query);\n @include line-ripple-color(variables.$error, $query: $query);\n @include label-color(variables.$error, $query: $query);\n @include helper-text-mixins.helper-text-validation-color(\n variables.$error,\n $query: $query\n );\n @include caret-color(variables.$error, $query: $query);\n @include icon-mixins.trailing-icon-color(variables.$error, $query: $query);\n\n // Mixins that are ok to include since they target variant-specific elements\n @include bottom-line-color(variables.$error, $query: $query);\n @include outline-color(variables.$error, $query: $query);\n @include hover-outline-color(variables.$error, $query: $query);\n @include focused-outline-color(variables.$error, $query: $query);\n\n + .mdc-text-field-helper-line .mdc-text-field-helper-text--validation-msg {\n @include feature-targeting-mixins.targets($feat-structure) {\n opacity: 1;\n }\n }\n}\n\n@mixin focused_($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include label-color(variables.$focused-label-color, $query: $query);\n\n // Mixins that are ok to include since they target variant-specific elements\n @include notched-outline-mixins.stroke-width(\n variables.$outlined-stroke-width,\n $query: $query\n );\n\n + .mdc-text-field-helper-line\n .mdc-text-field-helper-text:not(.mdc-text-field-helper-text--validation-msg) {\n @include feature-targeting-mixins.targets($feat-structure) {\n opacity: 1;\n }\n }\n}\n\n@mixin _focused-outlined($query: feature-targeting-functions.all()) {\n @include notched-outline-mixins.notch-offset(\n variables.$outlined-stroke-width,\n $query: $query\n );\n}\n\n@mixin _focused-outlined-textarea($query: feature-targeting-functions.all()) {\n @include notched-outline-mixins.notch-offset(0, $query: $query);\n}\n\n// Icons\n\n@mixin with-leading-icon_($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n $icon-padding: icon-variables.$leading-icon-padding-left +\n icon-variables.$icon-size + icon-variables.$leading-icon-padding-right;\n\n .mdc-floating-label {\n @include _truncate-floating-label-max-width($icon-padding, $query: $query);\n @include feature-targeting-mixins.targets($feat-structure) {\n @include rtl-mixins.reflexive-position(left, $icon-padding);\n }\n }\n\n $truncation: $icon-padding + variables.$padding-horizontal;\n\n .mdc-floating-label--float-above {\n @include _truncate-floating-label-floated-max-width(\n $truncation,\n $query: $query\n );\n }\n}\n\n@mixin _with-trailing-icon($query: feature-targeting-functions.all()) {\n $truncation: icon-variables.$trailing-icon-padding-left +\n icon-variables.$icon-size + icon-variables.$trailing-icon-padding-right +\n variables.$label-offset;\n\n .mdc-floating-label {\n @include _truncate-floating-label-max-width($truncation, $query: $query);\n }\n\n .mdc-floating-label--float-above {\n @include _truncate-floating-label-floated-max-width(\n $truncation,\n $query: $query\n );\n }\n}\n\n@mixin _with-leading-and-trailing-icon(\n $query: feature-targeting-functions.all()\n) {\n $leading-icon: icon-variables.$leading-icon-padding-left +\n icon-variables.$icon-size + icon-variables.$leading-icon-padding-right;\n $trailing-icon: icon-variables.$trailing-icon-padding-left +\n icon-variables.$icon-size + icon-variables.$trailing-icon-padding-right;\n $truncation: $leading-icon + $trailing-icon;\n\n .mdc-floating-label {\n @include _truncate-floating-label-max-width($truncation, $query: $query);\n }\n\n .mdc-floating-label--float-above {\n @include _truncate-floating-label-floated-max-width(\n $truncation,\n $query: $query\n );\n }\n}\n\n@mixin outlined-with-leading-icon_($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n // Resting label position\n $icon-padding: icon-variables.$leading-icon-padding-left +\n icon-variables.$icon-size + icon-variables.$leading-icon-padding-right;\n $left-spacing: $icon-padding - notched-outline-variables.$leading-width;\n\n .mdc-floating-label {\n @include feature-targeting-mixins.targets($feat-structure) {\n @include rtl-mixins.reflexive-position(left, $left-spacing);\n }\n }\n\n // Notch width\n $notch-truncation: $icon-padding + notched-outline-variables.$leading-width;\n @include _truncate-notched-outline-max-width(\n $notch-truncation,\n $query: $query\n );\n\n // Floating label position and animation\n @include _outlined-with-leading-icon-floating-label-position-animation(\n $height: variables.$height,\n $keyframe-suffix: text-field-outlined-leading-icon,\n $query: $query\n );\n}\n\n///\n/// Applied to the outlined text field with a trailing icon\n///\n@mixin _outlined-with-trailing-icon($query: feature-targeting-functions.all()) {\n // Resting label position\n $icon-padding: icon-variables.$trailing-icon-padding-left +\n icon-variables.$icon-size + icon-variables.$trailing-icon-padding-right;\n // Notch width\n $notch-truncation: $icon-padding + notched-outline-variables.$leading-width;\n\n @include _truncate-notched-outline-max-width(\n $notch-truncation,\n $query: $query\n );\n}\n\n///\n/// Truncates the max-width of the notched outline by the given amount\n///\n/// @param {Number} $truncation - Amount to truncate the notched outline max-width\n///\n@mixin _truncate-notched-outline-max-width(\n $truncation,\n $query: feature-targeting-functions.all()\n) {\n @include notched-outline-mixins.notch-max-width(\n calc(100% - #{$truncation}),\n $query: $query\n );\n}\n\n///\n/// Truncates the max-width of the floating label by the given amount\n///\n/// @param {Number} $truncation - Amount to truncate the floating label max-width\n///\n@mixin _truncate-floating-label-max-width(\n $truncation,\n $query: feature-targeting-functions.all()\n) {\n @include floating-label-mixins.max-width(\n calc(100% - #{$truncation}),\n $query: $query\n );\n}\n\n///\n/// Truncates the max-width of the floating label by the given amount while scaling by the given scale value\n///\n/// @param {Number} $truncation - Amount to truncate the floating label max-width\n///\n@mixin _truncate-floating-label-floated-max-width(\n $truncation,\n $query: feature-targeting-functions.all()\n) {\n $scale: floating-label-variables.$float-scale;\n @include floating-label-mixins.max-width(\n calc(100% / #{$scale} - #{$truncation} / #{$scale}),\n $query: $query\n );\n}\n\n// Full Width\n@mixin fullwidth_($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include bottom-line-color(variables.$bottom-line-idle, $query: $query);\n @include disabled-bottom-line-color(\n variables.$bottom-line-idle,\n $query: $query\n );\n\n @include feature-targeting-mixins.targets($feat-structure) {\n padding: 0;\n width: 100%;\n }\n\n &:not(.mdc-text-field--textarea) {\n @include _filled-no-label($query);\n @include ripple-mixins.states-base-color(\n transparent,\n $query: $query,\n $ripple-target: variables.$ripple-target\n );\n @include fill-color(transparent, $query: $query);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n display: flex;\n }\n }\n\n &.mdc-text-field--textarea .mdc-text-field__resizer {\n @include feature-targeting-mixins.targets($feat-structure) {\n resize: vertical;\n }\n }\n}\n\n// Textarea\n\n@mixin textarea_($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n $feat-animation: feature-targeting-functions.create-target($query, animation);\n\n @include _textarea-floating-label($query);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n flex-direction: column;\n align-items: center;\n width: auto;\n height: auto;\n padding: 0; // see below for explanation\n }\n\n @include feature-targeting-mixins.targets($feat-animation) {\n transition: none;\n }\n}\n\n@mixin _textarea-resizer($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n align-self: stretch;\n display: inline-flex;\n flex-direction: column;\n flex-grow: 1;\n max-height: 100%;\n max-width: 100%;\n min-height: variables.$height;\n // stylelint-disable declaration-block-no-duplicate-properties\n // \"stretch\" is the preferred rule here. It will allow the textarea to grow\n // to the min/max width of the container, but if an explicit width is set,\n // it cannot be resized horizontally.\n // Stretch is still a working draft. Chrome and Firefox have it implemented\n // with \"available\" prefixes. fit-content is another good target for\n // Safari since it works in almost all use cases except when an explicit\n // width is set (the user can make the textarea smaller than the container).\n // None of this matters for IE11, which doesn't support resize.\n min-width: fit-content;\n /* @alternate */\n min-width: -moz-available;\n /* @alternate */\n min-width: -webkit-fill-available;\n // stylelint-enable declaration-block-no-duplicate-properties\n overflow: hidden;\n resize: both;\n }\n}\n\n@mixin _textarea-filled-resizer($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n // Shift the resizer element up by a margin amount to make space for the\n // resize handle. For filled elements, the resize handle directly touches\n // the bottom line and is hard to see.\n // Using a margin affects the width and positioning of the overall component\n // and underlying textarea, which is why a transform is used instead.\n $y: -1 * variables.$textarea-input-handle-margin;\n\n @include feature-targeting-mixins.targets($feat-structure) {\n transform: translateY($y);\n }\n}\n\n@mixin _textarea-filled-resizer-children(\n $query: feature-targeting-functions.all()\n) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n // See above. After shifting the resize wrapper element, all of its children\n // should be shifted in the opposite direction (down) to compensate.\n $y: variables.$textarea-input-handle-margin;\n\n @include feature-targeting-mixins.targets($feat-structure) {\n transform: translateY($y);\n }\n}\n\n@mixin _textarea-outlined-resizer($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n // Shift the resizer element left/up by a margin amount to make space for the\n // resize handle. For outlined elements, the resize handle directly touches\n // the outline and is hard to see.\n // Using a margin affects the width and positioning of the overall component\n // and underlying textarea, which is why a transform is used instead.\n $x: -1 * variables.$textarea-input-handle-margin;\n $y: -1 * variables.$textarea-input-handle-margin;\n\n @include feature-targeting-mixins.targets($feat-structure) {\n transform: translateX($x) translateY($y);\n\n @include rtl-mixins.rtl {\n // Flip the horizontal shifting direction for RTL\n transform: translateX(-1 * $x) translateY($y);\n }\n }\n}\n\n@mixin _textarea-outlined-resizer-children(\n $query: feature-targeting-functions.all()\n) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n // See above. After shifting the resize wrapper element, all of its children\n // should be shifted in the opposite direction (right and down) to compensate.\n $x: variables.$textarea-input-handle-margin;\n $y: variables.$textarea-input-handle-margin;\n\n @include feature-targeting-mixins.targets($feat-structure) {\n transform: translateX($x) translateY($y);\n\n @include rtl-mixins.rtl {\n // Flip the horizontal shifting direction for RTL\n transform: translateX(-1 * $x) translateY($y);\n }\n }\n}\n\n@mixin _textarea-floating-label($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n // Resting label position\n .mdc-floating-label {\n @include feature-targeting-mixins.targets($feat-structure) {\n top: variables.$textarea-label-top;\n }\n\n // Resets center aligning the floating label.\n &:not(.mdc-floating-label--float-above) {\n @include feature-targeting-mixins.targets($feat-structure) {\n transform: none;\n }\n }\n }\n}\n\n@mixin _textarea-input($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n $feat-typography: feature-targeting-functions.create-target(\n $query,\n typography\n );\n\n @include feature-targeting-mixins.targets($feat-structure) {\n flex-grow: 1;\n height: auto;\n min-height: variables.$textarea-line-height;\n overflow-x: hidden; // https://bugzilla.mozilla.org/show_bug.cgi?id=33654\n overflow-y: auto;\n box-sizing: border-box;\n resize: none;\n // Textarea has horizontal padding instead of the container. This allows the\n // resize handle to extend to the edge of the container.\n padding: 0 variables.$padding-horizontal;\n }\n\n @include feature-targeting-mixins.targets($feat-typography) {\n line-height: variables.$textarea-line-height;\n }\n}\n\n@mixin _textarea-internal-counter($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include typography-mixins.baseline-bottom(\n variables.$textarea-internal-counter-baseline-bottom,\n $query: $query\n );\n @include feature-targeting-mixins.targets($feat-structure) {\n align-self: flex-end;\n // Needed since padding is on the textarea and not the container\n padding: 0 variables.$padding-horizontal;\n\n &::before {\n // Remove baseline-top\n display: none;\n }\n }\n}\n\n@mixin _textarea-input-with-internal-counter(\n $query: feature-targeting-functions.all()\n) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n margin-bottom: variables.$textarea-internal-counter-input-margin-bottom;\n }\n}\n\n@mixin _textarea-filled($query: feature-targeting-functions.all()) {\n $feat-structure: feature-targeting-functions.create-target($query, structure);\n\n @include feature-targeting-mixins.targets($feat-structure) {\n &::before {\n //