{"version":3,"sources":["webpack:///./packages/mdc-notched-outline/mdc-notched-outline.scss","webpack:///./packages/material-components-web/node_modules/@material/rtl/_rtl.scss","webpack:///./packages/material-components-web/node_modules/@material/theme/_css.scss","webpack:///./packages/mdc-notched-outline/_notched-outline-theme.scss"],"names":[],"mappings":";;;;;;;AAqCE,qBAEI,aACA,kBACA,MACA,QACA,OACA,sBACA,WACA,eACA,YAEA,gBACA,oBC8BA,6DD1BE,iBAIJ,yFAII,sBACA,YACA,oBAIJ,+BAEI,YAIJ,4BAEI,cACA,WAIJ,yCAEI,qBACA,kBACA,eAIJ,sDAEI,mBAIJ,gEAEI,0BAMJ,0DEzBA,iCF6BI,gBC3BF,uICFF,iCFmCA,2DAEI,aG3DJ,yFAII,qBACA,wBAIJ,8BDaA,wCCTI,UA5BQ,CFuCV,+ECFF,wCCLA,+BDKA,wCDEE,iFCFF,wCCCA,4BAEI,gC","file":"mdc.notched-outline.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/rtl/rtl';\n@use './notched-outline-theme';\n\n@mixin core-styles($query: feature-targeting.all()) {\n  @include static-styles($query);\n  @include notched-outline-theme.theme-styles($query);\n}\n\n@mixin static-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-notched-outline {\n    @include feature-targeting.targets($feat-structure) {\n      display: flex;\n      position: absolute;\n      top: 0;\n      right: 0;\n      left: 0;\n      box-sizing: border-box;\n      width: 100%;\n      max-width: 100%;\n      height: 100%;\n      @include rtl.ignore-next-line();\n      text-align: left;\n      pointer-events: none;\n\n      @include rtl.rtl {\n        @include rtl.ignore-next-line();\n        text-align: right;\n      }\n    }\n\n    &__leading,\n    &__notch,\n    &__trailing {\n      @include feature-targeting.targets($feat-structure) {\n        box-sizing: border-box;\n        height: 100%;\n        pointer-events: none;\n      }\n    }\n\n    &__trailing {\n      @include feature-targeting.targets($feat-structure) {\n        flex-grow: 1;\n      }\n    }\n\n    &__notch {\n      @include feature-targeting.targets($feat-structure) {\n        flex: 0 0 auto;\n        width: auto;\n      }\n    }\n\n    .mdc-floating-label {\n      @include feature-targeting.targets($feat-structure) {\n        display: inline-block;\n        position: relative;\n        max-width: 100%;\n      }\n    }\n\n    .mdc-floating-label--float-above {\n      @include feature-targeting.targets($feat-structure) {\n        text-overflow: clip;\n      }\n    }\n\n    &--upgraded .mdc-floating-label--float-above {\n      @include feature-targeting.targets($feat-structure) {\n        max-width: calc(100% / 0.75);\n      }\n    }\n  }\n\n  .mdc-notched-outline--notched {\n    .mdc-notched-outline__notch {\n      @include feature-targeting.targets($feat-structure) {\n        @include rtl.reflexive-box(padding, right, 8px);\n\n        border-top: none;\n      }\n    }\n  }\n\n  .mdc-notched-outline--no-label {\n    .mdc-notched-outline__notch {\n      @include feature-targeting.targets($feat-structure) {\n        display: none;\n      }\n    }\n  }\n}\n","//\n// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n//\n\n@use 'sass:list';\n@use 'sass:meta';\n@use 'sass:selector';\n@use '@material/theme/gss';\n@use '@material/theme/selector-ext';\n@use '@material/theme/theme';\n\n$include: true !default;\n\n/// Creates a rule that will be applied when a component is within the context\n/// of an RTL layout.\n///\n/// @example - scss\n/// .mdc-foo {\n///   padding-left: 4px;\n///\n///   @include rtl {\n///     padding-left: auto;\n///     padding-right: 4px;\n///   }\n/// }\n///\n/// @example - css\n///   .mdc-foo {\n///     padding-left: 4px;\n///   }\n///\n///   [dir=\"rtl\"] .mdc-foo,\n///   .mdc-foo[dir=\"rtl\"] {\n///     padding-left: auto;\n///     padding-right: 4px;\n///   }\n///\n/// Note that this mixin works by checking for an ancestor element with\n/// `[dir=\"rtl\"]`. As a result, nested `dir` values are not supported:\n///\n/// @example - html\n/// <html dir=\"rtl\">\n///   <!-- ... -->\n///   <div dir=\"ltr\">\n///     <div class=\"mdc-foo\">Styled incorrectly as RTL!</div>\n///   </div>\n/// </html>\n///\n/// In the future, selectors such as the `:dir` pseudo-class\n/// (http://mdn.io/css/:dir) will help us mitigate this.\n///\n/// @content Content to be styled in an RTL context.\n@mixin rtl() {\n  @if ($include) {\n    $dir-rtl: '[dir=rtl]';\n\n    $rtl-selectors: list.join(\n      selector.nest($dir-rtl, &),\n      selector-ext.append-strict(&, $dir-rtl)\n    );\n\n    @at-root {\n      #{$rtl-selectors} {\n        /*rtl:begin:ignore*/\n        @content;\n        /*rtl:end:ignore*/\n      }\n    }\n  }\n}\n\n// Takes a base box-model property name (`margin`, `border`, `padding`, etc.) along with a\n// default direction (`left` or `right`) and value, and emits rules which apply the given value to the\n// specified direction by default and the opposite direction in RTL.\n//\n// For example:\n//\n// ```scss\n// .mdc-foo {\n//   @include rtl-reflexive-box(margin, left, 8px);\n// }\n// ```\n//\n// is equivalent to:\n//\n// ```scss\n// .mdc-foo {\n//   margin-left: 8px;\n//   margin-right: 0;\n//\n//   @include rtl {\n//     margin-left: 0;\n//     margin-right: 8px;\n//   }\n// }\n// ```\n//\n// whereas:\n//\n// ```scss\n// .mdc-foo {\n//   @include rtl-reflexive-box(margin, right, 8px);\n// }\n// ```\n//\n// is equivalent to:\n//\n// ```scss\n// .mdc-foo {\n//   margin-left: 0;\n//   margin-right: 8px;\n//\n//   @include rtl {\n//     margin-left: 8px;\n//     margin-right: 0;\n//   }\n// }\n// ```\n//\n// You can also pass an optional 4th `$root-selector` argument which will be forwarded to `mdc-rtl`,\n// e.g. `@include rtl-reflexive-box(margin, left, 8px, '.mdc-component')`.\n//\n// Note that this function will always zero out the original value in an RTL context.\n// If you're trying to flip the values, use `mdc-rtl-reflexive-property()` instead.\n@mixin reflexive-box(\n  $base-property,\n  $default-direction,\n  $value,\n  $replace: null\n) {\n  @if (list.index((right, left), $default-direction) == null) {\n    @error \"Invalid default direction: '#{$default-direction}'. Please specifiy either 'right' or 'left'.\";\n  }\n\n  $left-value: $value;\n  $right-value: 0;\n\n  @if ($default-direction == right) {\n    $left-value: 0;\n    $right-value: $value;\n  }\n\n  @include reflexive-property(\n    $base-property,\n    $left-value,\n    $right-value,\n    $replace: $replace\n  );\n}\n\n// Takes a base property and emits rules that assign <base-property>-left to <left-value> and\n// <base-property>-right to <right-value> in a LTR context, and vice versa in a RTL context.\n// For example:\n//\n// ```scss\n// .mdc-foo {\n//   @include rtl-reflexive-property(margin, auto, 12px);\n// }\n// ```\n//\n// is equivalent to:\n//\n// ```scss\n// .mdc-foo {\n//   margin-left: auto;\n//   margin-right: 12px;\n//\n//   @include rtl {\n//     margin-left: 12px;\n//     margin-right: auto;\n//   }\n// }\n// ```\n//\n// An optional 4th `$root-selector` argument can be given, which will be passed to `mdc-rtl`.\n@mixin reflexive-property(\n  $base-property,\n  $left-value,\n  $right-value,\n  $replace: null\n) {\n  $prop-left: #{$base-property}-left;\n  $prop-right: #{$base-property}-right;\n\n  @include reflexive(\n    $prop-left,\n    $left-value,\n    $prop-right,\n    $right-value,\n    $replace: $replace\n  );\n}\n\n// Takes an argument specifying a horizontal position property (either 'left' or 'right') as well\n// as a value, and applies that value to the specified position in a LTR context, and flips it in a\n// RTL context. For example:\n//\n// ```scss\n// .mdc-foo {\n//   @include rtl-reflexive-position(left, 0);\n// }\n// ```\n//\n// is equivalent to:\n//\n// ```scss\n// .mdc-foo {\n//   left: 0;\n//   right: initial;\n//\n//   @include rtl {\n//     left: initial;\n//     right: 0;\n//   }\n// }\n// ```\n//\n// An optional third $root-selector argument may also be given, which is passed to `mdc-rtl`.\n@mixin reflexive-position($position-property, $value, $replace: null) {\n  @if (list.index((right, left), $position-property) == null) {\n    @error \"Invalid position #{position-property}. Please specifiy either right or left\";\n  }\n\n  // TODO: 'initial' is not supported in IE 11. https://caniuse.com/#feat=css-initial-value\n  $left-value: $value;\n  $right-value: initial;\n\n  @if ($position-property == right) {\n    $right-value: $value;\n    $left-value: initial;\n  }\n\n  @include reflexive(\n    left,\n    $left-value,\n    right,\n    $right-value,\n    $replace: $replace\n  );\n}\n\n// Takes pair of properties with values as arguments and flips it in RTL context.\n// For example:\n//\n// ```scss\n// .mdc-foo {\n//   @include rtl-reflexive(left, 2px, right, 5px);\n// }\n// ```\n//\n// is equivalent to:\n//\n// ```scss\n// .mdc-foo {\n//   left: 2px;\n//   right: 5px;\n//\n//   @include rtl {\n//     right: 2px;\n//     left: 5px;\n//   }\n// }\n// ```\n//\n// An optional fifth `$root-selector` argument may also be given, which is passed to `mdc-rtl`.\n@mixin reflexive(\n  $left-property,\n  $left-value,\n  $right-property,\n  $right-value,\n  $replace: null\n) {\n  $left-replace: null;\n  $right-replace: null;\n  @if $replace {\n    @if meta.type-of($left-value) == 'string' {\n      $left-replace: $replace;\n    }\n\n    @if meta.type-of($right-value) == 'string' {\n      $right-replace: $replace;\n    }\n\n    @if $left-replace == null and $right-replace == null {\n      @error 'mdc-rtl: $replace may only be used with strings but neither left nor right values are strings.';\n    }\n\n    // If any replacements are null, treat the entire value as null (do not\n    // emit anything).\n    @each $name, $replacement in $replace {\n      @if $replacement == null {\n        $left-value: null;\n        $right-value: null;\n      }\n    }\n  }\n\n  // Do not emit if either value are null\n  @if $left-value and $right-value {\n    @include _property($left-property, $left-value, $replace: $left-replace);\n    @include _property($right-property, $right-value, $replace: $right-replace);\n\n    @include rtl {\n      @include _property(\n        $left-property,\n        $right-value,\n        $replace: $right-replace\n      );\n      @include _property($right-property, $left-value, $replace: $left-replace);\n    }\n  }\n}\n\n///\n/// Adds RTL ignore annotation when `$mdc-rtl-include` is true.\n///\n@mixin ignore-next-line() {\n  @include gss.annotate(\n    (\n      noflip: $include,\n    )\n  );\n}\n\n///\n/// Adds `@noflip` annotation when `$mdc-rtl-include` is true.\n///\n/// @param {String} $property\n/// @param {String} $value\n/// @param {Map} $replace\n///\n@mixin _property($property, $value, $replace: null) {\n  @include theme.property(\n    $property,\n    $value,\n    $replace: $replace,\n    $gss: (noflip: $include)\n  );\n}\n","//\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 2023 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:list';\n@use 'sass:meta';\n@use '@material/theme/custom-properties';\n@use '@material/theme/theme';\n@use '@material/shape/functions' as shape-functions;\n@use '@material/shape/mixins' as shape-mixins;\n@use '@material/floating-label/mixins' as floating-label-mixins;\n@use '@material/feature-targeting/feature-targeting';\n@use '@material/rtl/rtl';\n\n// Keep this in sync with constants.numbers.MIN_LEADING_STROKE_EDGE_POSITION\n$min-leading-stroke-edge-position: 12px !default;\n// The gap between the stroke end and floating label\n// Keep this in sync with constants.numbers.NOTCH_GUTTER_SIZE\n$notch-gutter-size: 4px !default;\n$border-width: 1px !default;\n$leading-width: 12px !default;\n$padding: 4px !default;\n// This variable keeps the before/after JS label centered in the notch when the font-size is changed.\n$label-adjust: 14% !default;\n/// Label box height when it is floating above for notched upgraded. This value is used to put the label vertically in\n/// the middle when it is notched.\n$label-box-height: 13.5px !default;\n/// Label adjust offset applied to floating label when it is notched. Since notch without upgraded has different font\n/// size we add additional offset value.\n$label-adjust-absolute: 2.5px !default;\n\n@mixin theme-styles($query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-notched-outline {\n    &__leading,\n    &__notch,\n    &__trailing {\n      @include feature-targeting.targets($feat-structure) {\n        border-top: $border-width solid;\n        border-bottom: $border-width solid;\n      }\n    }\n\n    &__leading {\n      @include feature-targeting.targets($feat-structure) {\n        @include rtl.reflexive-property(border, $border-width solid, none);\n\n        width: $leading-width;\n      }\n    }\n\n    &__trailing {\n      @include feature-targeting.targets($feat-structure) {\n        @include rtl.reflexive-property(border, none, $border-width solid);\n      }\n    }\n\n    &__notch {\n      @include feature-targeting.targets($feat-structure) {\n        max-width: calc(100% - #{$leading-width} * 2);\n      }\n    }\n  }\n}\n\n@mixin color($color, $query: feature-targeting.all()) {\n  $feat-color: feature-targeting.create-target($query, color);\n\n  .mdc-notched-outline__leading,\n  .mdc-notched-outline__notch,\n  .mdc-notched-outline__trailing {\n    @include feature-targeting.targets($feat-color) {\n      @include theme.property(border-color, $color);\n    }\n  }\n}\n\n@mixin stroke-width($width, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-notched-outline__leading,\n  .mdc-notched-outline__notch,\n  .mdc-notched-outline__trailing {\n    @include feature-targeting.targets($feat-structure) {\n      @include theme.property(border-width, $width);\n    }\n  }\n}\n\n///\n/// Adds top offset to compensate for border width box size when it is notched.\n/// Use this when floating label is aligned to center to prevent label jump on focus.\n/// @param {Number} $stroke-width Stroke width of notched outline that needs to be offset.\n///\n@mixin notch-offset($stroke-width, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  .mdc-notched-outline--notched .mdc-notched-outline__notch {\n    @include feature-targeting.targets($feat-structure) {\n      padding-top: $stroke-width;\n    }\n  }\n}\n\n@mixin shape-radius(\n  $radius,\n  $rtl-reflexive: false,\n  $component-height: null,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  // Resolve the radius relative to the notched outline component's height. The\n  // component should provide its current height from its density. The resolved\n  // radius allows percentage radii to be converted to pixels.\n  $resolved-radius: shape-functions.resolve-radius(\n    $radius,\n    $component-height: $component-height\n  );\n\n  // Grab the top-left radius. We'll need it to adjust the leading for the\n  // label notch if the resulting radius shape is larger than the default\n  // leading.\n  $top-left-radius: list.nth(\n    shape-functions.unpack-radius($resolved-radius),\n    1\n  );\n  $top-left-is-custom-prop: custom-properties.is-custom-prop($top-left-radius);\n  $top-left-radius-px: $top-left-radius;\n  @if ($top-left-is-custom-prop) {\n    $top-left-radius-px: custom-properties.get-fallback($top-left-radius);\n  }\n\n  .mdc-notched-outline__leading {\n    // mask the leading to apply the top-left and bottom-left corners\n    @include shape-mixins.radius(\n      shape-functions.mask-radius($radius, 1 0 0 1),\n      $rtl-reflexive: true,\n      $component-height: $component-height,\n      $query: $query\n    );\n\n    @include feature-targeting.targets($feat-structure) {\n      @if ($top-left-radius-px > $leading-width) {\n        // If the radius is bigger than the default leading width, we need to\n        // increase the leading width\n        width: $top-left-radius-px;\n        @if ($top-left-is-custom-prop) {\n          // The radius may be a custom property, in which case the above width\n          // is the IE11 fallback value.\n          /* @alternate */\n        }\n      }\n\n      @if ($top-left-is-custom-prop) {\n        // If the top-left radius is dynamic, the width of the leading is\n        // the max of whichever is larger: the default leading width or the\n        // value of the custom property.\n        $var: custom-properties.create-var($top-left-radius);\n        // Interpolation is a workaround for sass/sass#3259.\n        @supports (top: max(#{0%})) {\n          width: max(#{$leading-width}, #{$var});\n        }\n      }\n    }\n  }\n\n  // Similar to above, adjust the max-width of the notch if we adjusted the\n  // leading's width.\n  .mdc-notched-outline__notch {\n    @include feature-targeting.targets($feat-structure) {\n      @if ($top-left-radius-px > $leading-width) {\n        max-width: calc(100% - #{$top-left-radius-px} * 2);\n        @if ($top-left-is-custom-prop) {\n          /* @alternate */\n        }\n      }\n\n      @if ($top-left-is-custom-prop) {\n        $var: custom-properties.create-var($top-left-radius);\n        // Interpolation is a workaround for sass/sass#3259.\n        @supports (top: max(#{0%})) {\n          max-width: calc(100% - max(#{$leading-width}, #{$var}) * 2);\n        }\n      }\n    }\n  }\n\n  .mdc-notched-outline__trailing {\n    // mask the leading to apply the top-right and bottom-right corners\n    @include shape-mixins.radius(\n      shape-functions.mask-radius($radius, 0 1 1 0),\n      $rtl-reflexive: true,\n      $component-height: $component-height,\n      $query: $query\n    );\n  }\n}\n\n@mixin floating-label-float-position(\n  $positionY,\n  $positionX: 0%,\n  $scale: 0.75,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  @include floating-label-mixins.float-position(\n    $positionY + $label-adjust,\n    $positionX,\n    1,\n    $query: $query\n  );\n\n  .mdc-floating-label--float-above {\n    @include feature-targeting.targets($feat-structure) {\n      font-size: ($scale * 1rem);\n    }\n  }\n\n  // Two selectors to ensure we select the appropriate class when applied from this component or a parent component.\n  &.mdc-notched-outline--upgraded,\n  .mdc-notched-outline--upgraded {\n    @include floating-label-mixins.float-position(\n      $positionY,\n      $positionX,\n      $scale,\n      $query: $query\n    );\n\n    .mdc-floating-label--float-above {\n      @include feature-targeting.targets($feat-structure) {\n        font-size: 1rem;\n      }\n    }\n  }\n}\n\n///\n/// Sets floating label position in notched outline when label is afloat.\n///\n/// @param {Number} $positionY Absolute Y-axis position in `px`.\n/// @param {Number} $positionX Absolute X-axis position in `px`. Defaults to `0`.\n/// @param {Number} $scale Defaults to `.75`.\n///\n/// @todo Replace mixin `mdc-notched-outline-floating-label-float-position` with this mixin when floating label is\n///     center aligned in all the places.\n///\n@mixin floating-label-float-position-absolute(\n  $positionY,\n  $positionX: 0,\n  $scale: 0.75,\n  $query: feature-targeting.all()\n) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n  $float-positionY: if(\n    meta.type-of($positionY) == 'calculation',\n    calc($positionY + $label-adjust-absolute),\n    $positionY + $label-adjust-absolute\n  );\n\n  @include floating-label-mixins.float-position(\n    $float-positionY,\n    $positionX,\n    $scale: 1,\n    $query: $query\n  );\n\n  .mdc-floating-label--float-above {\n    @include feature-targeting.targets($feat-structure) {\n      font-size: ($scale * 1rem);\n    }\n  }\n\n  // Two selectors to ensure we select the appropriate class when applied from this component or a parent component.\n  &.mdc-notched-outline--upgraded,\n  .mdc-notched-outline--upgraded {\n    @include floating-label-mixins.float-position(\n      $positionY,\n      $positionX,\n      $scale,\n      $query: $query\n    );\n\n    .mdc-floating-label--float-above {\n      @include feature-targeting.targets($feat-structure) {\n        font-size: 1rem;\n      }\n    }\n  }\n}\n\n///\n/// Sets the max-width for the notch\n///\n/// @param {Number} $max-width Max-width for the notch\n///\n@mixin notch-max-width($max-width, $query: feature-targeting.all()) {\n  $feat-structure: feature-targeting.create-target($query, structure);\n\n  :not(.mdc-notched-outline--notched) .mdc-notched-outline__notch {\n    @include feature-targeting.targets($feat-structure) {\n      max-width: $max-width;\n    }\n  }\n}\n"],"sourceRoot":""}