@material/icon-button
Version:
The Material Components for the web icon button component
1 lines • 79.6 kB
Source Map (JSON)
{"version":3,"sources":["webpack:///./packages/mdc-icon-button/mdc-icon-button.scss","webpack:///./packages/mdc-icon-button/_icon-button-theme.scss","webpack:///mdc-icon-button.scss","webpack:///./packages/material-components-web/node_modules/@material/dom/_dom.scss","webpack:///./packages/material-components-web/node_modules/@material/focus-ring/_focus-ring.scss","webpack:///./packages/material-components-web/node_modules/@material/theme/_gss.scss","webpack:///./packages/material-components-web/node_modules/@material/touch-target/_touch-target.scss","webpack:///./packages/material-components-web/node_modules/@material/theme/_css.scss","webpack:///./packages/material-components-web/node_modules/@material/ripple/_ripple.scss","webpack:///./packages/material-components-web/node_modules/@material/animation/_animation.scss","webpack:///./packages/material-components-web/node_modules/@material/ripple/_ripple-theme.scss"],"names":[],"mappings":";;;;;;;AA0HE;EAEI,eChFM;EAuGR,WAnBK;EAoBL,YApBK;EAqBL;AChJJ;ADmJE;EAEI;AClJN;ADuJI;EAUI;EACA,gBA1CC;EA2CD,eA3CC;ACnHT;ACiFI;EFiEA;IGzFA;IACA;IACA;IACA;IACA;IACA;IChBA;IAAc;IDkBd;IClBA;IAAc;IDoBd;YAAA;IACA,YA3BwB;IA4BxB,WAtB0B;EF7B5B;AACF;AC+DI;EFiEA;IG3EE;EFjDJ;AACF;AC0DI;ECPA;IACE;IACA;IACA,kBAhEgB;IAiEhB;IACA;IACA;IClCF;IAAc;IDoCZ;ICpCF;IAAc;IDsCZ;YAAA;IACA,wBA/BgB;IAgChB,uBAhCgB;EFdpB;AACF;ACwCI;ECPA;IAeI;EF5CN;AACF;AD8HI;EAEI,WALe;EAMf,YANe;EKjFnB,eAHsB;EAItB,kBAJsB;EAcpB,iBANwB;EAOxB,gBAPwB;AJvC9B;ADsIM;EAEI,gBArBa;EAsBb,eAtBa;AC/GvB;AD2IE;EKhJE;EACA;EACA,YL4DK;EIrEL;EAAc;ECeZ;EACA,WLqDG;EKpDH;UAAA;AJKN;ADsUE;EMrVI;EFZF;EEwBA;ALQJ;AFgDI;;EAGI,WC7FI;ED8FJ,YC9FI;AC+CZ;;AFnDE;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;KAAA;MAAA;UAAA;EACA;EACA;AEqDN;AFlDI;EMSA;EACA;EACA,YAtCK;ED6BL;EAAc;ECeZ;EACA,WA7CG;EA8CH;UAAA;AJyCN;AFkEE;EArHM;EACA;AEsDR;;AFjDE;EAEI;EACA;EACA;AEmDN;;AF/CE;EAEI;AEiDN;AF9CI;EAEI;AE+CR;;AFzCI;EAEI;AE2CR;AFxCM;EAEI;AEyCV;;AFlCE;EAEI;EACA;EACA;EACA;EACA;EACA;AEoCN;;AM0JE;EACE;IACE,+DC3R2B;YD2R3B,uDC3R2B;IDgS3B;YAAA;EN3JJ;EM8JE;IACE;YAAA;EN5JJ;AACF;;AMgJE;EACE;IACE,+DC3R2B;YD2R3B,uDC3R2B;IDgS3B;YAAA;EN3JJ;EM8JE;IACE;YAAA;EN5JJ;AACF;AMgKE;EACE;IACE;YAAA;IACA;EN9JJ;EMiKE;IACE;EN/JJ;AACF;AMuJE;EACE;IACE;YAAA;IACA;EN9JJ;EMiKE;IACE;EN/JJ;AACF;AMkKE;EACE;IACE;YAAA;IACA;ENhKJ;EMmKE;IACE;ENjKJ;AACF;AMyJE;EACE;IACE;YAAA;IACA;ENhKJ;EMmKE;IACE;ENjKJ;AACF;AF7BE;EQnCE;EACA;EACA;EACA;EACA;EACA;EAEA;EAGE;ANgEN;AM5DE;;EAGI;EACA;EACA;EACA;EACA;AN6DN;AMzDE;EAGI;ED5EA;EFZF;EEwBA;AL4HJ;AM/CE;EDzFI;EFZF;EEwBA;ALiIJ;AMxCI;EAEI;UAAA;ANyCR;AMrCI;EAEI;EHpHJ;EAAc;EGsHV;EACA;UAAA;EACA;UAAA;ANuCR;AMjCI;EAEI;EHhIJ;EAAc;EGkIV;ANmCR;AM7BI;EAEI;UAAA;AN8BR;AMtBI;EAEI;UAAA;EAKA;UAAA;ANmBR;AMuBE;;EAGI;EHtMF;EAAc;EGwMZ;EACA,WAZK;EAaL,YAbK;ANRX;AM0BI;;EAGI;EHlNJ;EAAc;EGoNV;EACA;EACA;ANxBR;AM4BI;EAEI;EACA;AN3BR;AQnGI;EHxFE;EFZF;EEwBA;ALoLJ;AQiSE;EHjeI;EFZF;EEwBA;ALyLJ;AQ4RE;EA9QI;EHnNA;EFZF;EEwBA;AL+LJ;AQkCM;EAEI;ARjCV;AQsCQ;EAEI,yBAhRO;EH0Bb;EFZF;EEwBA;ALwMJ;AQ6CI;EHrPA;AL2MJ;AFtHI;EAGI;EACA;EACA;EACA;EACA;EACA;EACA;AEsHR,C","file":"mdc.icon-button.css","sourcesContent":["//\n// Copyright 2021 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/ripple/ripple';\n@use '@material/ripple/ripple-theme';\n@use '@material/touch-target/mixins' as touch-target-mixins;\n@use './icon-button-theme';\n\n@mixin core-styles($query: feature-targeting.all()) {\n @include without-ripple($query);\n @include ripple($query);\n}\n\n@mixin static-styles($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n // postcss-bem-linter: define icon-button\n .mdc-icon-button {\n @include feature-targeting.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 text-decoration: none;\n cursor: pointer;\n user-select: none;\n z-index: 0; // Added to render above the container in IE11 tests.\n overflow: visible; // Added to fix IE11 touch target tests.\n }\n\n .mdc-icon-button__touch {\n @include touch-target-mixins.touch-target(\n $set-width: true,\n $query: $query\n );\n }\n\n @include if-disabled_ {\n @include feature-targeting.targets($feat-structure) {\n cursor: default;\n pointer-events: none;\n }\n }\n }\n\n .mdc-icon-button--display-flex {\n @include feature-targeting.targets($feat-structure) {\n align-items: center;\n display: inline-flex;\n justify-content: center;\n }\n }\n\n .mdc-icon-button__icon {\n @include feature-targeting.targets($feat-structure) {\n display: inline-block;\n }\n\n &.mdc-icon-button__icon--on {\n @include feature-targeting.targets($feat-structure) {\n display: none;\n }\n }\n }\n\n .mdc-icon-button--on {\n .mdc-icon-button__icon {\n @include feature-targeting.targets($feat-structure) {\n display: none;\n }\n\n &.mdc-icon-button__icon--on {\n @include feature-targeting.targets($feat-structure) {\n display: inline-block;\n }\n }\n }\n }\n // postcss-bem-linter: end\n\n .mdc-icon-button__link {\n @include feature-targeting.targets($feat-structure) {\n height: 100%;\n left: 0;\n outline: none;\n position: absolute;\n top: 0;\n width: 100%;\n }\n }\n}\n\n@mixin without-ripple($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-icon-button {\n @include feature-targeting.targets($feat-structure) {\n font-size: icon-button-theme.$icon-size;\n }\n\n @include icon-button-theme.density(0, $query: $query);\n\n @include icon-button-theme.disabled-ink-color(\n text-disabled-on-light,\n $query: $query\n );\n\n svg,\n img {\n @include feature-targeting.targets($feat-structure) {\n width: icon-button-theme.$icon-size;\n height: icon-button-theme.$icon-size;\n }\n }\n }\n\n @include static-styles($query: $query);\n}\n\n@mixin ripple($query: feature-targeting.all()) {\n @include ripple.common($query); // COPYBARA_COMMENT_THIS_LINE\n\n .mdc-icon-button {\n @include ripple.surface(\n $query: $query,\n $ripple-target: icon-button-theme.$ripple-target\n );\n @include ripple.radius-unbounded(\n $query: $query,\n $ripple-target: icon-button-theme.$ripple-target\n );\n @include ripple-theme.states(\n $query: $query,\n $ripple-target: icon-button-theme.$ripple-target\n );\n\n .mdc-icon-button__ripple {\n $feat-structure: feature-targeting.create-target($query, structure);\n @include feature-targeting.targets($feat-structure) {\n height: 100%;\n left: 0px;\n pointer-events: none;\n position: absolute;\n top: 0px;\n width: 100%;\n z-index: -1;\n }\n }\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","//\n// Copyright 2021 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:math';\n@use 'sass:map';\n@use 'sass:meta';\n@use '@material/density/functions' as density-functions;\n@use '@material/density/variables' as density-variables;\n@use '@material/elevation/elevation-theme';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/focus-ring/focus-ring';\n@use '@material/ripple/ripple-theme';\n@use '@material/rtl/rtl';\n@use '@material/dom/dom';\n@use '@material/theme/keys';\n@use '@material/theme/state';\n@use '@material/theme/theme';\n@use '@material/theme/theme-color';\n@use '@material/touch-target/mixins' as touch-target-mixins;\n\n$ripple-target: '.mdc-icon-button__ripple';\n\n$icon-size: 24px !default;\n$size: 48px !default;\n$minimum-height: 28px !default;\n$maximum-height: $size !default;\n$container-shape: 50%;\n$density-scale: density-variables.$default-scale !default;\n$density-config: (\n size: (\n default: $size,\n maximum: $maximum-height,\n minimum: $minimum-height,\n ),\n) !default;\n\n$_custom-property-prefix: 'icon-button';\n\n$light-theme: (\n disabled-icon-color: theme-color.$on-surface,\n disabled-icon-opacity: 0.38,\n icon-color: theme-color.$primary,\n icon-size: $icon-size,\n focus-icon-color: theme-color.$primary,\n focus-state-layer-color: theme-color.$primary,\n focus-state-layer-opacity: 0.12,\n hover-icon-color: theme-color.$primary,\n hover-state-layer-color: theme-color.$primary,\n hover-state-layer-opacity: 0.08,\n pressed-icon-color: theme-color.$primary,\n pressed-state-layer-color: theme-color.$primary,\n pressed-state-layer-opacity: 0.12,\n state-layer-size: $size,\n);\n\n@mixin theme($theme) {\n @include theme.validate-theme($light-theme, $theme);\n\n @include keys.declare-custom-properties(\n $theme,\n $prefix: $_custom-property-prefix\n );\n}\n\n@mixin theme-styles($theme) {\n @include theme.validate-theme($light-theme, $theme);\n\n $theme: keys.create-theme-properties(\n $theme,\n $prefix: $_custom-property-prefix\n );\n\n @include _state-layer-size($size: map.get($theme, state-layer-size));\n @include _icon-size(map.get($theme, icon-size));\n @include _disabled-icon-opacity(map.get($theme, disabled-icon-opacity));\n @include _icon-color-with-map(\n (\n default: map.get($theme, icon-color),\n disabled: map.get($theme, disabled-icon-color),\n focus: map.get($theme, focus-icon-color),\n hover: map.get($theme, hover-icon-color),\n pressed: map.get($theme, pressed-icon-color),\n )\n );\n\n // States styles\n @include ripple-theme.theme-styles(\n (\n focus-state-layer-color: map.get($theme, focus-state-layer-color),\n focus-state-layer-opacity: map.get($theme, focus-state-layer-opacity),\n hover-state-layer-color: map.get($theme, hover-state-layer-color),\n hover-state-layer-opacity: map.get($theme, hover-state-layer-opacity),\n pressed-state-layer-color: map.get($theme, pressed-state-layer-color),\n pressed-state-layer-opacity: map.get($theme, pressed-state-layer-opacity),\n ),\n $ripple-target: $ripple-target\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.all()) {\n $size: density-functions.prop-value(\n $density-config: $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.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n width: $size;\n height: $size;\n padding: math.div($size - $icon-size, 2);\n }\n\n .mdc-icon-button__focus-ring {\n @include feature-targeting.targets($feat-structure) {\n display: none;\n }\n }\n\n @include ripple-theme.focus {\n .mdc-icon-button__focus-ring {\n @include dom.forced-colors-mode($exclude-ie11: true) {\n @include focus-ring.focus-ring(\n $query: $query,\n $container-outer-padding-vertical: 0,\n $container-outer-padding-horizontal: 0\n );\n }\n\n @include feature-targeting.targets($feat-structure) {\n display: block;\n max-height: $size;\n max-width: $size;\n }\n }\n }\n\n &.mdc-icon-button--reduced-size {\n $component-size: $size;\n // Icon button ripple size is capped at 40px for icon buttons with\n // densities -1 and 0 (icon buttons with sizes 44x44 and 48x48px).\n // See http://b/192353968 for more info.\n @if $size >= 40px and $size <= 48px {\n $component-size: 40px;\n }\n\n .mdc-icon-button__ripple {\n @include feature-targeting.targets($feat-structure) {\n width: $component-size;\n height: $component-size;\n }\n\n @include touch-target-mixins.margin(\n $component-height: $component-size,\n $component-width: $component-size,\n $touch-target-height: $size,\n $touch-target-width: $size,\n $query: $query\n );\n }\n\n @include ripple-theme.focus {\n .mdc-icon-button__focus-ring {\n @include feature-targeting.targets($feat-structure) {\n max-height: $component-size;\n max-width: $component-size;\n }\n }\n }\n }\n\n .mdc-icon-button__touch {\n @include touch-target-mixins.touch-target(\n $set-width: true,\n $query: $query,\n $height: $size,\n $width: $size\n );\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.div(math.max($width, $height), 2),\n $query: feature-targeting.all()\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n $component-width: $width + $padding * 2;\n $component-height: $height + $padding * 2;\n\n @include feature-targeting.targets($feat-structure) {\n width: $component-width;\n height: $component-height;\n padding: $padding;\n font-size: math.max($width, $height);\n }\n\n svg,\n img {\n @include feature-targeting.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.all()) {\n @include ink-color_($color, $query: $query);\n @include ripple-theme.states(\n $color,\n $query: $query,\n $ripple-target: $ripple-target\n );\n}\n\n///\n/// Flips icon only in RTL context.\n///\n@mixin flip-icon-in-rtl($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-button__icon {\n @include rtl.rtl {\n @include feature-targeting.targets($feat-structure) {\n @include rtl.ignore-next-line();\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.all()) {\n @include if-disabled_ {\n @include ink-color_($color, $query: $query);\n }\n}\n\n///\n/// Includes ad-hoc high contrast mode support.\n///\n@mixin high-contrast-mode-shim($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n // TODO(b/175806874): Use the DOM border mixin after the ripple is moved\n // away from :before to a dedicated element.\n outline: solid 3px transparent;\n\n &:focus {\n outline: double 5px transparent;\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.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n\n @include feature-targeting.targets($feat-color) {\n @include theme.property(color, $color);\n }\n}\n\n@mixin _state-layer-size($size) {\n @include theme.property(height, $size);\n @include theme.property(width, $size);\n}\n\n@mixin _icon-size($size) {\n @include theme.property(font-size, $size);\n\n svg,\n img {\n @include theme.property(width, $size);\n @include theme.property(height, $size);\n }\n}\n\n///\n/// Sets the icon opacity to the given opacity.\n/// @access private\n///\n@mixin _disabled-icon-opacity($opacity) {\n &:disabled {\n @include theme.property(opacity, $opacity);\n }\n}\n\n///\n/// Sets the icon color to the given color.\n/// @param {map} $color-map - The desired icon color, specified as a map of\n/// colors with states {default, disabled, focus, hover, pressed} as keys.\n/// @access private\n///\n@mixin _icon-color-with-map($color-map) {\n @include ink-color_(state.get-default-state($color-map));\n\n $disabled: state.get-disabled-state($color-map);\n @if $disabled {\n &:disabled {\n @include ink-color_($disabled);\n }\n }\n\n $focus: state.get-focus-state($color-map);\n @if $focus {\n @include ripple-theme.focus {\n @include ink-color_($focus);\n }\n }\n\n $hover: state.get-hover-state($color-map);\n @if $hover {\n &:hover {\n @include ink-color_($hover);\n }\n }\n\n $pressed: state.get-pressed-state($color-map);\n @if $pressed {\n @include ripple-theme.active {\n @include ink-color_($pressed);\n }\n }\n}\n\n@mixin _states-colors($color-map) {\n // TODO(b/191298796): support focused & pressed key colors.\n\n $hover: map.get($color-map, hover);\n @if $hover {\n @include ripple-theme.states-base-color(\n $color: $hover,\n $ripple-target: $ripple-target\n );\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",".mdc-icon-button {\n font-size: 24px;\n width: 48px;\n height: 48px;\n padding: 12px;\n}\n.mdc-icon-button .mdc-icon-button__focus-ring {\n display: none;\n}\n.mdc-icon-button.mdc-ripple-upgraded--background-focused .mdc-icon-button__focus-ring, .mdc-icon-button:not(.mdc-ripple-upgraded):focus .mdc-icon-button__focus-ring {\n display: block;\n max-height: 48px;\n max-width: 48px;\n}\n@media screen and (forced-colors: active) {\n .mdc-icon-button.mdc-ripple-upgraded--background-focused .mdc-icon-button__focus-ring, .mdc-icon-button:not(.mdc-ripple-upgraded):focus .mdc-icon-button__focus-ring {\n pointer-events: none;\n border: 2px solid transparent;\n border-radius: 6px;\n box-sizing: content-box;\n position: absolute;\n top: 50%;\n /* @noflip */\n /*rtl:ignore*/\n left: 50%;\n /* @noflip */\n /*rtl:ignore*/\n transform: translate(-50%, -50%);\n height: 100%;\n width: 100%;\n }\n}\n@media screen and (forced-colors: active) and (forced-colors: active) {\n .mdc-icon-button.mdc-ripple-upgraded--background-focused .mdc-icon-button__focus-ring, .mdc-icon-button:not(.mdc-ripple-upgraded):focus .mdc-icon-button__focus-ring {\n border-color: CanvasText;\n }\n}\n@media screen and (forced-colors: active) {\n .mdc-icon-button.mdc-ripple-upgraded--background-focused .mdc-icon-button__focus-ring::after, .mdc-icon-button:not(.mdc-ripple-upgraded):focus .mdc-icon-button__focus-ring::after {\n content: \"\";\n border: 2px solid transparent;\n border-radius: 8px;\n display: block;\n position: absolute;\n top: 50%;\n /* @noflip */\n /*rtl:ignore*/\n left: 50%;\n /* @noflip */\n /*rtl:ignore*/\n transform: translate(-50%, -50%);\n height: calc(100% + 4px);\n width: calc(100% + 4px);\n }\n}\n@media screen and (forced-colors: active) and (forced-colors: active) {\n .mdc-icon-button.mdc-ripple-upgraded--background-focused .mdc-icon-button__focus-ring::after, .mdc-icon-button:not(.mdc-ripple-upgraded):focus .mdc-icon-button__focus-ring::after {\n border-color: CanvasText;\n }\n}\n.mdc-icon-button.mdc-icon-button--reduced-size .mdc-icon-button__ripple {\n width: 40px;\n height: 40px;\n margin-top: 4px;\n margin-bottom: 4px;\n margin-right: 4px;\n margin-left: 4px;\n}\n.mdc-icon-button.mdc-icon-button--reduced-size.mdc-ripple-upgraded--background-focused .mdc-icon-button__focus-ring, .mdc-icon-button.mdc-icon-button--reduced-size:not(.mdc-ripple-upgraded):focus .mdc-icon-button__focus-ring {\n max-height: 40px;\n max-width: 40px;\n}\n.mdc-icon-button .mdc-icon-button__touch {\n position: absolute;\n top: 50%;\n height: 48px;\n /* @noflip */\n /*rtl:ignore*/\n left: 50%;\n width: 48px;\n transform: translate(-50%, -50%);\n}\n.mdc-icon-button:disabled {\n color: rgba(0, 0, 0, 0.38);\n /* @alternate */\n color: var(--mdc-theme-text-disabled-on-light, rgba(0, 0, 0, 0.38));\n}\n.mdc-icon-button svg,\n.mdc-icon-button img {\n width: 24px;\n height: 24px;\n}\n\n.mdc-icon-button {\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 text-decoration: none;\n cursor: pointer;\n user-select: none;\n z-index: 0;\n overflow: visible;\n}\n.mdc-icon-button .mdc-icon-button__touch {\n position: absolute;\n top: 50%;\n height: 48px;\n /* @noflip */\n /*rtl:ignore*/\n left: 50%;\n width: 48px;\n transform: translate(-50%, -50%);\n}\n.mdc-icon-button:disabled {\n cursor: default;\n pointer-events: none;\n}\n\n.mdc-icon-button--display-flex {\n align-items: center;\n display: inline-flex;\n justify-content: center;\n}\n\n.mdc-icon-button__icon {\n display: inline-block;\n}\n.mdc-icon-button__icon.mdc-icon-button__icon--on {\n display: none;\n}\n\n.mdc-icon-button--on .mdc-icon-button__icon {\n display: none;\n}\n.mdc-icon-button--on .mdc-icon-button__icon.mdc-icon-button__icon--on {\n display: inline-block;\n}\n\n.mdc-icon-button__link {\n height: 100%;\n left: 0;\n outline: none;\n position: absolute;\n top: 0;\n width: 100%;\n}\n\n@keyframes mdc-ripple-fg-radius-in {\n from {\n animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);\n }\n to {\n transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));\n }\n}\n@keyframes mdc-ripple-fg-opacity-in {\n from {\n animation-timing-function: linear;\n opacity: 0;\n }\n to {\n opacity: var(--mdc-ripple-fg-opacity, 0);\n }\n}\n@keyframes mdc-ripple-fg-opacity-out {\n from {\n animation-timing-function: linear;\n opacity: var(--mdc-ripple-fg-opacity, 0);\n }\n to {\n opacity: 0;\n }\n}\n.mdc-icon-button {\n --mdc-ripple-fg-size: 0;\n --mdc-ripple-left: 0;\n --mdc-ripple-top: 0;\n --mdc-ripple-fg-scale: 1;\n --mdc-ripple-fg-translate-end: 0;\n --mdc-ripple-fg-translate-start: 0;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n will-change: transform, opacity;\n}\n.mdc-icon-button .mdc-icon-button__ripple::before,\n.mdc-icon-button .mdc-icon-button__ripple::after {\n position: absolute;\n border-radius: 50%;\n opacity: 0;\n pointer-events: none;\n content: \"\";\n}\n.mdc-icon-button .mdc-icon-button__ripple::before {\n transition: opacity 15ms linear, background-color 15ms linear;\n z-index: 1;\n /* @alternate */\n z-index: var(--mdc-ripple-z-index, 1);\n}\n.mdc-icon-button .mdc-icon-button__ripple::after {\n z-index: 0;\n /* @alternate */\n z-index: var(--mdc-ripple-z-index, 0);\n}\n.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::before {\n transform: scale(var(--mdc-ripple-fg-scale, 1));\n}\n.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::after {\n top: 0;\n /* @noflip */\n /*rtl:ignore*/\n left: 0;\n transform: scale(0);\n transform-origin: center center;\n}\n.mdc-icon-button.mdc-ripple-upgraded--unbounded .mdc-icon-button__ripple::after {\n top: var(--mdc-ripple-top, 0);\n /* @noflip */\n /*rtl:ignore*/\n left: var(--mdc-ripple-left, 0);\n}\n.mdc-icon-button.mdc-ripple-upgraded--foreground-activation .mdc-icon-button__ripple::after {\n animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;\n}\n.mdc-icon-button.mdc-ripple-upgraded--foreground-deactivation .mdc-icon-button__ripple::after {\n animation: mdc-ripple-fg-opacity-out 150ms;\n transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));\n}\n.mdc-icon-button .mdc-icon-button__ripple::before,\n.mdc-icon-button .mdc-icon-button__ripple::after {\n top: calc(50% - 50%);\n /* @noflip */\n /*rtl:ignore*/\n left: calc(50% - 50%);\n width: 100%;\n height: 100%;\n}\n.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::before,\n.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::after {\n top: var(--mdc-ripple-top, calc(50% - 50%));\n /* @noflip */\n /*rtl:ignore*/\n left: var(--mdc-ripple-left, calc(50% - 50%));\n width: var(--mdc-ripple-fg-size, 100%);\n height: var(--mdc-ripple-fg-size, 100%);\n}\n.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::after {\n width: var(--mdc-ripple-fg-size, 100%);\n height: var(--mdc-ripple-fg-size, 100%);\n}\n.mdc-icon-button .mdc-icon-button__ripple::before, .mdc-icon-button .mdc-icon-button__ripple::after {\n background-color: #000;\n /* @alternate */\n background-color: var(--mdc-ripple-color, #000);\n}\n.mdc-icon-button:hover .mdc-icon-button__ripple::before, .mdc-icon-button.mdc-ripple-surface--hover .mdc-icon-button__ripple::before {\n opacity: 0.04;\n /* @alternate */\n opacity: var(--mdc-ripple-hover-opacity, 0.04);\n}\n.mdc-icon-button.mdc-ripple-upgraded--background-focused .mdc-icon-button__ripple::before, .mdc-icon-button:not(.mdc-ripple-upgraded):focus .mdc-icon-button__ripple::before {\n transition-duration: 75ms;\n opacity: 0.12;\n /* @alternate */\n opacity: var(--mdc-ripple-focus-opacity, 0.12);\n}\n.mdc-icon-button:not(.mdc-ripple-upgraded) .mdc-icon-button__ripple::after {\n transition: opacity 150ms linear;\n}\n.mdc-icon-button:not(.mdc-ripple-upgraded):active .mdc-icon-button__ripple::after {\n transition-duration: 75ms;\n opacity: 0.12;\n /* @alternate */\n opacity: var(--mdc-ripple-press-opacity, 0.12);\n}\n.mdc-icon-button.mdc-ripple-upgraded {\n --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12);\n}\n.mdc-icon-button .mdc-icon-button__ripple {\n height: 100%;\n left: 0px;\n pointer-events: none;\n position: absolute;\n top: 0px;\n width: 100%;\n z-index: -1;\n}","// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\n@use '@material/feature-targeting/feature-targeting';\n///\n/// Emits necessary layout styles to set a transparent border around an element\n/// without interfering with the rest of its component layout. The border is\n/// only visible in high-contrast mode. The target element should be a child of\n/// a relatively positioned top-level element (i.e. a ::before pseudo-element).\n///\n/// @param {number} $border-width - The width of the transparent border.\n/// @param {string} $border-style - The style of the transparent border.\n///\n@mixin transparent-border(\n $border-width: 1px,\n $border-style: solid,\n $query: feature-targeting.all()\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n position: absolute;\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n border: $border-width $border-style transparent;\n border-radius: inherit;\n content: '';\n pointer-events: none;\n }\n\n // Used to satisfy Firefox v94 which does not render transparent borders in HCM (b/206440838).\n @include forced-colors-mode($exclude-ie11: true) {\n @include feature-targeting.targets($feat-structure) {\n border-color: CanvasText;\n }\n }\n}\n\n///\n/// Visually hides text content for accessibility. This text should only be\n/// visible to screen reader users.\n/// See https://a11yproject.com/posts/how-to-hide-content/\n///\n@mixin visually-hidden($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n clip: rect(1px, 1px, 1px, 1px);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap; /* added line */\n width: 1px;\n }\n}\n\n/// Selects for IE11 support.\n///\n/// @content styles to emit for IE11 support\n@mixin ie11-support {\n @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n @content;\n }\n}\n\n/// Selects for `forced-colors` high contrast mode.\n///\n/// While in `forced-colors` mode, only system colors should be used.\n///\n/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#system_colors\n/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors\n/// @content styles to emit in `forced-colors` mode\n@mixin forced-colors-mode($exclude-ie11: false) {\n @if $exclude-ie11 {\n @media screen and (forced-colors: active) {\n @content;\n }\n } @else {\n @media screen and (forced-colors: active), (-ms-high-contrast: active) {\n @content;\n }\n }\n}\n","//\n// Copyright 2021 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/feature-targeting';\n@use '@material/rtl/rtl';\n@use '@material/dom/dom';\n\n$ring-radius-default: 8px !default;\n$inner-ring-width-default: 2px !default;\n$inner-ring-color-default: transparent !default;\n$outer-ring-width-default: 2px !default;\n$outer-ring-color-default: transparent !default;\n$container-outer-padding-default: 2px !default;\n\n/// Styles applied to the component's inner focus ring element.\n///\n/// @param $ring-radius [$ring-radius-default] - Focus ring radius.\n/// @param $inner-ring-width [$inner-ring-width-default] - Inner focus ring width.\n/// @param $inner-ring-color [$inner-ring-color-default] - Inner focus ring color.\n/// @param $outer-ring-width [$outer-ring-width-default] - Outer focus ring width.\n/// @param $outer-ring-color [$outer-ring-color-default] - Outer focus ring color.\n/// @param $container-outer-padding [$container-outer-padding-default] - The\n/// distance between the focus ring and the container.\n@mixin focus-ring(\n $query: feature-targeting.all(),\n $ring-radius: $ring-radius-default,\n $inner-ring-width: $inner-ring-width-default,\n $inner-ring-color: $inner-ring-color-default,\n $outer-ring-width: $outer-ring-width-default,\n $outer-ring-color: $outer-ring-color-default,\n $container-outer-padding-vertical: $container-outer-padding-default,\n $container-outer-padding-horizontal: $container-outer-padding-default\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n $container-size-vertical: 100%;\n @if $container-outer-padding-vertical != 0 {\n $container-size-vertical: calc(\n 100% + #{$container-outer-padding-vertical * 2}\n );\n }\n $container-size-horizontal: 100%;\n @if $container-outer-padding-horizontal != 0 {\n $container-size-horizontal: calc(\n 100% + #{$container-outer-padding-horizontal * 2}\n );\n }\n $outer-ring-size: 100%;\n @if $outer-ring-width > 0 {\n $outer-ring-size: calc(100% + #{$outer-ring-width * 2});\n }\n @include feature-targeting.targets($feat-structure) {\n pointer-events: none;\n border: $inner-ring-width solid $inner-ring-color;\n border-radius: $ring-radius - $outer-ring-width;\n box-sizing: content-box;\n position: absolute;\n top: 50%;\n @include rtl.ignore-next-line();\n left: 50%;\n @include rtl.ignore-next-line();\n transform: translate(-50%, -50%);\n height: $container-size-vertical;\n width: $container-size-horizontal;\n\n @include dom.forced-colors-mode($exclude-ie11: true) {\n border-color: CanvasText;\n }\n\n &::after {\n content: '';\n border: $outer-ring-width solid $outer-ring-color;\n border-radius: $ring-radius;\n display: block;\n position: absolute;\n top: 50%;\n @include rtl.ignore-next-line();\n left: 50%;\n @include rtl.ignore-next-line();\n transform: translate(-50%, -50%);\n height: $outer-ring-size;\n width: $outer-ring-size;\n\n @include dom.forced-colors-mode($exclude-ie11: true) {\n border-color: CanvasText;\n }\n }\n }\n}\n/// Customizes the color of the button focus ring.\n///\n/// @param $inner-ring-color [$inner-ring-color-default] - Inner focus ring color.\n/// @param $outer-ring-width [$outer-ring-width-default] - Outer focus ring width.\n@mixin focus-ring-color(\n $inner-ring-color: $inner-ring-color-default,\n $outer-ring-color: $outer-ring-color-default\n) {\n border-color: $inner-ring-color;\n\n &::after {\n border-color: $outer-ring-color;\n }\n}\n\n/// Customizes the border radius of the button focus ring.\n///\n/// @param {Number} $ring-radius - The border radius of the focus ring.\n/// @param {Number} $outer-ring-width [$outer-ring-width] - Width of the outer\n/// ring, required to compute the radius for the inner ring.\n@mixin focus-ring-radius(\n $ring-radius,\n $outer-ring-width: $outer-ring-width-default,\n $query: feature-targeting.all()\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n border-radius: $ring-radius - $outer-ring-width;\n\n &::after {\n border-radius: $ring-radius;\n }\n }\n}\n","//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use 'sass:list';\n@use 'sass:map';\n@use 'sass:meta';\n\n/// Adds optional GSS annotation comments. Useful for theme mixins where one or\n/// more properties are set indirectly.\n///\n/// Annotations may be provided as a Map of annotations or as named arguments.\n///\n/// @example - scss\n/// @include annotate((noflip: true));\n/// left: 0;\n///\n/// @example - scss\n/// @include annotate($noflip: true);\n/// left: 0;\n///\n/// @example - css\n/// /* @noflip */ /*rtl:ignore*/\n/// left: 0;\n///\n/// @param {Map} $annotations - Map of annotations. Values must be set to `true`\n/// for an annotation to be added.\n@mixin annotate($annotations...) {\n $keywords: meta.keywords($annotations);\n @if list.length($annotations) > 0 {\n $annotations: list.nth($annotations, 1);\n } @else {\n $annotations: $keywords;\n }\n\n @if (map.get($annotations, alternate) == true) {\n /* @alternate */\n }\n\n // noflip must be the last tag right before the property\n @if (map.get($annotations, noflip) == true) {\n /* @noflip */ /*rtl:ignore*/\n }\n}\n","//\n// Copyright 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// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:math';\n@use '@material/base/mixins' as base-mixins;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/rtl/rtl';\n\n$height: 48px !default;\n$width: $height !default;\n\n/// Styles applied to the component's touch target wrapper element.\n@mixin wrapper($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-touch-target-wrapper {\n @include feature-targeting.targets($feat-structure) {\n // Ensure that styles are only emitted once across all components that\n // have increased touch targets.\n @include base-mixins.emit-once('mdc-touch-target/wrapper') {\n // NOTE: Will change to `inline-block` in the future, but keeping as is\n // temporarily for backwards-compatibility.\n display: inline;\n }\n }\n }\n}\n\n/// Styles applied to the component's inner touch target element.\n/// By default, only sets the inner element height to the minimum touch target\n/// height ($mdc-touch-target-height).\n/// @param {Boolean} $set-width [false] - Sets the inner element width to the\n/// minimum touch target width ($mdc-touch-target-width).\n/// @param $height [$mdc-touch-target-height] - Touch target height.\n/// @param $width [$mdc-touch-target-width] - Touch target width.\n@mixin touch-target(\n $set-width: false,\n $query: feature-targeting.all(),\n $height: $height,\n $width: $width\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n position: absolute;\n top: 50%;\n height: $height;\n }\n\n @if $set-width {\n @include feature-targeting.targets($feat-structure) {\n @include rtl.ignore-next-line();\n left: 50%;\n width: $width;\n transform: translate(-50%, -50%);\n }\n } @else {\n @include feature-targeting.targets($feat-structure) {\n left: 0;\n right: 0;\n transform: translateY(-50%);\n }\n }\n}\n\n/// Applies margin to the component with the increased touch target,\n/// to compensate for the touch target.\n@mixin margin(\n $component-height,\n $component-width: null,\n $touch-target-height: $height,\n $touch-target-width: $width,\n $query: feature-targeting.all()\n) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n $vertical-margin-value: math.div($touch-target-height - $component-height, 2);\n\n @include feature-targeting.targets($feat-structure) {\n margin-top: $vertical-margin-value;\n margin-bottom: $vertical-margin-value;\n }\n\n @if $component-width {\n $horizontal-margin-value: math.div(\n $touch-target-width - $component-width,\n 2\n );\n\n @include feature-targeting.targets($feat-structure) {\n margin-right: $horizontal-margin-value;\n margin-left: $horizontal-margin-value;\n }\n }\n}\n","//\n// Copyright 2020 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use 'sass:list';\n@use 'sass:map';\n@use 'sass:meta';\n@use './gss';\n\n/// When true, add an additional property/value declaration before declarations\n/// that use advanced features such as custom properties or CSS functions. This\n/// adds fallback support for older browsers such as IE11 that do not support\n/// these features at the cost of additional CSS. Set this variable to false to\n/// disable generating fallback declarations.\n$enable-fallback-declarations: true !default;\n\n/// Writes a CSS property/value declaration. This mixin is used throughout the\n/// theme package for consistency for dynamically setting CSS property values.\n///\n/// This mixin may optionally take a fallback value. For advanced features such\n/// as custom properties or CSS functions like min and max, a fallback value is\n/// recommended to support older browsers.\n///\n/// @param {String} $property - The CSS property of the declaration.\n/// @param {*} $value - The value of the CSS declaration. The value should be\n/// resolved by other theme functions first (i.e. custom property Maps and\n/// Material theme keys are not supported in this mixin). If the value is\n/// null, no declarations will be emitted.\n/// @param {*} $fallback - An optional fallback value for older browsers. If\n/// provided, a second property/value declaration will be added before the\n/// main property/value declaration.\n/// @param {Map} $gss - An optional Map of GSS annotations to add.\n/// @param {Bool} $important - If true, add `!important` to the declaration.\n@mixin declaration(\n $property,\n $value,\n $fallback-value: null,\n $gss: (),\n $important: false\n) {\n // Normally setting a null value to a property will not emit CSS, so mixins\n // wouldn't need to check this. However, Sass will throw an error if the\n // interpolated property is a custom property.\n @if $value != null {\n $important-rule: if($important, ' !important', '');\n\n @if $fallback-value and $enable-fallback-declarations {\n @include gss.annotate($gss);\n #{$property}: #{$fallback-value} #{$important-rule};\n\n // Add @alternate to annotations.\n $gss: map.merge(\n $gss,\n (\n alternate: true,\n )\n );\n }\n\n @include gss.annotate($gss);\n #{$property}: #{$value}#{$important-rule};\n }\n}\n\n/// Unpacks shorthand values for CSS properties (i.e. lists of 1-3 values).\n/// If a list of 4 values is given, it is returned as-is.\n///\n/// Examples:\n///\n/// unpack-value(4px) => 4px 4px 4px 4px\n/// unpack-value(4px 2px) => 4px 2px 4px 2px\n/// unpack-value(4px 2px 2px) => 4px 2px 2px 2px\n/// unpack-value(4px 2px 0 2px) => 4px 2px 0 2px\n///\n/// @param {Number | Map | List} $value - List of 1 to 4 value numbers.\n/// @return {List} a List of 4 value numbers.\n@function unpack-value($value) {\n @if meta.type-of($value) == 'map' or list.length($value) == 1 {\n @return $value $value $value $value;\n } @else if list.length($value) == 4 {\n @return $value;\n } @else if list.length($value) == 3 {\n @return list.nth($value, 1) list.nth($value, 2) list.nth($value, 3)\n list.nth($value, 2);\n } @else if list.length($value) == 2 {\n @return list.nth($value, 1) list.nth($value, 2) list.nth($value, 1)\n list.nth($value, 2);\n }\n\n @error \"Invalid CSS property value: '#{$value}' is more than 4 values\";\n}\n","//\n// Copyright 2016 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PRO