@material/tab
Version:
The Material Components for the web tab component
1 lines • 92.8 kB
Source Map (JSON)
{"version":3,"sources":["webpack:///./packages/mdc-tab/mdc-tab.scss","webpack:///./packages/material-components-web/node_modules/@material/typography/_typography.scss","webpack:///./packages/material-components-web/node_modules/@material/theme/_css.scss","webpack:///./packages/material-components-web/node_modules/@material/tab-indicator/_mixins.scss","webpack:///./packages/material-components-web/node_modules/@material/focus-ring/_focus-ring.scss","webpack:///./packages/material-components-web/node_modules/@material/dom/_dom.scss","webpack:///./packages/mdc-tab/_variables.scss","webpack:///./packages/material-components-web/node_modules/@material/rtl/_rtl.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":";;;;;;;AAiJE,SCuLE,kCACA,mCCvQE,+BAYF,4GAZE,mBAYF,2DAZE,oBAYF,8DAZE,gBAYF,0DAZE,8BAYF,2EAZE,qBAYF,8IAZE,yBAYF,sEC8CA,kBHuEF,8BErHE,yBF+HF,wBE/HE,0BFmIE,kBAyGF,oKIpPA,oBACA,6BACA,kBACA,uBACA,kBACA,QAEA,SAEA,wEACA;;KAzB0B,CA0B1B;;KApB4B,CJsQxB,gBAEA,UKvOJ,0CL4NA,oKItOE,yBAGF,kLACE,WACA,6BACA,kBJmOgB,CIlOhB,cACA,kBACA,QAEA,SAEA,wEACA,uBA/BgB,CAgChB,sBAhCgB,CC2BlB,0CDPA,kLAeI,yBJmOJ,oIInQA,oBACA,6BACA,kBACA,uBACA,kBACA,QAEA,SAEA,wEACA;;KAzB0B,CA0B1B;;KApB4B,CJsRxB,UKrPJ,0CL2OA,oIIrPE,yBAGF,kJACE,WACA,6BACA,kBJkPgB,CIjPhB,cACA,kBACA,QAEA,SAEA,wEACA,uBA/BgB,CAgChB,sBAhCgB,CC2BlB,0CDPA,kJAeI,yBJ+CN,kBGzBE,kBH6BF,eAEI,UMnIM,CNoIN,WMpIM,CNqIN,cMrIM,CN2KV,sCEjII,cAYF,wCF+HF,gCE3II,cAYF,wCFmIE,kBA5CJ,SAEI,gBAzHJ,SA2PE,cM9QQ,CNgKR,kBM/JiB,CNgKjB,iBMhKiB,CNuBf,aACA,cACA,uBACA,sBAEA,SACA,cACA,iBACA,YACA,aACA,kBACA,mBACA,eACA,wBACA,UAGA,2BACE,UACA,SAKN,oBAEI,cAIJ,kBAEI,aACA,mBACA,uBACA,eACA,oBAIJ,qBAEI,8BAIA,qBAKA,cACA,UAIJ,eAEI,8BAIA,UAoRF,oCACE,sBACA,mBACA,uBAGF,uCACE,gBACA,mBAnRF,sEAGI,uBAKN,oEEpDE,iCKEE,2JLFF,iCMkOF,2CACE,KACE,8DC3R2B,CD2R3B,sDC3R2B,CDgS3B,oJAGF,GACE,yMAXJ,mCACE,KACE,8DC3R2B,CD2R3B,sDC3R2B,CDgS3B,oJAGF,GACE,yMAKJ,4CACE,KACE,0EACA,UAGF,GACE,yCAPJ,oCACE,KACE,0EACA,UAGF,GACE,yCAIJ,6CACE,KACE,0EACA,wCAGF,GACE,WAPJ,qCACE,KACE,0EACA,wCAGF,GACE,WRUJ,SQ1OE,wBACA,qBACA,oBACA,yBACA,iCACA,mCAEA,0CAOF,mEAGI,kBACA,kBACA,UACA,oBACA,WAIJ,kCAGI,4DN5EA,UAYF,qCM6EF,iCNzFI,UAYF,qCMyFA,sDAEI,sGAIJ,qDAEI,MAEA,OACA,8CACA,sEAMJ,gEAEI,6BAEA,+BAMJ,4EAEI,wLAQJ,8EAEI,4FAKA,wMAcN,mEAGI,qBAEA,sBACA,WACA,YAKF,qDAEI,sCACA,uCEvFJ,mERxFE,yBAYF,4EQqdF,oGRjeI,aAYF,8CQqdF,4IA9QI,yBRnNA,aAYF,8CQiOE,2DAEI,gCAKF,kEAEI,wBAhRO,CR0Bb,aAYF,8CQqPA,6BRrPA,8DF+RF,iBAEI,kBACA,MACA,OACA,WACA,YACA,gBAEA,8B","file":"mdc.tab.min.css","sourcesContent":["//\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// 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/focus-ring/focus-ring';\n@use '@material/ripple/ripple';\n@use '@material/ripple/ripple-theme';\n@use '@material/theme/theme';\n@use '@material/typography/typography';\n@use '@material/rtl/rtl';\n@use '@material/tab-indicator/mixins' as tab-indicator-mixins;\n@use './variables';\n\n// Public mixins\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 $feat-animation: feature-targeting.create-target($query, animation);\n\n .mdc-tab {\n @include min-width(variables.$min-width, $query);\n @include horizontal-padding(variables.$horizontal-padding, $query);\n\n @include feature-targeting.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 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 .mdc-tab--min-width {\n @include feature-targeting.targets($feat-structure) {\n flex: 0 1 auto;\n }\n }\n\n .mdc-tab__content {\n @include feature-targeting.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 .mdc-tab__text-label {\n @include feature-targeting.targets($feat-animation) {\n transition: 150ms color linear;\n }\n\n @include feature-targeting.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.targets($feat-animation) {\n transition: 150ms color linear;\n }\n\n @include feature-targeting.targets($feat-structure) {\n z-index: 2;\n }\n }\n\n .mdc-tab--stacked {\n @include stacked_($query);\n }\n\n .mdc-tab--active {\n .mdc-tab__text-label,\n .mdc-tab__icon {\n @include feature-targeting.targets($feat-animation) {\n transition-delay: 100ms;\n }\n }\n }\n\n .mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon + .mdc-tab__text-label {\n @include feature-targeting.targets($feat-structure) {\n @include rtl.reflexive-box(padding, left, 8px);\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 tah styles. It is recommended that most users use `mdc-tab-core-styles` instead.\n@mixin without-ripple($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n $feat-animation: feature-targeting.create-target($query, animation);\n\n // postcss-bem-linter: define tab\n\n .mdc-tab {\n @include base_($query);\n }\n\n .mdc-tab__content {\n @include content_($query);\n }\n\n .mdc-tab__icon {\n @include feature-targeting.targets($feat-structure) {\n width: variables.$icon-size;\n height: variables.$icon-size;\n font-size: variables.$icon-size;\n }\n }\n\n .mdc-tab--active {\n @include active_($query);\n }\n\n .mdc-tab {\n @include feature-targeting.targets($feat-structure) {\n background: none;\n }\n }\n\n @include static-styles($query: $query);\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: feature-targeting.all()) {\n @include ripple.common($query); // COPYBARA_COMMENT_THIS_LINE\n\n @include ripple_($query);\n}\n\n@mixin horizontal-padding($padding, $query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n padding-right: $padding;\n padding-left: $padding;\n }\n}\n\n@mixin text-label-color($color, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n\n .mdc-tab__text-label {\n @include feature-targeting.targets($feat-color) {\n @include theme.property(color, $color);\n }\n }\n}\n\n@mixin icon-color($color, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n\n .mdc-tab__icon {\n @include feature-targeting.targets($feat-color) {\n @include theme.property(color, $color);\n\n fill: currentColor;\n }\n }\n}\n\n@mixin states-color($color, $query: feature-targeting.all()) {\n @include ripple-theme.states(\n $color,\n $query: $query,\n $ripple-target: variables.$ripple-target\n );\n}\n\n@mixin ink-color($color, $query: feature-targeting.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: feature-targeting.all()) {\n &.mdc-tab--active {\n @include text-label-color($color, $query);\n }\n}\n\n@mixin active-icon-color($color, $query: feature-targeting.all()) {\n &.mdc-tab--active {\n @include icon-color($color, $query);\n }\n}\n\n@mixin active-states-color($color, $query: feature-targeting.all()) {\n &.mdc-tab--active {\n @include states-color($color, $query);\n }\n}\n\n@mixin parent-positioning($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n position: relative;\n }\n}\n\n@mixin fixed-width($width, $query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.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: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.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: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n text-transform: $transform;\n }\n}\n\n///\n/// Sets tab min-width.\n///\n/// @param {Number} $min-width Minimum width value in `px`.\n///\n@mixin min-width($min-width, $query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n min-width: $min-width;\n }\n}\n\n//\n// Private\n//\n\n@mixin base_($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include typography.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 tab-indicator-mixins.surface($query);\n\n @include ripple-theme.focus() {\n &.mdc-tab--active .mdc-tab__focus-ring {\n @include focus-ring.focus-ring(\n $query: $query,\n $ring-radius: 10px,\n $container-outer-padding-vertical: -6px,\n $container-outer-padding-horizontal: -4px\n );\n\n @include feature-targeting.targets($feat-structure) {\n margin-top: -2px;\n // Set z-index to +1 above the .mdc-tab\n z-index: 2;\n }\n }\n\n .mdc-tab__focus-ring {\n @include focus-ring.focus-ring(\n $query: $query,\n $ring-radius: 10px,\n $container-outer-padding-vertical: -4px,\n $container-outer-padding-horizontal: -4px\n );\n\n @include feature-targeting.targets($feat-structure) {\n // Set z-index to +1 above the .mdc-tab\n z-index: 2;\n }\n }\n }\n}\n\n@mixin ripple_($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-tab {\n @include ripple.surface(\n $query,\n $ripple-target: variables.$ripple-target,\n $include-will-change: false\n );\n @include ripple.radius-bounded(\n $query: $query,\n $ripple-target: variables.$ripple-target\n );\n @include ripple-theme.states(\n $color: primary,\n $query: $query,\n $ripple-target: variables.$ripple-target\n );\n }\n\n #{variables.$ripple-target} {\n @include feature-targeting.targets($feat-structure) {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow: hidden;\n // TODO(b/151931961): Remove the following line once resolved\n will-change: transform, opacity;\n }\n }\n}\n\n@mixin content_($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include tab-indicator-mixins.surface($query);\n}\n\n@mixin stacked_($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.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: feature-targeting.all()) {\n $feat-animation: feature-targeting.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","//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use 'sass:math';\n@use 'sass:list';\n@use 'sass:map';\n@use 'sass:string';\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/theme/custom-properties';\n@use '@material/theme/keys';\n@use '@material/theme/theme';\n\n/// @deprecated Avoid calling this function directly. Instead, configure the\n/// `$styles-<style>` variable Maps.\n@function set-styles_($base-styles, $scale-styles, $override-styles) {\n $options: (\n custom-property-prefix: typography,\n );\n\n $base-styles: keys.set-values($base-styles, $options: $options);\n\n @each $style, $style-props in $scale-styles {\n @each $base-key in map.keys($base-styles) {\n // Ignore the return result, it's not needed\n $unused: keys.add-link(keys.combine($style, $base-key), $base-key);\n }\n\n // Merge base properties for all styles.\n $style-props: map.merge($base-styles, $style-props);\n\n // Merge overrides onto each style.\n $style-props: map.merge($style-props, map.get($override-styles, $style));\n\n // Register keys for this style\n @each $property, $value in $style-props {\n $unused: keys.set-value(\n keys.combine($style, $property),\n $value,\n $options: $options\n );\n }\n\n // Override original styles with new styles.\n $scale-styles: map.merge($scale-styles, (#{$style}: $style-props));\n }\n\n @return $scale-styles;\n}\n\n@function get-letter-spacing_($tracking, $font-size) {\n @return math.div($tracking, $font-size * 16) * 1em;\n}\n\n@function px-to-rem($px) {\n @if custom-properties.is-custom-prop($px) {\n @return custom-properties.set-fallback(\n $px,\n _px-to-rem(custom-properties.get-fallback($px))\n );\n }\n @return _px-to-rem($px);\n}\n\n@function _px-to-rem($px) {\n @if $px == null {\n @return null;\n }\n @return math.div($px, 16px) * 1rem;\n}\n\n$font-family: string.unquote('Roboto, sans-serif') !default;\n\n// Override styles\n$styles-headline1: () !default;\n$styles-headline2: () !default;\n$styles-headline3: () !default;\n$styles-headline4: () !default;\n$styles-headline5: () !default;\n$styles-headline6: () !default;\n$styles-subtitle1: () !default;\n$styles-subtitle2: () !default;\n$styles-body1: () !default;\n$styles-body2: () !default;\n$styles-caption: () !default;\n$styles-button: () !default;\n$styles-overline: () !default;\n\n/// @deprecated Do not override this variable. Use the $styles-<style> override\n/// Map variables instead, or $font-family to set the base font family.\n$base: (\n font-family: $font-family,\n) !default;\n\n$font-weight-values: (\n thin: 100,\n light: 300,\n regular: 400,\n medium: 500,\n bold: 700,\n black: 900,\n) !default;\n\n/// @deprecated Do not override this variable. Use the $styles-<style> override\n/// Map variables instead.\n$styles: set-styles_(\n $base,\n (\n headline1: (\n font-size: px-to-rem(96px),\n line-height: px-to-rem(96px),\n font-weight: map.get($font-weight-values, light),\n letter-spacing: get-letter-spacing_(-1.5, 6),\n text-decoration: inherit,\n text-transform: inherit,\n ),\n headline2: (\n font-size: px-to-rem(60px),\n line-height: px-to-rem(60px),\n font-weight: map.get($font-weight-values, light),\n letter-spacing: get-letter-spacing_(-0.5, 3.75),\n text-decoration: inherit,\n text-transform: inherit,\n ),\n headline3: (\n font-size: px-to-rem(48px),\n line-height: px-to-rem(50px),\n font-weight: map.get($font-weight-values, regular),\n letter-spacing: normal,\n text-decoration: inherit,\n text-transform: inherit,\n ),\n headline4: (\n font-size: px-to-rem(34px),\n line-height: px-to-rem(40px),\n font-weight: map.get($font-weight-values, regular),\n letter-spacing: get-letter-spacing_(0.25, 2.125),\n text-decoration: inherit,\n text-transform: inherit,\n ),\n headline5: (\n font-size: px-to-rem(24px),\n line-height: px-to-rem(32px),\n font-weight: map.get($font-weight-values, regular),\n letter-spacing: normal,\n text-decoration: inherit,\n text-transform: inherit,\n ),\n headline6: (\n font-size: px-to-rem(20px),\n line-height: px-to-rem(32px),\n font-weight: map.get($font-weight-values, medium),\n letter-spacing: get-letter-spacing_(0.25, 1.25),\n text-decoration: inherit,\n text-transform: inherit,\n ),\n subtitle1: (\n font-size: px-to-rem(16px),\n line-height: px-to-rem(28px),\n font-weight: map.get($font-weight-values, regular),\n letter-spacing: get-letter-spacing_(0.15, 1),\n text-decoration: inherit,\n text-transform: inherit,\n ),\n subtitle2: (\n font-size: px-to-rem(14px),\n line-height: px-to-rem(22px),\n font-weight: map.get($font-weight-values, medium),\n letter-spacing: get-letter-spacing_(0.1, 0.875),\n text-decoration: inherit,\n text-transform: inherit,\n ),\n body1: (\n font-size: px-to-rem(16px),\n line-height: px-to-rem(24px),\n font-weight: map.get($font-weight-values, regular),\n letter-spacing: get-letter-spacing_(0.5, 1),\n text-decoration: inherit,\n text-transform: inherit,\n ),\n body2: (\n font-size: px-to-rem(14px),\n line-height: px-to-rem(20px),\n font-weight: map.get($font-weight-values, regular),\n letter-spacing: get-letter-spacing_(0.25, 0.875),\n text-decoration: inherit,\n text-transform: inherit,\n ),\n caption: (\n font-size: px-to-rem(12px),\n line-height: px-to-rem(20px),\n font-weight: map.get($font-weight-values, regular),\n letter-spacing: get-letter-spacing_(0.4, 0.75),\n text-decoration: inherit,\n text-transform: inherit,\n ),\n button: (\n font-size: px-to-rem(14px),\n line-height: px-to-rem(36px),\n font-weight: map.get($font-weight-values, medium),\n letter-spacing: get-letter-spacing_(1.25, 0.875),\n text-decoration: none,\n text-transform: uppercase,\n ),\n overline: (\n font-size: px-to-rem(12px),\n line-height: px-to-rem(32px),\n font-weight: map.get($font-weight-values, medium),\n letter-spacing: get-letter-spacing_(2, 0.75),\n text-decoration: none,\n text-transform: uppercase,\n ),\n ),\n (\n headline1: $styles-headline1,\n headline2: $styles-headline2,\n headline3: $styles-headline3,\n headline4: $styles-headline4,\n headline5: $styles-headline5,\n headline6: $styles-headline6,\n subtitle1: $styles-subtitle1,\n subtitle2: $styles-subtitle2,\n body1: $styles-body1,\n body2: $styles-body2,\n caption: $styles-caption,\n button: $styles-button,\n overline: $styles-overline,\n )\n) !default;\n\n// A copy of the styles Map that is used to detect compile-time changes for\n// Angular support.\n$_styles-copy: $styles;\n\n@function is-typography-style($style) {\n @return map.has-key($styles, $style);\n}\n\n@function get-typography-styles() {\n @return map.keys($styles);\n}\n\n@mixin core-styles($query: feature-targeting.all()) {\n .mdc-typography {\n @include base($query: $query);\n }\n\n @each $style in get-typography-styles() {\n .mdc-typography--#{$style} {\n @include typography($style, $query: $query);\n }\n }\n}\n\n@mixin base($query: feature-targeting.all()) {\n $feat-typography: feature-targeting.create-target($query, typography);\n\n @include smooth-font($query: $query);\n @include feature-targeting.targets($feat-typography) {\n @include theme.property(font-family, font-family);\n }\n}\n\n@mixin typography($style, $query: feature-targeting.all(), $exclude-props: ()) {\n $feat-typography: feature-targeting.create-target($query, typography);\n\n @if not is-typography-style($style) {\n @error \"Invalid style specified! #{$style} doesn't exist. Choose one of #{get-typography-styles()}\";\n }\n\n @include smooth-font($query: $query);\n @include feature-targeting.targets($feat-typography) {\n @each $key in keys.get-keys($style) {\n // <style>-<property>: headline1-font-size\n // Slice the string past the first key separator to retrieve the\n // property name\n $property: string.slice($key, string.index($key, '-') + 1);\n @if list.index($exclude-props, $property) == null {\n $current-global-value: map.get($styles, $style, $property);\n $configured-global-value: map.get($_styles-copy, $style, $property);\n @if $current-global-value != $configured-global-value {\n // A compile time change was made to $mdc-typography-styles. To\n // support Angular, use this value instead of the key's value.\n @if $current-global-value {\n // Only emit if the overridden value exists\n $custom-prop: keys.create-custom-property($key);\n $custom-prop: custom-properties.set-fallback(\n $custom-prop,\n $current-global-value\n );\n @include theme.property($property, $custom-prop);\n }\n } @else {\n // Otherwise, use the key, which may be different from the original\n // configured global value.\n @include theme.property($property, $key);\n }\n }\n }\n }\n}\n\n/// Applies antialiasing via font-smoothing to text.\n@mixin smooth-font($query: feature-targeting.all()) {\n $feat-typography: feature-targeting.create-target($query, typography);\n\n @include feature-targeting.targets($feat-typography) {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n }\n}\n\n// Element must be `display: block` or `display: inline-block` for this to work.\n@mixin overflow-ellipsis($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n }\n}\n\n/// Sets a container's baseline that text content will align to.\n///\n/// If the `$display` is set to a flexbox display, only `$top` baseline may be\n/// set. A separate element must be added as a child of the container with a\n/// `$bottom` baseline.\n///\n/// @param {Number} $top - the distance from the top of the container to the\n/// text's baseline.\n/// @param {Number} $bottom - the distance from the text's baseline to the\n/// bottom of the container.\n/// @param {String} $display - the display type of the container. May be `flex`,\n/// `inline-flex`, `block`, or `inline-block`.\n@mixin baseline(\n $top: 0,\n $bottom: 0,\n $display: block,\n $query: feature-targeting.all()\n) {\n $validDisplayTypes: (flex, inline-flex, block, inline-block);\n\n @if list.index($validDisplayTypes, $display) == null {\n @error \"mdc-typography: invalid display specified! #{$display} must be one of #{$validDisplayTypes}\";\n }\n\n $isFlexbox: $display == 'flex' or $display == 'inline-flex';\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n display: $display;\n\n @if $isFlexbox {\n align-items: baseline;\n }\n }\n\n @if $top > 0 {\n @include baseline-top($top, $query: $query);\n }\n\n @if $bottom > 0 {\n @if $isFlexbox {\n @error \"mdc-typography: invalid baseline with display type. #{$display} cannot specifiy $bottom. Add a separate child element with its own $bottom.\";\n }\n\n @include baseline-bottom($bottom, $query: $query);\n }\n}\n\n/// Sets the baseline of flow text content.\n///\n/// Separate `$top` and `$bottom` baselines may be specified. You should ensure\n/// that the `$top` baseline matches the previous text content's $bottom\n/// baseline to ensure text is positioned appropriately.\n///\n/// See go/css-baseline for reference on how this mixin works.\n///\n/// This is intended for text flow content only (e.g. `<h1>`, `<p>`, `<span>`,\n/// or `<div>` with only text content). Use `baseline()` to set the baseline of\n/// containers that are flexbox or have non-flow content children.\n///\n/// @param {Number} $top - the distance from the top of the container to the\n/// text's baseline.\n/// @param {Number} $bottom - the distance from the text's baseline to the\n/// bottom of the container.\n/// @param {Boolean} $lineHeight - the line-height to use for the text. This\n/// is the distance between baselines of multiple lines of text.\n/// @param {String} $display - the display type of the container. May be `block`\n/// or `inline-block`.\n@mixin text-baseline(\n $top: 0,\n $bottom: 0,\n $display: block,\n $lineHeight: normal,\n $query: feature-targeting.all()\n) {\n $validDisplayTypes: (block, inline-block);\n\n @if list.index($validDisplayTypes, $display) == null {\n @error \"mdc-typography: invalid display specified! #{$display} must be one of #{$validDisplayTypes}\";\n }\n\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include baseline(\n $display: $display,\n $top: $top,\n $bottom: $bottom,\n $query: $query\n );\n @include feature-targeting.targets($feat-structure) {\n @if $top > 0 {\n margin-top: 0;\n /* @alternate */\n line-height: #{$lineHeight};\n }\n\n @if $bottom > 0 {\n margin-bottom: -1 * $bottom;\n }\n }\n}\n\n/// Creates a baseline strut from the top of a container. This mixin is for\n/// advanced users, prefer `baseline()`.\n///\n/// @param {Number} $distance - The distance from the top of the container to\n/// the text's baseline.\n@mixin baseline-top($distance, $query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n &::before {\n @include feature-targeting.targets($feat-structure) {\n @include baseline-strut_($distance);\n\n vertical-align: 0;\n }\n }\n}\n\n/// Creates a baseline strut from the baseline to the bottom of a container.\n/// This mixin is for advanced users, prefer `baseline()`.\n///\n/// @param {Number} $distance - The distance from the text's baseline to the\n/// bottom of the container.\n@mixin baseline-bottom($distance, $query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n &::after {\n @include feature-targeting.targets($feat-structure) {\n @include baseline-strut_($distance);\n\n vertical-align: -1 * $distance;\n }\n }\n}\n\n/// Adds an invisible, zero-width prefix to a container's text.\n/// This ensures that the baseline is always where the text would be, instead\n/// of defaulting to the container bottom when text is empty. Do not use this\n/// mixin if the `baseline` mixin is already applied.\n@mixin zero-width-prefix($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n &::before {\n @include feature-targeting.targets($feat-structure) {\n content: '\\200b';\n }\n }\n}\n\n@mixin baseline-strut_($distance) {\n display: inline-block;\n width: 0;\n height: $distance;\n content: '';\n}\n\n@function get-font($typography) {\n @return map.get($styles, $typography, font-family);\n}\n\n@function get-line-height($typography) {\n @return map.get($styles, $typography, line-height);\n}\n\n@function get-size($typography) {\n @return map.get($styles, $typography, font-size);\n}\n\n@function get-weight($typography) {\n @return map.get($styles, $typography, font-weight);\n}\n\n@function get-tracking($typography) {\n @return map.get($styles, $typography, letter-spacing);\n}\n\n$_typography-theme: (\n font: null,\n line-height: null,\n size: null,\n weight: null,\n tracking: null,\n);\n\n@mixin theme-styles($theme) {\n @include theme.validate-theme-keys($_typography-theme, $theme);\n\n @include theme.property(font-family, map.get($theme, font));\n @include theme.property(line-height, map.get($theme, line-height));\n @include theme.property(font-size, map.get($theme, size));\n @include theme.property(font-weight, map.get($theme, weight));\n @include theme.property(letter-spacing, map.get($theme, tracking));\n}\n","//\n// Copyright 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 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// stylelint-disable selector-class-pattern --\n// Selector '.mdc-*' should only be used in this project.\n\n@use '@material/animation/variables';\n@use '@material/theme/theme';\n@use '@material/feature-targeting/feature-targeting';\n\n@mixin static-styles($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n $feat-animation: feature-targeting.create-target($query, animation);\n\n .mdc-tab-indicator {\n @include feature-targeting.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 .mdc-tab-indicator__content {\n @include feature-targeting.targets($feat-structure) {\n transform-origin: left;\n opacity: 0;\n }\n }\n\n .mdc-tab-indicator__content--underline {\n @include feature-targeting.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.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.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.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.targets($feat-animation) {\n transition: none;\n }\n }\n\n .mdc-tab-indicator--fade .mdc-tab-indicator__content {\n @include feature-targeting.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.targets($feat-animation) {\n transition-delay: 100ms;\n }\n }\n}\n\n@mixin core-styles($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n $feat-animation: feature-targeting.create-target($query, animation);\n\n // postcss-bem-linter: define tab-indicator\n\n .mdc-tab-indicator {\n @include base_($query);\n }\n\n @include static-styles($query: $query);\n\n // postcss-bem-linter: end\n}\n\n@mixin surface($query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n @include feature-targeting.targets($feat-structure) {\n position: relative;\n }\n}\n\n@mixin underline-color($color, $query: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n\n .mdc-tab-indicator__content--underline {\n @include feature-targeting.targets($feat-color) {\n @include theme.property(border-color, $color);\n }\n }\n}\n\n@mixin underline-height($height, $query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-tab-indicator__content--underline {\n @include feature-targeting.targets($feat-structure) {\n border-top-width: $height;\n }\n }\n}\n\n@mixin underline-shape($radius) {\n .mdc-tab-indicator__content--underline {\n @include theme.property('border-radius', $radius);\n }\n}\n\n@mixin underline-top-corner-radius($radius, $query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-tab-indicator__content--underline {\n @include feature-targeting.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: feature-targeting.all()) {\n $feat-color: feature-targeting.create-target($query, color);\n\n .mdc-tab-indicator__content--icon {\n @include feature-targeting.targets($feat-color) {\n @include theme.property(color, $color);\n }\n }\n}\n\n@mixin icon-height($height, $query: feature-targeting.all()) {\n $feat-structure: feature-targeting.create-target($query, structure);\n\n .mdc-tab-indicator__content--icon {\n @include feature-targeting.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: feature-targeting.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","//\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","// 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 @