diff --git a/apps/docs/src/constants/scssLookup.ts b/apps/docs/src/constants/scssLookup.ts
index d2ed936d21..3338b58137 100644
--- a/apps/docs/src/constants/scssLookup.ts
+++ b/apps/docs/src/constants/scssLookup.ts
@@ -30,7 +30,7 @@ export const SCSS_LOOKUP: Record<string, string> = {
   "@react-md/expansion-panel/expansion-panel":
     '@use "../utils";\n@use "../transition/transition";\n@use "../icon/icon";\n@use "../button/button";\n@use "../theme/theme";\n\n$disable-everything: false !default;\n$disable-margin-top-transition: false !default;\n\n$padding: 1rem !default;\n$spacing: 1rem !default;\n$button-spacing: icon.$spacing !default;\n$rotate-from: icon.$rotate-from !default;\n$rotate-to: icon.$rotate-to !default;\n\n$box-shadow-overlay-height: 10px !default;\n$box-shadow-overlay-bottom: -6px !default;\n\n@mixin styles($disable-layer: false) {\n  @if not $disable-everything {\n    @include utils.optional-layer(expansion-panel, $disable-layer) {\n      // does not require custom styles\n      .rmd-expansion-panel {\n        @if not $disable-margin-top-transition and $spacing {\n          &--animate {\n            transition: margin-top transition.$linear-duration;\n          }\n        }\n\n        @if $spacing {\n          &--expanded + .rmd-expansion-panel {\n            margin-top: $spacing;\n          }\n        }\n\n        @if not utils.$disable-has-selectors {\n          // this makes it so that the box-shadow between closed panels is not\n          // visible by covering it in a small overlay of the current\n          // background-color\n          &:where(:not(.rmd-expansion-panel--expanded)):has(\n              + .rmd-expansion-panel\n            ) {\n            position: relative;\n\n            &::after {\n              @include theme.theme-use-var(background-color);\n\n              bottom: $box-shadow-overlay-bottom;\n              content: "";\n              height: $box-shadow-overlay-height;\n              left: 0;\n              position: absolute;\n              right: 0;\n              z-index: 1;\n            }\n          }\n        }\n      }\n\n      // .rmd-expansion-panel__header {\n      // }\n\n      .rmd-expansion-panel__button {\n        @if $rotate-from != icon.$rotate-from {\n          @include icon.set-var(rotate-from, $rotate-from);\n        }\n\n        @if $rotate-to != icon.$rotate-to {\n          @include icon.set-var(rotate-to, $rotate-to);\n        }\n\n        @if button.$disable-unstyled-utility-class {\n          @include button.unstyled;\n        }\n        @include utils.auto-rtl(text-align, left);\n\n        align-items: center;\n        color: inherit;\n        font: inherit;\n        gap: $button-spacing;\n        justify-content: space-between;\n        letter-spacing: inherit;\n        padding: $padding;\n        width: 100%;\n\n        &[aria-disabled="true"] {\n          cursor: auto;\n        }\n\n        // need to raise the focus outline z-index so it is above the box-shadow\n        @if not utils.$disable-has-selectors {\n          @if not utils.$disable-focus-visible {\n            &::before {\n              z-index: 2;\n            }\n          } @else {\n            @include utils.keyboard-only {\n              &::before {\n                z-index: 2;\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}\n',
   "@react-md/form/form":
-    '@use "sass:map";\n@use "sass:math";\n@use "sass:color";\n@use "../utils";\n@use "../box-shadows";\n@use "../button/button";\n@use "../progress/progress";\n@use "../theme/colors";\n@use "../theme/theme";\n@use "../list/list";\n@use "../icon/icon";\n@use "../tooltip/tooltip";\n@use "../transition/transition";\n@use "../typography/typography";\n@use "../interaction/interaction";\n\n$disable-everything: false !default;\n$disable-fieldset: $disable-everything !default;\n$disable-message: $disable-everything !default;\n$disable-label: $disable-everything !default;\n$disable-floating-label: $disable-everything !default;\n$disable-label-gap: $disable-everything !default;\n$disable-label-reversed: $disable-everything !default;\n$disable-label-stacked: $disable-everything !default;\n$disable-label-stacked-reversed: $disable-everything !default;\n$disable-file-input: $disable-everything !default;\n$disable-text-field: $disable-everything !default;\n$disable-textarea: $disable-everything !default;\n$disable-password: $disable-text-field !default;\n$disable-text-field-addon: $disable-text-field and $disable-password and\n  $disable-textarea !default;\n$disable-placeholder-ellipsis: false !default;\n$disable-text-field-container-dense: false !default;\n$disable-select: $disable-everything !default;\n$disable-option: $disable-select !default;\n$disable-native-select: $disable-everything !default;\n$disable-native-select-multiple: $disable-everything !default;\n$disable-checkbox: $disable-everything !default;\n$disable-radio: $disable-everything !default;\n$disable-uncontrolled-input-toggles: false !default;\n$disable-switch: $disable-everything !default;\n$disable-switch-circular-progress: progress.$disable-circular !default;\n$disable-switch-icon: false !default;\n$disable-menu-item-checkbox: $disable-checkbox !default;\n$disable-menu-item-radio: $disable-radio !default;\n$disable-menu-item-switch: $disable-switch !default;\n$disable-slider: $disable-everything !default;\n$disable-horizontal-slider: $disable-everything !default;\n$disable-vertical-slider: $disable-everything !default;\n$disable-range-slider: $disable-everything !default;\n$disable-discrete-slider: $disable-everything !default;\n$disable-discrete-slider-marks: $disable-discrete-slider !default;\n$disable-discrete-slider-marks-labels: $disable-discrete-slider-marks !default;\n\n// Note: enabling the filled theme forces the underlined theme to be used since it depends on the same styles\n$disable-text-field-filled-theme: $disable-everything !default;\n$disable-text-field-outlined-theme: $disable-everything !default;\n$disable-text-field-underlined-theme: $disable-everything !default;\n$disable-text-field-counter: $disable-everything !default;\n$disable-text-field-underline-left: $disable-everything !default;\n$disable-text-field-underline-center: $disable-everything !default;\n$disable-text-field-underline-right: $disable-everything !default;\n\n$disable-textarea-resizing-rows: $disable-everything !default;\n$disable-textarea-resizing-mask: $disable-textarea-resizing-rows !default;\n$disable-textarea-resize-horizontal: $disable-everything !default;\n$disable-textarea-resize-vertical: $disable-everything !default;\n\n$active-color: theme.theme-get-var(primary-color) !default;\n$focus-color: interaction.$focus-color !default;\n\n$label-gap: icon.$spacing !default;\n$label-font-size: 1em !default;\n$label-typography: map.merge(\n  typography.$body-1-styles,\n  (\n    font-size: $label-font-size,\n  )\n) !default;\n$label-floating-top: 1rem !default;\n$label-floating-top-dense: 0.9rem !default;\n$label-floating-scale: 0.75 !default;\n$label-floating-padding: 0.25rem !default;\n\n$message-typography-styles: map.merge(\n  typography.$body-2-styles,\n  (\n    font-size: 0.75rem,\n  )\n) !default;\n$message-counter-spacing: icon.$spacing !default;\n$message-margin-top: 0.5rem !default;\n$message-margin-bottom: 1rem !default;\n$message-min-height: 2rem !default;\n\n$text-field-typography: map.merge(\n  typography.$base-font-styles,\n  map.merge(\n    typography.$body-1-styles,\n    (\n      font-size: 1em,\n    )\n  )\n) !default;\n$text-field-height: 3rem !default;\n$text-field-dense-height: 2.5rem !default;\n$text-field-label-height: 3.5rem !default;\n$text-field-label-dense-height: 3.25rem !default;\n$text-field-spacing: icon.$spacing !default;\n$text-field-border-radius: 0.25rem !default;\n$text-field-border-width: 1px !default;\n$text-field-border-width-active: 2px !default;\n$text-field-filled-padding: 0.75rem !default;\n$text-field-outlined-padding: 1rem !default;\n$text-field-underlined-padding: null !default;\n// set this to null to remove this style\n$text-field-underlined-placeholder-height: 2.5rem !default;\n$text-field-underlined-placeholder-padding-top: 0.5rem !default;\n$text-field-underlined-placeholder-addon-padding-top: 0.25rem !default;\n// this is the default height of the label with line-height\n$text-field-underlined-label-padding-top: 1.5rem !default;\n$text-field-underlined-label-left-offset: icon.$spacing !default;\n$text-field-color-min-width: 5rem !default;\n\n$text-field-addon-margin: icon.$spacing !default;\n\n$text-field-light-border-color: rgba(#000, 0.12) !default;\n$text-field-dark-border-color: rgba(#fff, 0.5) !default;\n$text-field-border-color: theme.get-default-color(\n  $text-field-light-border-color,\n  $text-field-dark-border-color\n) !default;\n\n$text-field-light-hover-border-color: rgba(#000, 0.87) !default;\n$text-field-dark-hover-border-color: rgba(#fff, 0.87) !default;\n$text-field-hover-border-color: theme.get-default-color(\n  $text-field-light-hover-border-color,\n  $text-field-dark-hover-border-color\n) !default;\n\n$text-field-light-filled-background-color: colors.$grey-100 !default;\n$text-field-dark-filled-background-color: #424242 !default;\n// $text-field-dark-filled-background-color: core.$grey-700 !default;\n$text-field-filled-background-color: theme.get-default-color(\n  $text-field-light-filled-background-color,\n  $text-field-dark-filled-background-color\n) !default;\n\n$textarea-addon-top: 1rem !default;\n$textarea-vertical-padding: 0.75rem !default;\n\n$password-visibility-toggle-spacing: 0.25rem !default;\n\n$native-select-addon-top: 1rem !default;\n$native-select-multiple-padding: 0.75rem !default;\n$native-select-multiple-underline-padding: 1.5rem !default;\n\n$option-selected-icon-size: 1rem !default;\n$option-selected-styles: (\n  --rmd-icon-color: currentcolor,\n  background-color: colors.$blue-900,\n  color: colors.$white,\n) !default;\n$option-padding-left: list.$item-horizontal-padding - math.div(\n    icon.$size - $option-selected-icon-size,\n    2\n  ) !default;\n$option-selected-icon-spacing: $option-padding-left !default;\n\n$input-toggle-border-radius: 50% !default;\n$input-toggle-padding: 0.5em !default;\n$input-toggle-small-size: 1rem !default;\n$input-toggle-dense-size: icon.$dense-size !default;\n$input-toggle-normal-size: icon.$size !default;\n$input-toggle-large-size: 2rem !default;\n\n$switch-disabled-opacity: 0.5 !default;\n$switch-ball-size: 1.25em !default;\n$switch-ball-border-radius: 50% !default;\n$switch-ball-offset: 0.25em !default;\n$switch-ball-background-color: color.adjust(\n  colors.$white,\n  $lightness: -5%\n) !default;\n$switch-track-height: 1em !default;\n$switch-track-width: 2.25em !default;\n$switch-track-border-radius: 0.5em !default;\n$switch-track-vertical-padding: 0.75em !default;\n$switch-track-horizontal-padding: 0.875em !default;\n$switch-track-light-background-color: colors.$grey-400 !default;\n$switch-track-dark-background-color: if(\n  theme.$disable-dark-elevation,\n  $switch-track-light-background-color,\n  map.get(theme.$dark-elevation-colors, 24)\n) !default;\n$switch-track-background-color: theme.get-default-color(\n  $switch-track-light-background-color,\n  $switch-track-dark-background-color\n) !default;\n$switch-icon-size: 1em !default;\n$switch-circular-progress-width: 12 !default;\n$switch-circular-progress-size: 1em !default;\n\n$slider-size: 2rem !default;\n$slider-vertical-size: 15rem !default;\n$slider-track-color: theme.theme-get-var(primary-color) !default;\n$slider-track-active-size: 0.375rem !default;\n$slider-track-active-color: null !default;\n$slider-track-active-opacity: null !default;\n$slider-track-active-z-index: 2 !default;\n$slider-track-inactive-size: 0.25rem !default;\n$slider-track-inactive-color: null !default;\n$slider-track-inactive-opacity: 0.5 !default;\n$slider-track-inactive-z-index: 1 !default;\n$slider-track-disabled-color: theme.theme-get-var(text-disabled-color) !default;\n\n$slider-mark-height: $slider-track-inactive-size !default;\n$slider-mark-width: $slider-track-inactive-size !default;\n$slider-mark-border-radius: 50% !default;\n$slider-mark-light-active-color: theme.theme-get-var(on-primary-color) !default;\n$slider-mark-dark-active-color: $slider-mark-light-active-color !default;\n$slider-mark-light-active-opacity: 0.38 !default;\n$slider-mark-dark-active-opacity: 0.38 !default;\n$slider-mark-active-color: theme.get-default-color(\n  $slider-mark-light-active-color,\n  $slider-mark-dark-active-color\n) !default;\n$slider-mark-active-opacity: theme.get-default-color(\n  $slider-mark-light-active-opacity,\n  $slider-mark-dark-active-opacity\n) !default;\n\n$slider-mark-light-inactive-color: colors.$black !default;\n$slider-mark-dark-inactive-color: colors.$white !default;\n$slider-mark-inactive-color: theme.get-default-color(\n  $slider-mark-light-inactive-color,\n  $slider-mark-dark-inactive-color\n) !default;\n$slider-mark-light-inactive-opacity: 1 !default;\n$slider-mark-dark-inactive-opacity: 0.8 !default;\n$slider-mark-inactive-opacity: theme.get-default-color(\n  $slider-mark-light-inactive-opacity,\n  $slider-mark-dark-inactive-opacity\n) !default;\n$slider-mark-inactive-z-index: 1 !default;\n$slider-mark-active-z-index: $slider-track-active-z-index + 1 !default;\n\n$slider-thumb-size: 1.25rem !default;\n$slider-thumb-border-radius: 50% !default;\n$slider-thumb-bubble-opacity: 0.3 !default;\n$slider-thumb-z-index: $slider-track-active-z-index !default;\n$slider-thumb-focus-scale: 2 !default;\n$slider-thumb-active-scale: 2.5 !default;\n$slider-thumb-disabled-scale: 0.5 !default;\n$slider-thumb-mask-scale: 0.8 !default;\n$slider-thumb-disabled-color: $slider-track-disabled-color !default;\n$slider-tooltip-caret-size: 0.3rem !default;\n$slider-tooltip-offset: -($slider-thumb-size + icon.$spacing) !default;\n$slider-tooltip-z-index: 0 !default;\n$slider-container-padding: $slider-thumb-size * 0.5 !default;\n$slider-container-addon-spacing: $slider-thumb-size !default;\n$slider-transition-duration: transition.$linear-duration !default;\n$slider-transition-timing-function: transition.$linear-timing-function !default;\n\n// internal variable helpers\n$_disable-text-field-container: $disable-text-field and $disable-password and\n  $disable-textarea and $disable-select and $disable-native-select;\n\n$variables: (\n  active-color,\n  focus-color,\n  addon-top,\n  addon-margin-top,\n  addon-left-offset,\n  label-floating-top,\n  label-left-offset,\n  label-top-offset,\n  label-active-padding,\n  label-active-background-color,\n  text-field-height,\n  text-field-padding-left,\n  text-field-padding-right,\n  text-field-padding-top,\n  text-field-border-color,\n  text-field-hover-border-color,\n  text-field-filled-color,\n  textarea-height,\n  textarea-padding,\n  switch-track-background-color,\n  switch-ball-background-color,\n  slider-color,\n  slider-active-color,\n  slider-inactive-color,\n  slider-size,\n  slider-active-size,\n  slider-inactive-size,\n  slider-vertical-size,\n  slider-offset-1,\n  slider-offset-2,\n  slider-tooltip-scale,\n  slider-tooltip-translate,\n  slider-mark-offset,\n  slider-mark-active-color,\n  slider-mark-active-opacity,\n  slider-mark-inactive-color,\n  slider-mark-inactive-opacity\n);\n\n@function get-var($name, $fallback: null) {\n  $var: utils.get-var-name($variables, $name, "form");\n  @if $fallback {\n    @return var(#{$var}, #{$fallback});\n  }\n\n  @return var(#{$var});\n}\n\n@mixin set-var($name, $value) {\n  @if $value {\n    #{utils.get-var-name($variables, $name, "form")}: #{$value};\n  }\n}\n\n@mixin use-var($property, $name: $property, $fallback: null) {\n  #{$property}: get-var($name, $fallback);\n}\n\n@mixin use-light-theme {\n  @if not $disable-everything {\n    @include set-var(text-field-border-color, $text-field-light-border-color);\n    @include set-var(\n      text-field-hover-border-color,\n      $text-field-light-hover-border-color\n    );\n    @if not $disable-text-field-filled-theme {\n      @include set-var(\n        text-field-filled-color,\n        $text-field-light-filled-background-color\n      );\n    }\n    @if not $disable-switch {\n      @include set-var(\n        switch-track-background-color,\n        $switch-track-light-background-color\n      );\n    }\n  }\n\n  @if not $disable-discrete-slider-marks {\n    @if $slider-mark-light-active-color and\n      $slider-mark-light-active-color !=\n      $slider-mark-dark-active-color\n    {\n      @include set-var(\n        slider-mark-active-color,\n        $slider-mark-light-active-color\n      );\n    }\n\n    @if $slider-mark-light-inactive-color and\n      $slider-mark-light-inactive-color !=\n      $slider-mark-dark-inactive-color\n    {\n      @include set-var(\n        slider-mark-inactive-color,\n        $slider-mark-light-inactive-color\n      );\n    }\n    @if $slider-mark-light-inactive-opacity and\n      $slider-mark-light-inactive-opacity !=\n      $slider-mark-dark-inactive-opacity\n    {\n      @include set-var(\n        slider-mark-inactive-opacity,\n        $slider-mark-light-inactive-opacity\n      );\n    }\n  }\n}\n\n@mixin use-dark-theme {\n  @if not $disable-everything {\n    @include set-var(text-field-border-color, $text-field-dark-border-color);\n    @include set-var(\n      text-field-hover-border-color,\n      $text-field-dark-hover-border-color\n    );\n    @if not $disable-text-field-filled-theme {\n      @include set-var(\n        text-field-filled-color,\n        $text-field-dark-filled-background-color\n      );\n    }\n    @if not $disable-switch {\n      @include set-var(\n        switch-track-background-color,\n        $switch-track-dark-background-color\n      );\n    }\n  }\n\n  @if not $disable-discrete-slider-marks {\n    @if $slider-mark-dark-active-color and\n      $slider-mark-light-active-color !=\n      $slider-mark-dark-active-color\n    {\n      @include set-var(\n        slider-mark-active-color,\n        $slider-mark-dark-active-color\n      );\n    }\n\n    @if $slider-mark-dark-inactive-color and\n      $slider-mark-light-inactive-color !=\n      $slider-mark-dark-inactive-color\n    {\n      @include set-var(\n        slider-mark-inactive-color,\n        $slider-mark-dark-inactive-color\n      );\n    }\n    @if $slider-mark-dark-inactive-opacity and\n      $slider-mark-light-inactive-opacity !=\n      $slider-mark-dark-inactive-opacity\n    {\n      @include set-var(\n        slider-mark-inactive-opacity,\n        $slider-mark-dark-inactive-opacity\n      );\n    }\n  }\n}\n\n@mixin file-input-styles($disable-layer: false) {\n  @if utils.$disable-has-selectors or utils.$disable-focus-visible {\n    .rmd-file-input:focus-within::before {\n      @include utils.keyboard-only {\n        @include interaction.focus-styles;\n      }\n    }\n  } @else {\n    .rmd-file-input:has(:focus-visible)::before {\n      @include interaction.focus-styles;\n    }\n  }\n}\n\n@mixin form-message-styles($disable-layer: false) {\n  @include utils.optional-layer(form, $disable-layer) {\n    .rmd-form-message-container {\n      display: flex;\n      flex-direction: column;\n    }\n\n    .rmd-form-message {\n      @include utils.map-to-styles($message-typography-styles);\n\n      display: flex;\n      margin: $message-margin-top 0 $message-margin-bottom;\n      min-height: $message-min-height;\n\n      @if not $disable-text-field-filled-theme and $text-field-filled-padding {\n        &--filled {\n          padding-left: $text-field-filled-padding;\n          padding-right: $text-field-filled-padding;\n        }\n      }\n\n      @if not\n        $disable-text-field-outlined-theme and\n        $text-field-outlined-padding\n      {\n        &--outline {\n          padding-left: $text-field-outlined-padding;\n          padding-right: $text-field-outlined-padding;\n        }\n      }\n\n      @if not\n        $disable-text-field-underlined-theme and\n        $text-field-underlined-padding\n      {\n        &--underline {\n          padding-left: $text-field-underlined-padding;\n          padding-right: $text-field-underlined-padding;\n        }\n      }\n\n      &__message {\n        margin: 0;\n      }\n\n      @if not $disable-text-field-counter {\n        &__counter {\n          @include utils.auto-rtl(margin-left, auto);\n          @include utils.auto-rtl(padding-left, $message-counter-spacing);\n\n          flex-shrink: 0;\n          white-space: nowrap;\n        }\n      }\n    }\n  }\n}\n\n@mixin label-styles($disable-layer: false) {\n  @include utils.optional-layer(form, $disable-layer) {\n    .rmd-label {\n      @include utils.map-to-styles($label-typography);\n\n      align-items: center;\n      display: inline-flex;\n      transition-duration: transition.$linear-duration;\n      transition-property: background-color, transform;\n\n      $active-selector: "&--active";\n      @if not $_disable-text-field-container {\n        $active-selector: $active-selector +\n          ", .rmd-text-field-container:focus-within &";\n      }\n\n      #{$active-selector} {\n        @include use-var(color, focus-color);\n      }\n\n      @if not $disable-floating-label {\n        &--floating {\n          @include utils.rtl {\n            left: auto;\n            right: 0;\n            transform: translate(\n              utils.negate-var(get-var(text-field-padding-left)),\n              get-var(label-floating-top)\n            );\n          }\n\n          left: 0;\n          position: absolute;\n          top: 0;\n          transform: translate(\n            get-var(text-field-padding-left),\n            get-var(label-floating-top)\n          );\n        }\n\n        &--floating-dense {\n          @include set-var(label-floating-top, $label-floating-top-dense);\n        }\n\n        $floating-active-selector: "&--floating-active";\n        @if not\n          $disable-text-field or not\n          $disable-password or not\n          $disable-textarea\n        {\n          $floating-active-selector: $floating-active-selector +\n            ", .rmd-text-field-container:focus-within &--floating" +\n            ", .rmd-text-field:not(:placeholder-shown) + &--floating";\n        }\n        @if not $disable-native-select {\n          $floating-active-selector: $floating-active-selector +\n            ", .rmd-native-select[multiple] + &--floating" +\n            ", .rmd-native-select:not(:invalid) + &--floating";\n        }\n\n        #{$floating-active-selector} {\n          @include utils.rtl {\n            transform: scale($label-floating-scale)\n              translate(\n                utils.negate-var(get-var(label-left-offset)),\n                get-var(label-top-offset)\n              );\n            transform-origin: 100% 0;\n          }\n          @include use-var(background-color, label-active-background-color);\n          @include use-var(padding, label-active-padding);\n\n          transform: scale($label-floating-scale)\n            translate(get-var(label-left-offset), get-var(label-top-offset));\n          // need to add the `transform-origin` because of the scaling applied.\n          // it\'ll change the position based on the size of the label otherwise\n          transform-origin: 0 0;\n          z-index: 1;\n        }\n      }\n\n      @if not $disable-label-gap {\n        &--gap {\n          gap: $label-gap;\n        }\n      }\n\n      @if not $disable-label-reversed {\n        &--reversed {\n          flex-direction: row-reverse;\n          // this makes it so the content is at the starting edge\n          justify-content: flex-end;\n        }\n      }\n\n      @if not $disable-label-stacked {\n        &--stacked {\n          flex-direction: column;\n        }\n      }\n\n      @if not $disable-label-stacked-reversed {\n        &--stacked-reversed {\n          flex-direction: column-reverse;\n        }\n      }\n    }\n  }\n}\n\n@mixin text-field-container-styles($disable-layer: false) {\n  @include utils.optional-layer(form, $disable-layer) {\n    .rmd-text-field-container {\n      @include use-var(height, text-field-height);\n\n      align-items: center;\n      display: flex;\n      position: relative;\n\n      @if not $disable-text-field-container-dense {\n        &--dense {\n          @include set-var(text-field-height, $text-field-dense-height);\n        }\n\n        &--dense-label {\n          @include set-var(text-field-height, $text-field-label-dense-height);\n        }\n      }\n\n      &--inline {\n        display: inline-flex;\n      }\n\n      &--stretch {\n        flex: 1 1 auto;\n        width: 100%;\n      }\n\n      &--label {\n        @include set-var(text-field-height, $text-field-label-height);\n      }\n\n      &--error {\n        @if not $disable-text-field-addon {\n          @include icon.set-var(color, currentcolor);\n        }\n        @include set-var(active-color, currentcolor);\n        @include set-var(focus-color, currentcolor);\n\n        @if not\n          $disable-text-field-underlined-theme or not\n          $disable-text-field-outlined-theme\n        {\n          @include set-var(\n            text-field-border-color,\n            theme.theme-get-var(error-color)\n          );\n          @include set-var(\n            text-field-hover-border-color,\n            theme.theme-get-var(error-color)\n          );\n        }\n      }\n\n      &--hoverable:hover {\n        @include set-var(\n          text-field-border-color,\n          get-var(text-field-hover-border-color)\n        );\n      }\n\n      @if not $disable-text-field-outlined-theme {\n        &--outline {\n          @include set-var(\n            text-field-padding-left,\n            $text-field-outlined-padding\n          );\n          @include set-var(\n            text-field-padding-right,\n            $text-field-outlined-padding\n          );\n          @include use-var(border-color, text-field-border-color);\n          @if not $disable-text-field-addon {\n            @include set-var(addon-left-offset, $text-field-outlined-padding);\n          }\n\n          @if not $disable-floating-label {\n            @include set-var(label-left-offset, $text-field-outlined-padding);\n            @include set-var(label-top-offset, -50%);\n            @include set-var(label-active-padding, 0 $label-floating-padding);\n            @include set-var(\n              label-active-background-color,\n              theme.theme-get-var(background-color)\n            );\n          }\n\n          border-radius: $text-field-border-radius;\n          border-style: solid;\n          border-width: $text-field-border-width;\n\n          &::after {\n            @include utils.pseudo-element;\n\n            box-shadow: 0\n              0\n              0\n              $text-field-border-width-active\n              get-var(focus-color);\n            opacity: 0;\n            transition: opacity transition.$linear-duration;\n          }\n        }\n\n        &--outline:focus-within::after,\n        &--outline-active::after {\n          opacity: 1;\n        }\n\n        &--outline-left {\n          $distance: calc(\n            #{icon.get-var(size)} +\n              #{$text-field-outlined-padding +\n              $text-field-spacing}\n          );\n\n          @include set-var(text-field-padding-left, $distance);\n        }\n\n        &--outline-right {\n          $distance: calc(#{icon.get-var(size)} + #{$text-field-spacing * 2});\n\n          @include set-var(text-field-padding-right, $distance);\n        }\n      }\n\n      @if not $disable-text-field-filled-theme {\n        &--filled {\n          @include set-var(text-field-padding-left, $text-field-filled-padding);\n          @include set-var(\n            text-field-padding-right,\n            $text-field-filled-padding\n          );\n          @if not $disable-floating-label {\n            @include set-var(\n              label-left-offset,\n              $text-field-filled-padding + $label-floating-padding\n            );\n          }\n\n          @if not $disable-text-field-addon {\n            @include set-var(addon-left-offset, $text-field-filled-padding);\n          }\n\n          @include use-var(background-color, text-field-filled-color);\n        }\n      }\n\n      // the filled theme uses the same styles as underline\n      @if not\n        $disable-text-field-underlined-theme or not\n        $disable-text-field-filled-theme\n      {\n        &--underline {\n          @include use-var(border-color, text-field-border-color);\n\n          border-bottom-style: solid;\n          border-bottom-width: $text-field-border-width;\n\n          @if $text-field-underlined-padding {\n            @include set-var(\n              text-field-padding-left,\n              $text-field-underlined-padding\n            );\n            @include set-var(\n              text-field-padding-right,\n              $text-field-underlined-padding\n            );\n          }\n\n          &::after {\n            @include use-var(background-color, focus-color);\n\n            bottom: -$text-field-border-width;\n            content: "";\n            height: $text-field-border-width-active;\n            left: 0;\n            position: absolute;\n            right: 0;\n            transform: scale(0);\n            transition: transform\n              transition.$linear-duration\n              transition.$linear-timing-function;\n            z-index: 1;\n          }\n        }\n\n        @if $text-field-underlined-placeholder-height {\n          &--underline-placeholder {\n            @include set-var(\n              text-field-padding-top,\n              $text-field-underlined-placeholder-addon-padding-top\n            );\n            height: $text-field-underlined-placeholder-height;\n          }\n\n          &--underline-placeholder-only {\n            @include set-var(\n              text-field-padding-top,\n              $text-field-underlined-placeholder-padding-top\n            );\n          }\n        }\n\n        &--underline-labelled {\n          @include set-var(\n            text-field-padding-top,\n            $text-field-underlined-label-padding-top\n          );\n          @include set-var(addon-margin-top, $text-field-addon-margin);\n        }\n\n        @if not $disable-text-field-underline-left {\n          &--underline-left::after {\n            transform-origin: left;\n          }\n        }\n\n        @if not $disable-text-field-underline-center {\n          &--underline-center::after {\n            transform-origin: center;\n          }\n        }\n\n        @if not $disable-text-field-underline-right {\n          &--underline-right::after {\n            transform-origin: right;\n          }\n        }\n\n        &:focus-within::after,\n        &--underline-active::after {\n          transform: scale(1);\n        }\n\n        @if not $disable-text-field-addon {\n          $addon-offset: "#{icon.get-var(size)} + #{$text-field-underlined-label-left-offset * 2}";\n          @if $text-field-underlined-padding {\n            $addon-offset: "#{$addon-offset} + #{$text-field-underlined-padding}";\n          }\n\n          &--underline-left-addon {\n            @include set-var(text-field-padding-left, calc(#{$addon-offset}));\n          }\n\n          &--underline-right-addon {\n            @include set-var(text-field-padding-right, calc(#{$addon-offset}));\n          }\n        }\n      }\n    }\n  }\n}\n\n@mixin _text-field-base-styles {\n  @include utils.map-to-styles($text-field-typography);\n  @include utils.rtl {\n    @include use-var(padding-left, text-field-padding-right);\n    @include use-var(padding-right, text-field-padding-left);\n  }\n  @include use-var(padding-left, text-field-padding-left);\n  @include use-var(padding-right, text-field-padding-right);\n  @include use-var(padding-top, text-field-padding-top);\n\n  background-color: transparent;\n  border-width: 0;\n  color: inherit;\n  flex: 1 1 auto;\n  height: 100%;\n  outline: none;\n  width: 100%;\n\n  &[disabled] {\n    @include theme.theme-use-var(color, text-disabled-color);\n  }\n}\n\n@mixin text-field-styles($disable-layer: false) {\n  @include utils.optional-layer(form, $disable-layer) {\n    .rmd-text-field {\n      @include _text-field-base-styles;\n\n      @if $text-field-color-min-width {\n        &[type="color"] {\n          min-width: $text-field-color-min-width;\n        }\n      }\n\n      &::placeholder {\n        @if not $disable-placeholder-ellipsis {\n          @include typography.text-overflow;\n        }\n\n        @include theme.theme-use-var(color, text-secondary-color);\n        // want to gain the same font styles as the input/textarea itself,\n        // just apply different colors as needed instead. Can\'t just do font: inherit\n        // since it\'ll break the styles in firefox.\n        font-family: inherit;\n        font-size: inherit;\n        font-weight: inherit;\n\n        // fix firefox setting opacity to 0.54 by default\n        opacity: 1;\n\n        // Note: doesn\'t look like firefox applies css transitions to placeholder text?\n        transition: opacity transition.$linear-duration;\n      }\n\n      &[disabled]::placeholder {\n        color: inherit;\n      }\n\n      &--placeholder-hidden:not(:focus)::placeholder {\n        opacity: 0;\n      }\n    }\n  }\n}\n\n@mixin password-styles($disable-layer: false) {\n  @include utils.optional-layer(form, $disable-layer) {\n    .rmd-password {\n      @include set-var(\n        text-field-padding-right,\n        $password-visibility-toggle-spacing\n      );\n\n      &__input {\n        @include utils.auto-rtl(margin-right, button.get-var(icon-size));\n      }\n\n      &__toggle {\n        @include utils.auto-rtl(right, 0);\n\n        position: absolute;\n      }\n    }\n  }\n}\n\n@mixin textarea-container-styles($disable-layer: false) {\n  @include utils.optional-layer(form, $disable-layer) {\n    .rmd-textarea-container {\n      @include set-var(addon-top, $textarea-addon-top);\n\n      height: auto;\n      max-width: 100%;\n      padding-top: calc(\n        #{get-var(text-field-padding-top)} + #{get-var(textarea-padding)}\n      );\n\n      &--cursor:hover {\n        // need to add this cursor back since the textarea container adds padding to\n        // itself instead of the textarea so it loses this cursor. the container\n        // element will still focus the textarea when clicked\n        cursor: text;\n      }\n\n      @if not\n        $disable-text-field-filled-theme or not\n        $disable-text-field-underlined-theme\n      {\n        &--underline-labelled {\n          @include set-var(textarea-padding, 0px);\n          @include set-var(\n            label-floating-top,\n            $text-field-underlined-label-padding-top\n          );\n        }\n      }\n\n      @if not $disable-textarea-resizing-rows {\n        &--height {\n          height: calc(\n            #{get-var(text-field-padding-top)} +\n              #{get-var(textarea-padding)} +\n              #{get-var(textarea-height)}\n          );\n        }\n\n        &--animate {\n          transition: height\n            transition.$linear-duration\n            transition.$linear-timing-function;\n        }\n\n        &__inner {\n          height: get-var(textarea-height, 100%);\n          width: 100%;\n\n          &--animate {\n            transition: height\n              transition.$linear-duration\n              transition.$linear-timing-function;\n          }\n        }\n      }\n    }\n  }\n}\n\n@mixin textarea-styles($disable-layer: false) {\n  @include utils.optional-layer(form, $disable-layer) {\n    .rmd-textarea {\n      @include set-var(text-field-padding-top, 0px);\n      @include use-var(min-height, text-field-height);\n\n      height: get-var(textarea-height, 100%);\n\n      @if not $disable-textarea-resize-horizontal {\n        &--rh {\n          resize: horizontal;\n        }\n      }\n\n      @if not $disable-textarea-resize-vertical {\n        &--rv {\n          resize: vertical;\n        }\n      }\n\n      &--rn {\n        overflow: hidden;\n        resize: none;\n      }\n\n      // only want the textarea to be scrollable if there\'s a limit on the rows\n      // since it\'ll flash the scrollbar on most OS during the height transition\n      &--scrollable {\n        overflow: auto;\n      }\n\n      @if not $disable-textarea-resizing-mask {\n        &--mask {\n          height: auto;\n          left: 0;\n          opacity: 0;\n          overflow: hidden;\n          pointer-events: none;\n          position: absolute;\n          right: 0;\n          z-index: -1;\n        }\n      }\n    }\n  }\n}\n\n@mixin select-styles($disable-layer: false) {\n  @include utils.optional-layer(form, $disable-layer) {\n    .rmd-select-container {\n      outline-style: none;\n    }\n\n    .rmd-selected-option {\n      position: absolute;\n    }\n\n    .rmd-select {\n      // disable pointer events on touch devices so the soft keyboard does not\n      // appear when clicking the select\n      @media (hover: none) and (pointer: course) {\n        pointer-events: none;\n      }\n\n      opacity: 0;\n\n      // All these additional overrides are provided so that the select will have\n      // the same sizing as a text field with the same props provided.\n      @if not $disable-text-field-underlined-theme {\n        &--underline {\n          @include utils.rtl {\n            @include use-var(padding-right, text-field-padding-left);\n\n            padding-left: 0;\n          }\n\n          padding-right: 0;\n        }\n      }\n\n      @if not $disable-text-field-outlined-theme {\n        &--outline {\n          @include utils.rtl {\n            @include use-var(padding-right, text-field-padding-left);\n\n            padding-left: $text-field-outlined-padding;\n          }\n\n          padding-right: $text-field-outlined-padding;\n        }\n      }\n\n      @if not $disable-text-field-filled-theme {\n        &--filled {\n          @include utils.rtl {\n            @include use-var(padding-right, text-field-padding-left);\n\n            padding-left: $text-field-filled-padding;\n          }\n\n          padding-right: $text-field-filled-padding;\n        }\n      }\n    }\n  }\n}\n\n@mixin option-styles($disable-layer: false) {\n  @include utils.optional-layer(form, $disable-layer) {\n    .rmd-option {\n      &--icon {\n        @include utils.rtl {\n          @include list.use-var(padding-left, item-horizontal-padding);\n\n          padding-right: $option-padding-left;\n        }\n\n        padding-left: $option-padding-left;\n      }\n\n      &--selected {\n        @include utils.map-to-styles($option-selected-styles);\n      }\n\n      &__icon {\n        @include icon.set-var(spacing, $option-selected-icon-spacing);\n        @include icon.set-var(size, $option-selected-icon-size);\n      }\n    }\n  }\n}\n\n@mixin native-select-styles($disable-layer: false) {\n  @include utils.optional-layer(form, $disable-layer) {\n    @if not $disable-native-select-multiple {\n      .rmd-native-select-container {\n        &--multi {\n          @include set-var(addon-top, $native-select-addon-top);\n          @include use-var(min-height, text-field-height);\n\n          height: auto;\n        }\n\n        &--padded {\n          padding-top: $native-select-multiple-padding;\n        }\n\n        @if not\n          $disable-text-field-filled-theme or not\n          $disable-text-field-underlined-theme\n        {\n          &--underline {\n            @include set-var(text-field-padding-top, 0);\n          }\n\n          &--underline-padded {\n            padding-top: $native-select-multiple-underline-padding;\n          }\n        }\n      }\n    }\n\n    .rmd-native-select {\n      @include _text-field-base-styles;\n      @include typography.text-overflow;\n\n      appearance: none;\n\n      &[multiple] {\n        overflow: auto;\n      }\n    }\n  }\n}\n\n@mixin text-field-addon-styles($disable-layer: false) {\n  @include utils.optional-layer(form, $disable-layer) {\n    .rmd-text-field-addon {\n      @if not\n        $disable-text-field-filled-theme or not\n        $disable-text-field-underlined-theme\n      {\n        @include use-var(margin-top, addon-margin-top);\n      }\n\n      // this makes it so that this container element is the same size as the\n      // child (normally icons). without this, icons would have a height of 30.5px\n      // and no longer be centered\n      display: inline-flex;\n      position: absolute;\n\n      // Note: Can\'t use `:first-child` and `:last-child` since\n      // password/autocomplete managers might add another element into the\n      // `.rmd-text-field-container` which would prevent these styles from being\n      // applied\n      &--before {\n        @include utils.auto-rtl(left, get-var(addon-left-offset));\n      }\n\n      &--after {\n        @include utils.auto-rtl(right, $text-field-spacing);\n      }\n\n      &--presentational {\n        pointer-events: none;\n      }\n    }\n  }\n}\n\n@mixin hidden-input-styles($disable-layer: false) {\n  @include utils.optional-layer(form, $disable-layer) {\n    .rmd-hidden-input {\n      height: 100%;\n      inset: 0;\n      margin: 0;\n      opacity: 0;\n      position: absolute;\n      width: 100%;\n      z-index: 1;\n\n      &:not(:disabled):hover {\n        cursor: pointer;\n      }\n    }\n  }\n}\n\n@mixin input-toggle-styles($disable-layer: false) {\n  @include utils.optional-layer(form, $disable-layer) {\n    .rmd-input-toggle {\n      @include interaction.surface(\n        $focus-selector:\n          if(\n            utils.$disable-has-selectors or utils.$disable-focus-visible,\n            "&:focus-within",\n            "&:has(:focus-visible)"\n          ),\n        $keyboard-only-focus: utils.$disable-has-selectors or\n          utils.$disable-focus-visible,\n        $disabled-selector: "&--disabled",\n        $higher-contrast: false\n      );\n      @include icon.set-var(color, currentcolor);\n\n      align-items: center;\n      border-radius: $input-toggle-border-radius;\n      display: inline-flex;\n      flex-shrink: 0;\n      justify-content: center;\n      padding: $input-toggle-padding;\n\n      &--em {\n        @include icon.set-var(size, 1em);\n      }\n\n      &--active {\n        @include use-var(color, active-color);\n      }\n\n      @if $input-toggle-small-size {\n        &--small {\n          font-size: $input-toggle-small-size;\n        }\n      }\n\n      @if $input-toggle-dense-size {\n        &--dense {\n          font-size: $input-toggle-dense-size;\n        }\n      }\n\n      @if $input-toggle-normal-size {\n        &--normal {\n          font-size: $input-toggle-normal-size;\n        }\n      }\n\n      @if $input-toggle-large-size {\n        &--large {\n          font-size: $input-toggle-large-size;\n        }\n      }\n\n      @if not $disable-uncontrolled-input-toggles {\n        &--uncontrolled {\n          $icon-color-selector: ".rmd-hidden-input:where(:checked:not(:disabled)) ~ .rmd-icon";\n          $unchecked-icon-selector: "~ :nth-child(-n + 1 of .rmd-icon)";\n          $checked-icon-selector: "~ :nth-child(n + 2 of .rmd-icon)";\n          // make sure the active color from the label also applies to the icon when\n          // checked\n          .rmd-label--active & #{$icon-color-selector} {\n            @include use-var(color, focus-color);\n          }\n\n          // make sure the error color applies to the icon when checked\n          &:where(:not(.rmd-error-color)) #{$icon-color-selector} {\n            @include use-var(color, active-color);\n          }\n\n          // when the input is checked, hide the first icon (unchecked state)\n          // when the input is not checked, hide the second icon (checked state)\n          .rmd-hidden-input:checked #{$unchecked-icon-selector},\n          .rmd-hidden-input:not(:checked) #{$checked-icon-selector} {\n            opacity: 0;\n            position: absolute;\n          }\n        }\n      }\n    }\n  }\n}\n\n@mixin switch-styles($disable-layer: false) {\n  @include utils.optional-layer(form, $disable-layer) {\n    .rmd-switch {\n      padding: $switch-track-vertical-padding $switch-track-horizontal-padding;\n\n      &--clickable:hover {\n        cursor: pointer;\n      }\n\n      &--current-color,\n      &--current-color .rmd-switch__input:checked + .rmd-switch__ball {\n        @include set-var(switch-ball-background-color, currentcolor);\n      }\n\n      &__input {\n        @if utils.$disable-focus-visible {\n          @include utils.keyboard-only {\n            &:focus + .rmd-switch__ball::before {\n              @include interaction.focus-styles;\n            }\n          }\n        } @else {\n          &:focus-visible + .rmd-switch__ball::before {\n            @include interaction.focus-styles;\n          }\n        }\n\n        &:disabled + .rmd-switch__ball {\n          cursor: auto;\n\n          &:hover::before {\n            @include interaction.set-var(background-color, transparent);\n          }\n        }\n      }\n\n      &__track {\n        @if not $disable-switch-circular-progress {\n          @include progress.set-var(\n            circular-stroke-width,\n            $switch-circular-progress-width\n          );\n          @include progress.set-var(\n            circular-size,\n            $switch-circular-progress-size\n          );\n        }\n        @if not $disable-switch-icon {\n          @include icon.set-var(size, $switch-icon-size);\n        }\n        @include use-var(background-color, switch-track-background-color);\n\n        border-radius: $switch-track-border-radius;\n        height: $switch-track-height;\n        position: relative;\n        transition: background-color transition.$linear-duration\n          transition.$linear-timing-function;\n        width: $switch-track-width;\n\n        &--disabled {\n          opacity: $switch-disabled-opacity;\n        }\n      }\n\n      &__ball {\n        // The focus and disabled states are handled by the `.rmd-switch__input`\'s\n        // :focus and :disabled\' states instead.\n        @include interaction.surface(\n          $focus-selector: null,\n          $disabled-selector: null,\n          $clickable: false\n        );\n        @include utils.auto-rtl(left, calc(-50% + #{$switch-ball-offset}));\n\n        align-items: center;\n        border-radius: $switch-ball-border-radius;\n        display: flex;\n        height: $switch-ball-size * 2;\n        justify-content: center;\n        top: calc(-50% - #{$switch-ball-size - $switch-track-height});\n        transition-duration: transition.$linear-duration;\n        transition-property: background-color, transform;\n        transition-timing-function: transition.$linear-timing-function;\n        width: $switch-ball-size * 2;\n        z-index: 1;\n\n        &::after {\n          @include use-var(background-color, switch-ball-background-color);\n\n          border-radius: inherit;\n          box-shadow: box-shadows.box-shadow(1);\n          content: "";\n          height: $switch-ball-size;\n          left: 25%;\n          pointer-events: none;\n          position: absolute;\n          top: 25%;\n          width: $switch-ball-size;\n          z-index: 0;\n        }\n\n        $active-selector: ".rmd-switch__input:checked + &" +\n          if($disable-menu-item-switch, "", ", &--active");\n\n        #{$active-selector} {\n          $offset: $switch-ball-size + $switch-ball-offset;\n\n          @include utils.rtl {\n            transform: translateX(-$offset);\n          }\n          @include set-var(switch-ball-background-color, get-var(active-color));\n\n          transform: translateX($offset);\n        }\n      }\n    }\n  }\n}\n\n@mixin menu-item-input-toggle-styles($disable-layer: false) {\n  @include utils.optional-layer(form, $disable-layer) {\n    .rmd-menu-item-input-toggle {\n      @if not $disable-menu-item-radio or not $disable-menu-item-switch {\n        &__icon {\n          // remove the padding since the icon isn\'t the click target anymore.\n          padding: 0;\n\n          // disable the hover states since it\'s handled by the ListItem instead\n          &::before {\n            content: none;\n          }\n        }\n      }\n\n      @if not $disable-menu-item-switch {\n        // this makes it so that the spacing between the switch and the text\n        // aligns with other menu items/icons\n        &__track {\n          @include icon.set-var(size, $switch-track-width);\n        }\n\n        // decrease the ball size and remove the hover states since it\'s handled\n        // by the ListItem instead. without decreasing the ball size, horizontal\n        // scrollbars will appear when the switch is checked\n        &__ball {\n          @include utils.auto-rtl(left, -$switch-ball-offset);\n\n          height: $switch-ball-size;\n          top: calc(50% - $switch-ball-size * 0.5);\n          width: $switch-ball-size;\n\n          &::before {\n            content: none;\n          }\n\n          &::after {\n            inset: 0;\n          }\n        }\n      }\n    }\n  }\n}\n\n@mixin slider-styles($disable-layer: false) {\n  @include utils.optional-layer(form, $disable-layer) {\n    .rmd-slider-container {\n      @if $slider-container-addon-spacing and\n        $slider-container-addon-spacing !=\n        icon.$spacing\n      {\n        @include icon.set-var(spacing, $slider-container-addon-spacing);\n      }\n\n      @include icon.use-var(gap, spacing);\n\n      align-items: center;\n\n      @if not $disable-horizontal-slider {\n        &--h {\n          display: flex;\n          width: 100%;\n        }\n\n        &--pad-left {\n          padding-left: $slider-container-padding;\n        }\n\n        &--pad-right {\n          padding-right: $slider-container-padding;\n        }\n      }\n\n      @if not $disable-vertical-slider {\n        &--v {\n          display: inline-flex;\n          flex-direction: column-reverse;\n        }\n\n        &--pad-top {\n          padding-top: $slider-container-padding;\n        }\n\n        &--pad-bottom {\n          padding-bottom: $slider-container-padding;\n        }\n      }\n    }\n\n    .rmd-slider-track {\n      position: relative;\n\n      &::before,\n      &::after {\n        @if $slider-track-color {\n          @include use-var(background-color, slider-color);\n        }\n\n        content: "";\n        pointer-events: none;\n        position: absolute;\n      }\n\n      &::before {\n        @if not $slider-track-color {\n          @include use-var(background-color, slider-inactive-color);\n        }\n\n        opacity: $slider-track-inactive-opacity;\n        z-index: $slider-track-inactive-z-index;\n      }\n\n      &::after {\n        @if not $slider-track-color {\n          @include use-var(background-color, slider-active-color);\n        }\n\n        opacity: $slider-track-active-opacity;\n        z-index: $slider-track-active-z-index;\n      }\n\n      &--hoverable:hover {\n        cursor: pointer;\n      }\n\n      &--animate::after {\n        transition-duration: $slider-transition-duration;\n        transition-timing-function: $slider-transition-timing-function;\n      }\n\n      @if $slider-track-color {\n        &--disabled {\n          @include set-var(slider-color, $slider-track-disabled-color);\n\n          @if $slider-track-inactive-opacity {\n            &::before {\n              opacity: 1;\n            }\n          }\n\n          &::after {\n            @include set-var(slider-active-size, 0px);\n            @if $slider-track-active-opacity {\n              opacity: 1;\n            }\n          }\n        }\n      }\n\n      @if not $disable-horizontal-slider {\n        &--h {\n          @include use-var(height, slider-size);\n\n          align-items: center;\n          display: flex;\n          width: 100%;\n\n          &::before {\n            @include use-var(height, slider-inactive-size);\n\n            width: 100%;\n          }\n\n          &::after {\n            @include use-var(height, slider-active-size);\n          }\n        }\n\n        &--h1::after {\n          @include utils.auto-rtl(left, 0);\n          @include use-var(max-width, slider-offset-1);\n\n          transition-property: max-width;\n          width: 100%;\n        }\n\n        @if not $disable-range-slider {\n          &--h2::after {\n            @include utils.rtl {\n              left: calc(100% - get-var(slider-offset-2));\n              right: get-var(slider-offset-1);\n            }\n\n            left: get-var(slider-offset-1);\n            right: calc(100% - get-var(slider-offset-2));\n            transition-property: left, right;\n            will-change: left, right;\n          }\n        }\n      }\n\n      @if not $disable-vertical-slider {\n        &--v {\n          @include use-var(height, slider-vertical-size);\n          @include use-var(width, slider-size);\n\n          display: inline-flex;\n          justify-content: center;\n\n          &::before {\n            @include use-var(width, slider-inactive-size);\n\n            height: 100%;\n          }\n\n          &::after {\n            @include use-var(width, slider-active-size);\n\n            bottom: 0;\n          }\n        }\n\n        // one thumb track horizontal styles\n        &--v1::after {\n          @include use-var(max-height, slider-offset-1);\n\n          height: 100%;\n          transition-property: max-height;\n        }\n\n        @if not $disable-range-slider {\n          // two thumb track horizontal styles\n          &--v2::after {\n            @include use-var(bottom, slider-offset-1);\n\n            top: calc(100% - #{get-var(slider-offset-2)});\n            transition-property: bottom, top;\n            will-change: bottom, top;\n          }\n        }\n      }\n    }\n\n    .rmd-slider-thumb {\n      @include use-var(\n        background-color,\n        if($slider-track-color, slider-color, slider-active-color)\n      );\n\n      border-radius: $slider-thumb-border-radius;\n      height: $slider-thumb-size;\n      outline-style: none;\n      position: absolute;\n      width: $slider-thumb-size;\n      z-index: $slider-thumb-z-index;\n\n      &::after {\n        @include utils.pseudo-element($z-index: null);\n\n        background-color: inherit;\n        opacity: $slider-thumb-bubble-opacity;\n        transition: transform $slider-transition-duration\n          $slider-transition-timing-function;\n      }\n\n      @if utils.$disable-focus-visible {\n        @include utils.keyboard-only {\n          &:focus::after {\n            transform: scale($slider-thumb-focus-scale);\n          }\n        }\n      } @else {\n        &:focus-visible::after {\n          transform: scale($slider-thumb-focus-scale);\n        }\n      }\n\n      @include utils.mouse-hover(false) {\n        &:hover::after,\n        &--active::after,\n        &--active:hover::after {\n          transform: scale($slider-thumb-active-scale);\n        }\n      }\n\n      &--animate {\n        transition-duration: $slider-transition-duration;\n        transition-timing-function: $slider-transition-timing-function;\n      }\n\n      &--disabled {\n        background-color: $slider-thumb-disabled-color;\n\n        // prevent hover effects like the "bubble"\n        pointer-events: none;\n      }\n\n      &--mask {\n        @include theme.theme-use-var(background-color);\n\n        border-radius: 0;\n      }\n\n      @if not $disable-horizontal-slider {\n        &--h {\n          @include utils.rtl {\n            transform: translateX(50%);\n            transition-property: right;\n          }\n\n          transform: translateX(-50%);\n          transition-property: left;\n        }\n\n        &--h1 {\n          @include utils.auto-rtl(left, get-var(slider-offset-1));\n        }\n\n        @if not $disable-range-slider {\n          &--h2 {\n            @include utils.auto-rtl(left, get-var(slider-offset-2));\n          }\n        }\n\n        &--disabled-h {\n          @include utils.rtl {\n            transform: translateX(50%) scale($slider-thumb-disabled-scale);\n          }\n\n          transform: translateX(-50%) scale($slider-thumb-disabled-scale);\n        }\n\n        &--mask-h {\n          @include utils.rtl {\n            transform: translateX(50%) scale($slider-thumb-mask-scale);\n          }\n\n          transform: translateX(-50%) scale($slider-thumb-mask-scale);\n        }\n      }\n\n      @if not $disable-vertical-slider {\n        &--v {\n          // want the thumb to be aligned so that the center is at the current value.\n          // without this transformation, the thumb\'s bottom side would be aligned\n          // with the current value\n          transform: translateY(50%);\n          transition-property: bottom;\n        }\n\n        &--v1 {\n          @include use-var(bottom, slider-offset-1);\n        }\n\n        @if not $disable-range-slider {\n          &--v2 {\n            @include use-var(bottom, slider-offset-2);\n          }\n        }\n\n        &--disabled-v {\n          transform: translateY(50%) scale($slider-thumb-disabled-scale);\n        }\n\n        &--mask-v {\n          transform: translateY(50%) scale($slider-thumb-mask-scale);\n        }\n      }\n\n      &__input {\n        appearance: none;\n        height: 0;\n        opacity: 0;\n        pointer-events: none;\n        width: 0;\n      }\n    }\n\n    @if not $disable-discrete-slider {\n      .rmd-slider-tooltip {\n        opacity: 1;\n        position: absolute;\n        z-index: $slider-tooltip-z-index;\n\n        // this is used to generate the triangle\n        &::after {\n          border: $slider-tooltip-caret-size solid transparent;\n          content: "";\n          position: absolute;\n        }\n\n        &--animate {\n          transition: transform\n            $slider-transition-duration\n            $slider-transition-timing-function;\n        }\n\n        @if not $disable-horizontal-slider {\n          &--h {\n            @include utils.rtl {\n              @include set-var(slider-tooltip-translate, 50%);\n            }\n\n            top: $slider-tooltip-offset;\n            transform: translateX(get-var(slider-tooltip-translate))\n              scale(get-var(slider-tooltip-scale));\n\n            &::after {\n              @include tooltip.use-var(border-top-color, background-color);\n\n              left: 50%;\n              top: 100%;\n              transform: translateX(get-var(slider-tooltip-translate));\n            }\n          }\n\n          &--h-off {\n            @include set-var(slider-tooltip-scale, 0);\n          }\n\n          // have to "duplicate" these styles since the `--h-off` would override the\n          // `--h` styles due to css order.\n          &--h-on {\n            @include set-var(slider-tooltip-scale, 1);\n          }\n        }\n\n        @if not $disable-vertical-slider {\n          &--v {\n            // going to force rendering always to the left even in RTL languages\n            left: $slider-tooltip-offset;\n            transform: translateY(50%) scale(1);\n\n            &::after {\n              @include tooltip.use-var(border-left-color, background-color);\n\n              left: 100%;\n              top: 50%;\n              transform: translateY(-50%);\n            }\n          }\n\n          &--v-off {\n            transform: translateY(50%) scale(0);\n          }\n\n          // have to "duplicate" these styles since the `--v-off` would override the\n          // `--v` styles due to css order.\n          &--v-on {\n            transform: translateY(50%) scale(1);\n          }\n        }\n      }\n    }\n\n    @if not $disable-discrete-slider-marks {\n      .rmd-slider-mark {\n        border-radius: $slider-mark-border-radius;\n        position: absolute;\n\n        &--inactive {\n          @include use-var(background-color, slider-mark-inactive-color);\n          @include use-var(opacity, slider-mark-inactive-opacity);\n\n          z-index: $slider-mark-inactive-z-index;\n        }\n\n        &--active {\n          @include use-var(background-color, slider-mark-active-color);\n          @include use-var(opacity, slider-mark-active-opacity);\n\n          z-index: $slider-mark-active-z-index;\n        }\n\n        @if not $disable-horizontal-slider {\n          &--h {\n            @include utils.auto-rtl(left, get-var(slider-mark-offset));\n\n            height: $slider-mark-height;\n            top: 50%;\n            transform: translateY(-50%);\n            width: $slider-mark-width;\n          }\n        }\n\n        @if not $disable-vertical-slider {\n          &--v {\n            bottom: get-var(slider-mark-offset);\n            height: $slider-mark-width;\n            transform: translateY(50%);\n            width: $slider-mark-height;\n          }\n        }\n      }\n    }\n\n    @if not $disable-discrete-slider-marks-labels {\n      .rmd-slider-mark-label {\n        position: absolute;\n\n        @if not $disable-horizontal-slider {\n          &--h {\n            @include utils.rtl {\n              @include use-var(right, slider-mark-offset);\n\n              left: auto;\n              transform: translateX(50%);\n            }\n            @include use-var(left, slider-mark-offset);\n\n            top: 100%;\n            transform: translateX(-50%);\n          }\n        }\n\n        @if not $disable-vertical-slider {\n          &--v {\n            @include utils.auto-rtl(left, 100%);\n\n            top: get-var(slider-mark-offset);\n            transform: translateY(-50%);\n          }\n        }\n      }\n    }\n  }\n}\n\n@mixin variables {\n  @if not $disable-everything {\n    @include set-var(active-color, $active-color);\n    @include set-var(focus-color, $focus-color);\n\n    @if not $disable-label and not $disable-floating-label {\n      @include set-var(label-floating-top, $label-floating-top);\n      @include set-var(label-left-offset, 0px);\n      @include set-var(label-top-offset, 0px);\n      @include set-var(label-active-padding, 0px);\n      @include set-var(label-active-background-color, transparent);\n    }\n\n    @if not $disable-text-field {\n      @include set-var(text-field-height, $text-field-height);\n      @include set-var(text-field-padding-left, 0px);\n      @include set-var(text-field-padding-right, 0px);\n      @include set-var(text-field-padding-top, 0px);\n      @include set-var(text-field-border-color, $text-field-border-color);\n      @include set-var(\n        text-field-hover-border-color,\n        $text-field-hover-border-color\n      );\n\n      @include set-var(\n        text-field-filled-color,\n        $text-field-filled-background-color\n      );\n    }\n\n    @if not $disable-textarea {\n      @include set-var(textarea-height, $text-field-height);\n      @include set-var(textarea-padding, $textarea-vertical-padding);\n    }\n\n    @if not $disable-text-field-addon {\n      @include set-var(addon-top, auto);\n      @include set-var(addon-margin-top, 0px);\n      @include set-var(addon-left-offset, 0px);\n    }\n\n    @if not $disable-switch {\n      @include set-var(\n        switch-track-background-color,\n        $switch-track-background-color\n      );\n      @include set-var(\n        switch-ball-background-color,\n        $switch-ball-background-color\n      );\n    }\n\n    @if not $disable-slider {\n      @include set-var(slider-color, $slider-track-color);\n      @include set-var(slider-active-color, $slider-track-active-color);\n      @include set-var(slider-inactive-color, $slider-track-inactive-color);\n      @include set-var(slider-size, $slider-size);\n      @include set-var(slider-active-size, $slider-track-active-size);\n      @include set-var(slider-inactive-size, $slider-track-inactive-size);\n      @if not $disable-discrete-slider {\n        @include set-var(slider-tooltip-scale, 1);\n        @include set-var(slider-tooltip-translate, -50%);\n\n        @if not $disable-discrete-slider-marks {\n          @include set-var(slider-mark-offset, 0%);\n          @include set-var(slider-mark-active-color, $slider-mark-active-color);\n          @include set-var(\n            slider-mark-active-opacity,\n            $slider-mark-active-opacity\n          );\n          @include set-var(\n            slider-mark-inactive-color,\n            $slider-mark-inactive-color\n          );\n          @include set-var(\n            slider-mark-inactive-opacity,\n            $slider-mark-inactive-opacity\n          );\n        }\n      }\n\n      @if not $disable-vertical-slider {\n        @include set-var(slider-vertical-size, $slider-vertical-size);\n      }\n    }\n  }\n}\n\n@mixin styles($disable-layer: false) {\n  @if not $disable-everything {\n    @include utils.optional-layer(form, $disable-layer) {\n      @include theme.default-system-theme {\n        @include use-dark-theme;\n      }\n\n      @if not $disable-fieldset {\n        .rmd-fieldset {\n          &--unstyled {\n            border: 0;\n            margin: 0;\n            min-width: 0; // just so it can shrink correctly in flex or grid\n            padding: 0;\n          }\n\n          &--full-width {\n            flex: 1 1 auto;\n            width: 100%;\n          }\n        }\n      }\n\n      @if not $disable-label {\n        @include label-styles(true);\n      }\n\n      @if not $disable-file-input {\n        @include file-input-styles(true);\n      }\n\n      @if not $disable-message {\n        @include form-message-styles(true);\n      }\n\n      @if not $_disable-text-field-container {\n        @include text-field-container-styles(true);\n      }\n\n      @if not\n        $disable-text-field or not\n        $disable-password or not\n        $disable-textarea\n      {\n        @include text-field-styles(true);\n      }\n\n      @if not $disable-password {\n        @include password-styles(true);\n      }\n\n      @if not $disable-textarea {\n        @include textarea-container-styles(true);\n        @include textarea-styles(true);\n      }\n\n      @if not $disable-select {\n        @include select-styles(true);\n      }\n\n      @if not $disable-option {\n        @include option-styles(true);\n      }\n\n      @if not $disable-native-select {\n        @include native-select-styles(true);\n      }\n\n      @if not $disable-text-field-addon {\n        @include text-field-addon-styles(true);\n      }\n\n      @if not $disable-checkbox or not $disable-radio or not $disable-switch {\n        @include hidden-input-styles(true);\n        @include input-toggle-styles(true);\n      }\n\n      @if not $disable-switch {\n        @include switch-styles(true);\n      }\n\n      @if not\n        $disable-menu-item-checkbox or not\n        $disable-menu-item-radio or not\n        $disable-menu-item-switch\n      {\n        @include menu-item-input-toggle-styles(true);\n      }\n\n      @if not $disable-slider {\n        @include slider-styles(true);\n      }\n    }\n  }\n}\n',
+    '@use "sass:map";\n@use "sass:math";\n@use "sass:color";\n@use "../utils";\n@use "../box-shadows";\n@use "../button/button";\n@use "../progress/progress";\n@use "../theme/colors";\n@use "../theme/theme";\n@use "../list/list";\n@use "../icon/icon";\n@use "../tooltip/tooltip";\n@use "../transition/transition";\n@use "../typography/typography";\n@use "../interaction/interaction";\n\n$disable-everything: false !default;\n$disable-fieldset: $disable-everything !default;\n$disable-message: $disable-everything !default;\n$disable-label: $disable-everything !default;\n$disable-floating-label: $disable-everything !default;\n$disable-label-gap: $disable-everything !default;\n$disable-label-reversed: $disable-everything !default;\n$disable-label-stacked: $disable-everything !default;\n$disable-label-stacked-reversed: $disable-everything !default;\n$disable-file-input: $disable-everything !default;\n$disable-text-field: $disable-everything !default;\n$disable-textarea: $disable-everything !default;\n$disable-password: $disable-text-field !default;\n$disable-text-field-addon: $disable-text-field and $disable-password and\n  $disable-textarea !default;\n$disable-placeholder-ellipsis: false !default;\n$disable-text-field-container-dense: false !default;\n$disable-select: $disable-everything !default;\n$disable-option: $disable-select !default;\n$disable-native-select: $disable-everything !default;\n$disable-native-select-multiple: $disable-everything !default;\n$disable-checkbox: $disable-everything !default;\n$disable-radio: $disable-everything !default;\n$disable-uncontrolled-input-toggles: false !default;\n$disable-switch: $disable-everything !default;\n$disable-switch-circular-progress: progress.$disable-circular !default;\n$disable-switch-icon: false !default;\n$disable-menu-item-checkbox: $disable-checkbox !default;\n$disable-menu-item-radio: $disable-radio !default;\n$disable-menu-item-switch: $disable-switch !default;\n$disable-slider: $disable-everything !default;\n$disable-horizontal-slider: $disable-everything !default;\n$disable-vertical-slider: $disable-everything !default;\n$disable-range-slider: $disable-everything !default;\n$disable-discrete-slider: $disable-everything !default;\n$disable-discrete-slider-marks: $disable-discrete-slider !default;\n$disable-discrete-slider-marks-labels: $disable-discrete-slider-marks !default;\n\n// Note: enabling the filled theme forces the underlined theme to be used since it depends on the same styles\n$disable-text-field-filled-theme: $disable-everything !default;\n$disable-text-field-outlined-theme: $disable-everything !default;\n$disable-text-field-underlined-theme: $disable-everything !default;\n$disable-text-field-counter: $disable-everything !default;\n$disable-text-field-underline-left: $disable-everything !default;\n$disable-text-field-underline-center: $disable-everything !default;\n$disable-text-field-underline-right: $disable-everything !default;\n\n$disable-textarea-resizing-rows: $disable-everything !default;\n$disable-textarea-resizing-mask: $disable-textarea-resizing-rows !default;\n$disable-textarea-resize-horizontal: $disable-everything !default;\n$disable-textarea-resize-vertical: $disable-everything !default;\n\n$active-color: theme.theme-get-var(primary-color) !default;\n$focus-color: interaction.$focus-color !default;\n\n$label-gap: icon.$spacing !default;\n$label-font-size: 1em !default;\n$label-typography: map.merge(\n  typography.$body-1-styles,\n  (\n    font-size: $label-font-size,\n  )\n) !default;\n$label-floating-top: 1rem !default;\n$label-floating-top-dense: 0.9rem !default;\n$label-floating-scale: 0.75 !default;\n$label-floating-padding: 0.25rem !default;\n\n$message-typography-styles: map.merge(\n  typography.$body-2-styles,\n  (\n    font-size: 0.75rem,\n  )\n) !default;\n$message-counter-spacing: icon.$spacing !default;\n$message-margin-top: 0.5rem !default;\n$message-margin-bottom: 1rem !default;\n$message-min-height: 2rem !default;\n\n$text-field-typography: map.merge(\n  typography.$base-font-styles,\n  map.merge(\n    typography.$body-1-styles,\n    (\n      font-size: 1em,\n    )\n  )\n) !default;\n$text-field-height: 3rem !default;\n$text-field-dense-height: 2.5rem !default;\n$text-field-label-height: 3.5rem !default;\n$text-field-label-dense-height: 3.25rem !default;\n$text-field-spacing: icon.$spacing !default;\n$text-field-border-radius: 0.25rem !default;\n$text-field-border-width: 1px !default;\n$text-field-border-width-active: 2px !default;\n$text-field-filled-padding: 0.75rem !default;\n$text-field-outlined-padding: 1rem !default;\n$text-field-underlined-padding: null !default;\n// set this to null to remove this style\n$text-field-underlined-placeholder-height: 2.5rem !default;\n$text-field-underlined-placeholder-padding-top: 0.5rem !default;\n$text-field-underlined-placeholder-addon-padding-top: 0.25rem !default;\n// this is the default height of the label with line-height\n$text-field-underlined-label-padding-top: 1.5rem !default;\n$text-field-underlined-label-left-offset: icon.$spacing !default;\n$text-field-color-min-width: 5rem !default;\n\n$text-field-addon-margin: icon.$spacing !default;\n\n$text-field-light-border-color: rgba(#000, 0.12) !default;\n$text-field-dark-border-color: rgba(#fff, 0.5) !default;\n$text-field-border-color: theme.get-default-color(\n  $text-field-light-border-color,\n  $text-field-dark-border-color\n) !default;\n\n$text-field-light-hover-border-color: rgba(#000, 0.87) !default;\n$text-field-dark-hover-border-color: rgba(#fff, 0.87) !default;\n$text-field-hover-border-color: theme.get-default-color(\n  $text-field-light-hover-border-color,\n  $text-field-dark-hover-border-color\n) !default;\n\n$text-field-light-filled-background-color: colors.$grey-100 !default;\n$text-field-dark-filled-background-color: #424242 !default;\n// $text-field-dark-filled-background-color: core.$grey-700 !default;\n$text-field-filled-background-color: theme.get-default-color(\n  $text-field-light-filled-background-color,\n  $text-field-dark-filled-background-color\n) !default;\n\n$textarea-addon-top: 1rem !default;\n$textarea-vertical-padding: 0.75rem !default;\n\n$password-visibility-toggle-spacing: 0.25rem !default;\n\n$native-select-addon-top: 1rem !default;\n$native-select-multiple-padding: 0.75rem !default;\n$native-select-multiple-underline-padding: 1.5rem !default;\n\n$option-selected-icon-size: 1rem !default;\n$option-selected-styles: (\n  --rmd-icon-color: currentcolor,\n  background-color: colors.$blue-900,\n  color: colors.$white,\n) !default;\n$option-padding-left: list.$item-horizontal-padding - math.div(\n    icon.$size - $option-selected-icon-size,\n    2\n  ) !default;\n$option-selected-icon-spacing: $option-padding-left !default;\n\n$input-toggle-border-radius: 50% !default;\n$input-toggle-padding: 0.5em !default;\n$input-toggle-small-size: 1rem !default;\n$input-toggle-dense-size: icon.$dense-size !default;\n$input-toggle-normal-size: icon.$size !default;\n$input-toggle-large-size: 2rem !default;\n\n$switch-disabled-opacity: 0.5 !default;\n$switch-ball-size: 1.25em !default;\n$switch-ball-border-radius: 50% !default;\n$switch-ball-offset: 0.25em !default;\n$switch-ball-background-color: color.adjust(\n  colors.$white,\n  $lightness: -5%\n) !default;\n$switch-track-height: 1em !default;\n$switch-track-width: 2.25em !default;\n$switch-track-border-radius: 0.5em !default;\n$switch-track-vertical-padding: 0.75em !default;\n$switch-track-horizontal-padding: 0.875em !default;\n$switch-track-light-background-color: colors.$grey-400 !default;\n$switch-track-dark-background-color: if(\n  theme.$disable-dark-elevation,\n  $switch-track-light-background-color,\n  map.get(theme.$dark-elevation-colors, 24)\n) !default;\n$switch-track-background-color: theme.get-default-color(\n  $switch-track-light-background-color,\n  $switch-track-dark-background-color\n) !default;\n$switch-icon-size: 1em !default;\n$switch-circular-progress-width: 12 !default;\n$switch-circular-progress-size: 1em !default;\n\n$slider-size: 2rem !default;\n$slider-vertical-size: 15rem !default;\n$slider-track-color: theme.theme-get-var(primary-color) !default;\n$slider-track-active-size: 0.375rem !default;\n$slider-track-active-color: null !default;\n$slider-track-active-opacity: null !default;\n$slider-track-active-z-index: 2 !default;\n$slider-track-inactive-size: 0.25rem !default;\n$slider-track-inactive-color: null !default;\n$slider-track-inactive-opacity: 0.5 !default;\n$slider-track-inactive-z-index: 1 !default;\n$slider-track-disabled-color: theme.theme-get-var(text-disabled-color) !default;\n\n$slider-mark-height: $slider-track-inactive-size !default;\n$slider-mark-width: $slider-track-inactive-size !default;\n$slider-mark-border-radius: 50% !default;\n$slider-mark-light-active-color: theme.theme-get-var(on-primary-color) !default;\n$slider-mark-dark-active-color: $slider-mark-light-active-color !default;\n$slider-mark-light-active-opacity: 0.38 !default;\n$slider-mark-dark-active-opacity: 0.38 !default;\n$slider-mark-active-color: theme.get-default-color(\n  $slider-mark-light-active-color,\n  $slider-mark-dark-active-color\n) !default;\n$slider-mark-active-opacity: theme.get-default-color(\n  $slider-mark-light-active-opacity,\n  $slider-mark-dark-active-opacity\n) !default;\n\n$slider-mark-light-inactive-color: colors.$black !default;\n$slider-mark-dark-inactive-color: colors.$white !default;\n$slider-mark-inactive-color: theme.get-default-color(\n  $slider-mark-light-inactive-color,\n  $slider-mark-dark-inactive-color\n) !default;\n$slider-mark-light-inactive-opacity: 1 !default;\n$slider-mark-dark-inactive-opacity: 0.8 !default;\n$slider-mark-inactive-opacity: theme.get-default-color(\n  $slider-mark-light-inactive-opacity,\n  $slider-mark-dark-inactive-opacity\n) !default;\n$slider-mark-inactive-z-index: 1 !default;\n$slider-mark-active-z-index: $slider-track-active-z-index + 1 !default;\n\n$slider-thumb-size: 1.25rem !default;\n$slider-thumb-border-radius: 50% !default;\n$slider-thumb-bubble-opacity: 0.3 !default;\n$slider-thumb-z-index: $slider-track-active-z-index !default;\n$slider-thumb-focus-scale: 2 !default;\n$slider-thumb-active-scale: 2.5 !default;\n$slider-thumb-disabled-scale: 0.5 !default;\n$slider-thumb-mask-scale: 0.8 !default;\n$slider-thumb-disabled-color: $slider-track-disabled-color !default;\n$slider-tooltip-caret-size: 0.3rem !default;\n$slider-tooltip-offset: -($slider-thumb-size + icon.$spacing) !default;\n$slider-tooltip-z-index: 0 !default;\n$slider-container-padding: $slider-thumb-size * 0.5 !default;\n$slider-container-addon-spacing: $slider-thumb-size !default;\n$slider-transition-duration: transition.$linear-duration !default;\n$slider-transition-timing-function: transition.$linear-timing-function !default;\n\n// internal variable helpers\n$_disable-text-field-container: $disable-text-field and $disable-password and\n  $disable-textarea and $disable-select and $disable-native-select;\n\n$variables: (\n  active-color,\n  focus-color,\n  addon-top,\n  addon-margin-top,\n  addon-left-offset,\n  label-floating-top,\n  label-left-offset,\n  label-top-offset,\n  label-active-padding,\n  label-active-background-color,\n  text-field-height,\n  text-field-padding-left,\n  text-field-padding-right,\n  text-field-padding-top,\n  text-field-border-color,\n  text-field-hover-border-color,\n  text-field-filled-color,\n  textarea-height,\n  textarea-padding,\n  switch-track-background-color,\n  switch-ball-background-color,\n  slider-color,\n  slider-active-color,\n  slider-inactive-color,\n  slider-size,\n  slider-active-size,\n  slider-inactive-size,\n  slider-vertical-size,\n  slider-offset-1,\n  slider-offset-2,\n  slider-tooltip-scale,\n  slider-tooltip-translate,\n  slider-mark-offset,\n  slider-mark-active-color,\n  slider-mark-active-opacity,\n  slider-mark-inactive-color,\n  slider-mark-inactive-opacity\n);\n\n@function get-var($name, $fallback: null) {\n  $var: utils.get-var-name($variables, $name, "form");\n  @if $fallback {\n    @return var(#{$var}, #{$fallback});\n  }\n\n  @return var(#{$var});\n}\n\n@mixin set-var($name, $value) {\n  @if $value {\n    #{utils.get-var-name($variables, $name, "form")}: #{$value};\n  }\n}\n\n@mixin use-var($property, $name: $property, $fallback: null) {\n  #{$property}: get-var($name, $fallback);\n}\n\n@mixin use-light-theme {\n  @if not $disable-everything {\n    @include set-var(text-field-border-color, $text-field-light-border-color);\n    @include set-var(\n      text-field-hover-border-color,\n      $text-field-light-hover-border-color\n    );\n    @if not $disable-text-field-filled-theme {\n      @include set-var(\n        text-field-filled-color,\n        $text-field-light-filled-background-color\n      );\n    }\n    @if not $disable-switch {\n      @include set-var(\n        switch-track-background-color,\n        $switch-track-light-background-color\n      );\n    }\n  }\n\n  @if not $disable-discrete-slider-marks {\n    @if $slider-mark-light-active-color and\n      $slider-mark-light-active-color !=\n      $slider-mark-dark-active-color\n    {\n      @include set-var(\n        slider-mark-active-color,\n        $slider-mark-light-active-color\n      );\n    }\n\n    @if $slider-mark-light-inactive-color and\n      $slider-mark-light-inactive-color !=\n      $slider-mark-dark-inactive-color\n    {\n      @include set-var(\n        slider-mark-inactive-color,\n        $slider-mark-light-inactive-color\n      );\n    }\n    @if $slider-mark-light-inactive-opacity and\n      $slider-mark-light-inactive-opacity !=\n      $slider-mark-dark-inactive-opacity\n    {\n      @include set-var(\n        slider-mark-inactive-opacity,\n        $slider-mark-light-inactive-opacity\n      );\n    }\n  }\n}\n\n@mixin use-dark-theme {\n  @if not $disable-everything {\n    @include set-var(text-field-border-color, $text-field-dark-border-color);\n    @include set-var(\n      text-field-hover-border-color,\n      $text-field-dark-hover-border-color\n    );\n    @if not $disable-text-field-filled-theme {\n      @include set-var(\n        text-field-filled-color,\n        $text-field-dark-filled-background-color\n      );\n    }\n    @if not $disable-switch {\n      @include set-var(\n        switch-track-background-color,\n        $switch-track-dark-background-color\n      );\n    }\n  }\n\n  @if not $disable-discrete-slider-marks {\n    @if $slider-mark-dark-active-color and\n      $slider-mark-light-active-color !=\n      $slider-mark-dark-active-color\n    {\n      @include set-var(\n        slider-mark-active-color,\n        $slider-mark-dark-active-color\n      );\n    }\n\n    @if $slider-mark-dark-inactive-color and\n      $slider-mark-light-inactive-color !=\n      $slider-mark-dark-inactive-color\n    {\n      @include set-var(\n        slider-mark-inactive-color,\n        $slider-mark-dark-inactive-color\n      );\n    }\n    @if $slider-mark-dark-inactive-opacity and\n      $slider-mark-light-inactive-opacity !=\n      $slider-mark-dark-inactive-opacity\n    {\n      @include set-var(\n        slider-mark-inactive-opacity,\n        $slider-mark-dark-inactive-opacity\n      );\n    }\n  }\n}\n\n@mixin file-input-styles($disable-layer: false) {\n  @if utils.$disable-has-selectors or utils.$disable-focus-visible {\n    .rmd-file-input:focus-within::before {\n      @include utils.keyboard-only {\n        @include interaction.focus-styles;\n      }\n    }\n  } @else {\n    .rmd-file-input:has(:focus-visible)::before {\n      @include interaction.focus-styles;\n    }\n  }\n}\n\n@mixin form-message-styles($disable-layer: false) {\n  @include utils.optional-layer(form, $disable-layer) {\n    .rmd-form-message-container {\n      display: flex;\n      flex-direction: column;\n    }\n\n    .rmd-form-message {\n      @include utils.map-to-styles($message-typography-styles);\n\n      display: flex;\n      margin: $message-margin-top 0 $message-margin-bottom;\n      min-height: $message-min-height;\n\n      @if not $disable-text-field-filled-theme and $text-field-filled-padding {\n        &--filled {\n          padding-left: $text-field-filled-padding;\n          padding-right: $text-field-filled-padding;\n        }\n      }\n\n      @if not\n        $disable-text-field-outlined-theme and\n        $text-field-outlined-padding\n      {\n        &--outline {\n          padding-left: $text-field-outlined-padding;\n          padding-right: $text-field-outlined-padding;\n        }\n      }\n\n      @if not\n        $disable-text-field-underlined-theme and\n        $text-field-underlined-padding\n      {\n        &--underline {\n          padding-left: $text-field-underlined-padding;\n          padding-right: $text-field-underlined-padding;\n        }\n      }\n\n      &__message {\n        margin: 0;\n      }\n\n      @if not $disable-text-field-counter {\n        &__counter {\n          @include utils.auto-rtl(margin-left, auto);\n          @include utils.auto-rtl(padding-left, $message-counter-spacing);\n\n          flex-shrink: 0;\n          white-space: nowrap;\n        }\n      }\n    }\n  }\n}\n\n@mixin label-styles($disable-layer: false) {\n  @include utils.optional-layer(form, $disable-layer) {\n    .rmd-label {\n      @include utils.map-to-styles($label-typography);\n\n      align-items: center;\n      display: inline-flex;\n      transition-duration: transition.$linear-duration;\n      transition-property: background-color, transform;\n\n      $active-selector: "&--active";\n      @if not $_disable-text-field-container {\n        $active-selector: $active-selector +\n          ", .rmd-text-field-container:focus-within &";\n      }\n\n      #{$active-selector} {\n        @include use-var(color, focus-color);\n      }\n\n      @if not $disable-floating-label {\n        &--floating {\n          @include utils.rtl {\n            left: auto;\n            right: 0;\n            transform: translate(\n              utils.negate-var(get-var(text-field-padding-left)),\n              get-var(label-floating-top)\n            );\n          }\n\n          left: 0;\n          position: absolute;\n          top: 0;\n          transform: translate(\n            get-var(text-field-padding-left),\n            get-var(label-floating-top)\n          );\n        }\n\n        &--floating-dense {\n          @include set-var(label-floating-top, $label-floating-top-dense);\n        }\n\n        $floating-active-selector: "&--floating-active";\n        @if not\n          $disable-text-field or not\n          $disable-password or not\n          $disable-textarea\n        {\n          $floating-active-selector: $floating-active-selector +\n            ", .rmd-text-field-container:focus-within &--floating" +\n            ", .rmd-text-field:not(:placeholder-shown) + &--floating";\n        }\n        @if not $disable-native-select {\n          $floating-active-selector: $floating-active-selector +\n            ", .rmd-native-select[multiple] + &--floating" +\n            ", .rmd-native-select:not(:invalid) + &--floating";\n        }\n\n        #{$floating-active-selector} {\n          @include utils.rtl {\n            transform: scale($label-floating-scale)\n              translate(\n                utils.negate-var(get-var(label-left-offset)),\n                get-var(label-top-offset)\n              );\n            transform-origin: 100% 0;\n          }\n          @include use-var(background-color, label-active-background-color);\n          @include use-var(padding, label-active-padding);\n\n          transform: scale($label-floating-scale)\n            translate(get-var(label-left-offset), get-var(label-top-offset));\n          // need to add the `transform-origin` because of the scaling applied.\n          // it\'ll change the position based on the size of the label otherwise\n          transform-origin: 0 0;\n          z-index: 1;\n        }\n      }\n\n      @if not $disable-label-gap {\n        &--gap {\n          gap: $label-gap;\n        }\n      }\n\n      @if not $disable-label-reversed {\n        &--reversed {\n          flex-direction: row-reverse;\n          // this makes it so the content is at the starting edge\n          justify-content: flex-end;\n        }\n      }\n\n      @if not $disable-label-stacked {\n        &--stacked {\n          flex-direction: column;\n        }\n      }\n\n      @if not $disable-label-stacked-reversed {\n        &--stacked-reversed {\n          flex-direction: column-reverse;\n        }\n      }\n    }\n  }\n}\n\n@mixin text-field-container-styles($disable-layer: false) {\n  @include utils.optional-layer(form, $disable-layer) {\n    .rmd-text-field-container {\n      @include use-var(height, text-field-height);\n\n      align-items: center;\n      display: flex;\n      position: relative;\n\n      @if not $disable-text-field-container-dense {\n        &--dense {\n          @include set-var(text-field-height, $text-field-dense-height);\n        }\n\n        &--dense-label {\n          @include set-var(text-field-height, $text-field-label-dense-height);\n        }\n      }\n\n      &--inline {\n        display: inline-flex;\n      }\n\n      &--stretch {\n        flex: 1 1 auto;\n        width: 100%;\n      }\n\n      &--label {\n        @include set-var(text-field-height, $text-field-label-height);\n      }\n\n      &--error {\n        @if not $disable-text-field-addon {\n          @include icon.set-var(color, currentcolor);\n        }\n        @include set-var(active-color, currentcolor);\n        @include set-var(focus-color, currentcolor);\n\n        @if not\n          $disable-text-field-underlined-theme or not\n          $disable-text-field-outlined-theme\n        {\n          @include set-var(\n            text-field-border-color,\n            theme.theme-get-var(error-color)\n          );\n          @include set-var(\n            text-field-hover-border-color,\n            theme.theme-get-var(error-color)\n          );\n        }\n      }\n\n      &--hoverable:hover {\n        @include set-var(\n          text-field-border-color,\n          get-var(text-field-hover-border-color)\n        );\n      }\n\n      @if not $disable-text-field-outlined-theme {\n        &--outline {\n          @include set-var(\n            text-field-padding-left,\n            $text-field-outlined-padding\n          );\n          @include set-var(\n            text-field-padding-right,\n            $text-field-outlined-padding\n          );\n          @include use-var(border-color, text-field-border-color);\n          @if not $disable-text-field-addon {\n            @include set-var(addon-left-offset, $text-field-outlined-padding);\n          }\n\n          @if not $disable-floating-label {\n            @include set-var(label-left-offset, $text-field-outlined-padding);\n            @include set-var(label-top-offset, -50%);\n            @include set-var(label-active-padding, 0 $label-floating-padding);\n            @include set-var(\n              label-active-background-color,\n              theme.theme-get-var(background-color)\n            );\n          }\n\n          border-radius: $text-field-border-radius;\n          border-style: solid;\n          border-width: $text-field-border-width;\n\n          &::after {\n            @include utils.pseudo-element;\n\n            box-shadow: 0\n              0\n              0\n              $text-field-border-width-active\n              get-var(focus-color);\n            opacity: 0;\n            transition: opacity transition.$linear-duration;\n          }\n        }\n\n        &--outline:focus-within::after,\n        &--outline-active::after {\n          opacity: 1;\n        }\n\n        &--outline-left {\n          $distance: calc(\n            #{icon.get-var(size)} +\n              #{$text-field-outlined-padding +\n              $text-field-spacing}\n          );\n\n          @include set-var(text-field-padding-left, $distance);\n        }\n\n        &--outline-right {\n          $distance: calc(#{icon.get-var(size)} + #{$text-field-spacing * 2});\n\n          @include set-var(text-field-padding-right, $distance);\n        }\n      }\n\n      @if not $disable-text-field-filled-theme {\n        &--filled {\n          @include set-var(text-field-padding-left, $text-field-filled-padding);\n          @include set-var(\n            text-field-padding-right,\n            $text-field-filled-padding\n          );\n          @if not $disable-floating-label {\n            @include set-var(\n              label-left-offset,\n              $text-field-filled-padding + $label-floating-padding\n            );\n          }\n\n          @if not $disable-text-field-addon {\n            @include set-var(addon-left-offset, $text-field-filled-padding);\n          }\n\n          @include use-var(background-color, text-field-filled-color);\n        }\n      }\n\n      // the filled theme uses the same styles as underline\n      @if not\n        $disable-text-field-underlined-theme or not\n        $disable-text-field-filled-theme\n      {\n        &--underline {\n          @include use-var(border-color, text-field-border-color);\n\n          border-bottom-style: solid;\n          border-bottom-width: $text-field-border-width;\n\n          @if $text-field-underlined-padding {\n            @include set-var(\n              text-field-padding-left,\n              $text-field-underlined-padding\n            );\n            @include set-var(\n              text-field-padding-right,\n              $text-field-underlined-padding\n            );\n          }\n\n          &::after {\n            @include use-var(background-color, focus-color);\n\n            bottom: -$text-field-border-width;\n            content: "";\n            height: $text-field-border-width-active;\n            left: 0;\n            position: absolute;\n            right: 0;\n            transform: scale(0);\n            transition: transform\n              transition.$linear-duration\n              transition.$linear-timing-function;\n            z-index: 1;\n          }\n        }\n\n        @if $text-field-underlined-placeholder-height {\n          &--underline-placeholder {\n            @include set-var(\n              text-field-padding-top,\n              $text-field-underlined-placeholder-addon-padding-top\n            );\n            height: $text-field-underlined-placeholder-height;\n          }\n\n          &--underline-placeholder-only {\n            @include set-var(\n              text-field-padding-top,\n              $text-field-underlined-placeholder-padding-top\n            );\n          }\n        }\n\n        &--underline-labelled {\n          @include set-var(\n            text-field-padding-top,\n            $text-field-underlined-label-padding-top\n          );\n          @include set-var(addon-margin-top, $text-field-addon-margin);\n        }\n\n        @if not $disable-text-field-underline-left {\n          &--underline-left::after {\n            transform-origin: left;\n          }\n        }\n\n        @if not $disable-text-field-underline-center {\n          &--underline-center::after {\n            transform-origin: center;\n          }\n        }\n\n        @if not $disable-text-field-underline-right {\n          &--underline-right::after {\n            transform-origin: right;\n          }\n        }\n\n        &:focus-within::after,\n        &--underline-active::after {\n          transform: scale(1);\n        }\n\n        @if not $disable-text-field-addon {\n          $addon-offset: "#{icon.get-var(size)} + #{$text-field-underlined-label-left-offset * 2}";\n          @if $text-field-underlined-padding {\n            $addon-offset: "#{$addon-offset} + #{$text-field-underlined-padding}";\n          }\n\n          &--underline-left-addon {\n            @include set-var(text-field-padding-left, calc(#{$addon-offset}));\n          }\n\n          &--underline-right-addon {\n            @include set-var(text-field-padding-right, calc(#{$addon-offset}));\n          }\n        }\n      }\n    }\n  }\n}\n\n@mixin _text-field-base-styles {\n  @include utils.map-to-styles($text-field-typography);\n  @include utils.rtl {\n    @include use-var(padding-left, text-field-padding-right);\n    @include use-var(padding-right, text-field-padding-left);\n  }\n  @include use-var(padding-left, text-field-padding-left);\n  @include use-var(padding-right, text-field-padding-right);\n  @include use-var(padding-top, text-field-padding-top);\n\n  background-color: transparent;\n  border-width: 0;\n  color: inherit;\n  flex: 1 1 auto;\n  height: 100%;\n  outline: none;\n  width: 100%;\n\n  &[disabled] {\n    @include theme.theme-use-var(color, text-disabled-color);\n  }\n}\n\n@mixin text-field-styles($disable-layer: false) {\n  @include utils.optional-layer(form, $disable-layer) {\n    .rmd-text-field {\n      @include _text-field-base-styles;\n\n      @if $text-field-color-min-width {\n        &[type="color"] {\n          min-width: $text-field-color-min-width;\n        }\n      }\n\n      &::placeholder {\n        @if not $disable-placeholder-ellipsis {\n          @include typography.text-overflow;\n        }\n\n        @include theme.theme-use-var(color, text-secondary-color);\n        // want to gain the same font styles as the input/textarea itself,\n        // just apply different colors as needed instead. Can\'t just do font: inherit\n        // since it\'ll break the styles in firefox.\n        font-family: inherit;\n        font-size: inherit;\n        font-weight: inherit;\n\n        // fix firefox setting opacity to 0.54 by default\n        opacity: 1;\n\n        // Note: doesn\'t look like firefox applies css transitions to placeholder text?\n        transition: opacity transition.$linear-duration;\n      }\n\n      &[disabled]::placeholder {\n        color: inherit;\n      }\n\n      &--placeholder-hidden:not(:focus)::placeholder {\n        opacity: 0;\n      }\n    }\n  }\n}\n\n@mixin password-styles($disable-layer: false) {\n  @include utils.optional-layer(form, $disable-layer) {\n    .rmd-password {\n      @include set-var(\n        text-field-padding-right,\n        $password-visibility-toggle-spacing\n      );\n\n      &__input {\n        @include utils.auto-rtl(margin-right, button.get-var(icon-size));\n      }\n\n      &__toggle {\n        @include utils.auto-rtl(right, 0);\n\n        position: absolute;\n      }\n    }\n  }\n}\n\n@mixin textarea-container-styles($disable-layer: false) {\n  @include utils.optional-layer(form, $disable-layer) {\n    .rmd-textarea-container {\n      @include set-var(addon-top, $textarea-addon-top);\n\n      height: auto;\n      max-width: 100%;\n      padding-top: calc(\n        #{get-var(text-field-padding-top)} + #{get-var(textarea-padding)}\n      );\n\n      &--cursor:hover {\n        // need to add this cursor back since the textarea container adds padding to\n        // itself instead of the textarea so it loses this cursor. the container\n        // element will still focus the textarea when clicked\n        cursor: text;\n      }\n\n      @if not\n        $disable-text-field-filled-theme or not\n        $disable-text-field-underlined-theme\n      {\n        &--underline-labelled {\n          @include set-var(textarea-padding, 0px);\n          @include set-var(\n            label-floating-top,\n            $text-field-underlined-label-padding-top\n          );\n        }\n      }\n\n      @if not $disable-textarea-resizing-rows {\n        &--height {\n          height: calc(\n            #{get-var(text-field-padding-top)} +\n              #{get-var(textarea-padding)} +\n              #{get-var(textarea-height)}\n          );\n        }\n\n        &--animate {\n          transition: height\n            transition.$linear-duration\n            transition.$linear-timing-function;\n        }\n\n        &__inner {\n          height: get-var(textarea-height, 100%);\n          width: 100%;\n\n          &--animate {\n            transition: height\n              transition.$linear-duration\n              transition.$linear-timing-function;\n          }\n        }\n      }\n    }\n  }\n}\n\n@mixin textarea-styles($disable-layer: false) {\n  @include utils.optional-layer(form, $disable-layer) {\n    .rmd-textarea {\n      @include set-var(text-field-padding-top, 0px);\n      @include use-var(min-height, text-field-height);\n\n      height: get-var(textarea-height, 100%);\n\n      @if not $disable-textarea-resize-horizontal {\n        &--rh {\n          resize: horizontal;\n        }\n      }\n\n      @if not $disable-textarea-resize-vertical {\n        &--rv {\n          resize: vertical;\n        }\n      }\n\n      &--rn {\n        overflow: hidden;\n        resize: none;\n      }\n\n      // only want the textarea to be scrollable if there\'s a limit on the rows\n      // since it\'ll flash the scrollbar on most OS during the height transition\n      &--scrollable {\n        overflow: auto;\n      }\n\n      @if not $disable-textarea-resizing-mask {\n        &--mask {\n          height: auto;\n          left: 0;\n          opacity: 0;\n          overflow: hidden;\n          pointer-events: none;\n          position: absolute;\n          right: 0;\n          z-index: -1;\n        }\n      }\n    }\n  }\n}\n\n@mixin select-styles($disable-layer: false) {\n  @include utils.optional-layer(form, $disable-layer) {\n    .rmd-select-container {\n      outline-style: none;\n    }\n\n    .rmd-selected-option {\n      position: absolute;\n    }\n\n    .rmd-select {\n      // disable pointer events on touch devices so the soft keyboard does not\n      // appear when clicking the select\n      @media (hover: none) and (pointer: coarse) {\n        pointer-events: none;\n      }\n\n      opacity: 0;\n\n      // All these additional overrides are provided so that the select will have\n      // the same sizing as a text field with the same props provided.\n      @if not $disable-text-field-underlined-theme {\n        &--underline {\n          @include utils.rtl {\n            @include use-var(padding-right, text-field-padding-left);\n\n            padding-left: 0;\n          }\n\n          padding-right: 0;\n        }\n      }\n\n      @if not $disable-text-field-outlined-theme {\n        &--outline {\n          @include utils.rtl {\n            @include use-var(padding-right, text-field-padding-left);\n\n            padding-left: $text-field-outlined-padding;\n          }\n\n          padding-right: $text-field-outlined-padding;\n        }\n      }\n\n      @if not $disable-text-field-filled-theme {\n        &--filled {\n          @include utils.rtl {\n            @include use-var(padding-right, text-field-padding-left);\n\n            padding-left: $text-field-filled-padding;\n          }\n\n          padding-right: $text-field-filled-padding;\n        }\n      }\n    }\n  }\n}\n\n@mixin option-styles($disable-layer: false) {\n  @include utils.optional-layer(form, $disable-layer) {\n    .rmd-option {\n      &--icon {\n        @include utils.rtl {\n          @include list.use-var(padding-left, item-horizontal-padding);\n\n          padding-right: $option-padding-left;\n        }\n\n        padding-left: $option-padding-left;\n      }\n\n      &--selected {\n        @include utils.map-to-styles($option-selected-styles);\n      }\n\n      &__icon {\n        @include icon.set-var(spacing, $option-selected-icon-spacing);\n        @include icon.set-var(size, $option-selected-icon-size);\n      }\n    }\n  }\n}\n\n@mixin native-select-styles($disable-layer: false) {\n  @include utils.optional-layer(form, $disable-layer) {\n    @if not $disable-native-select-multiple {\n      .rmd-native-select-container {\n        &--multi {\n          @include set-var(addon-top, $native-select-addon-top);\n          @include use-var(min-height, text-field-height);\n\n          height: auto;\n        }\n\n        &--padded {\n          padding-top: $native-select-multiple-padding;\n        }\n\n        @if not\n          $disable-text-field-filled-theme or not\n          $disable-text-field-underlined-theme\n        {\n          &--underline {\n            @include set-var(text-field-padding-top, 0);\n          }\n\n          &--underline-padded {\n            padding-top: $native-select-multiple-underline-padding;\n          }\n        }\n      }\n    }\n\n    .rmd-native-select {\n      @include _text-field-base-styles;\n      @include typography.text-overflow;\n\n      appearance: none;\n\n      &[multiple] {\n        overflow: auto;\n      }\n    }\n  }\n}\n\n@mixin text-field-addon-styles($disable-layer: false) {\n  @include utils.optional-layer(form, $disable-layer) {\n    .rmd-text-field-addon {\n      @if not\n        $disable-text-field-filled-theme or not\n        $disable-text-field-underlined-theme\n      {\n        @include use-var(margin-top, addon-margin-top);\n      }\n\n      // this makes it so that this container element is the same size as the\n      // child (normally icons). without this, icons would have a height of 30.5px\n      // and no longer be centered\n      display: inline-flex;\n      position: absolute;\n\n      // Note: Can\'t use `:first-child` and `:last-child` since\n      // password/autocomplete managers might add another element into the\n      // `.rmd-text-field-container` which would prevent these styles from being\n      // applied\n      &--before {\n        @include utils.auto-rtl(left, get-var(addon-left-offset));\n      }\n\n      &--after {\n        @include utils.auto-rtl(right, $text-field-spacing);\n      }\n\n      &--presentational {\n        pointer-events: none;\n      }\n    }\n  }\n}\n\n@mixin hidden-input-styles($disable-layer: false) {\n  @include utils.optional-layer(form, $disable-layer) {\n    .rmd-hidden-input {\n      height: 100%;\n      inset: 0;\n      margin: 0;\n      opacity: 0;\n      position: absolute;\n      width: 100%;\n      z-index: 1;\n\n      &:not(:disabled):hover {\n        cursor: pointer;\n      }\n    }\n  }\n}\n\n@mixin input-toggle-styles($disable-layer: false) {\n  @include utils.optional-layer(form, $disable-layer) {\n    .rmd-input-toggle {\n      @include interaction.surface(\n        $focus-selector:\n          if(\n            utils.$disable-has-selectors or utils.$disable-focus-visible,\n            "&:focus-within",\n            "&:has(:focus-visible)"\n          ),\n        $keyboard-only-focus: utils.$disable-has-selectors or\n          utils.$disable-focus-visible,\n        $disabled-selector: "&--disabled",\n        $higher-contrast: false\n      );\n      @include icon.set-var(color, currentcolor);\n\n      align-items: center;\n      border-radius: $input-toggle-border-radius;\n      display: inline-flex;\n      flex-shrink: 0;\n      justify-content: center;\n      padding: $input-toggle-padding;\n\n      &--em {\n        @include icon.set-var(size, 1em);\n      }\n\n      &--active {\n        @include use-var(color, active-color);\n      }\n\n      @if $input-toggle-small-size {\n        &--small {\n          font-size: $input-toggle-small-size;\n        }\n      }\n\n      @if $input-toggle-dense-size {\n        &--dense {\n          font-size: $input-toggle-dense-size;\n        }\n      }\n\n      @if $input-toggle-normal-size {\n        &--normal {\n          font-size: $input-toggle-normal-size;\n        }\n      }\n\n      @if $input-toggle-large-size {\n        &--large {\n          font-size: $input-toggle-large-size;\n        }\n      }\n\n      @if not $disable-uncontrolled-input-toggles {\n        &--uncontrolled {\n          $icon-color-selector: ".rmd-hidden-input:where(:checked:not(:disabled)) ~ .rmd-icon";\n          $unchecked-icon-selector: "~ :nth-child(-n + 1 of .rmd-icon)";\n          $checked-icon-selector: "~ :nth-child(n + 2 of .rmd-icon)";\n          // make sure the active color from the label also applies to the icon when\n          // checked\n          .rmd-label--active & #{$icon-color-selector} {\n            @include use-var(color, focus-color);\n          }\n\n          // make sure the error color applies to the icon when checked\n          &:where(:not(.rmd-error-color)) #{$icon-color-selector} {\n            @include use-var(color, active-color);\n          }\n\n          // when the input is checked, hide the first icon (unchecked state)\n          // when the input is not checked, hide the second icon (checked state)\n          .rmd-hidden-input:checked #{$unchecked-icon-selector},\n          .rmd-hidden-input:not(:checked) #{$checked-icon-selector} {\n            opacity: 0;\n            position: absolute;\n          }\n        }\n      }\n    }\n  }\n}\n\n@mixin switch-styles($disable-layer: false) {\n  @include utils.optional-layer(form, $disable-layer) {\n    .rmd-switch {\n      padding: $switch-track-vertical-padding $switch-track-horizontal-padding;\n\n      &--clickable:hover {\n        cursor: pointer;\n      }\n\n      &--current-color,\n      &--current-color .rmd-switch__input:checked + .rmd-switch__ball {\n        @include set-var(switch-ball-background-color, currentcolor);\n      }\n\n      &__input {\n        @if utils.$disable-focus-visible {\n          @include utils.keyboard-only {\n            &:focus + .rmd-switch__ball::before {\n              @include interaction.focus-styles;\n            }\n          }\n        } @else {\n          &:focus-visible + .rmd-switch__ball::before {\n            @include interaction.focus-styles;\n          }\n        }\n\n        &:disabled + .rmd-switch__ball {\n          cursor: auto;\n\n          &:hover::before {\n            @include interaction.set-var(background-color, transparent);\n          }\n        }\n      }\n\n      &__track {\n        @if not $disable-switch-circular-progress {\n          @include progress.set-var(\n            circular-stroke-width,\n            $switch-circular-progress-width\n          );\n          @include progress.set-var(\n            circular-size,\n            $switch-circular-progress-size\n          );\n        }\n        @if not $disable-switch-icon {\n          @include icon.set-var(size, $switch-icon-size);\n        }\n        @include use-var(background-color, switch-track-background-color);\n\n        border-radius: $switch-track-border-radius;\n        height: $switch-track-height;\n        position: relative;\n        transition: background-color transition.$linear-duration\n          transition.$linear-timing-function;\n        width: $switch-track-width;\n\n        &--disabled {\n          opacity: $switch-disabled-opacity;\n        }\n      }\n\n      &__ball {\n        // The focus and disabled states are handled by the `.rmd-switch__input`\'s\n        // :focus and :disabled\' states instead.\n        @include interaction.surface(\n          $focus-selector: null,\n          $disabled-selector: null,\n          $clickable: false\n        );\n        @include utils.auto-rtl(left, calc(-50% + #{$switch-ball-offset}));\n\n        align-items: center;\n        border-radius: $switch-ball-border-radius;\n        display: flex;\n        height: $switch-ball-size * 2;\n        justify-content: center;\n        top: calc(-50% - #{$switch-ball-size - $switch-track-height});\n        transition-duration: transition.$linear-duration;\n        transition-property: background-color, transform;\n        transition-timing-function: transition.$linear-timing-function;\n        width: $switch-ball-size * 2;\n        z-index: 1;\n\n        &::after {\n          @include use-var(background-color, switch-ball-background-color);\n\n          border-radius: inherit;\n          box-shadow: box-shadows.box-shadow(1);\n          content: "";\n          height: $switch-ball-size;\n          left: 25%;\n          pointer-events: none;\n          position: absolute;\n          top: 25%;\n          width: $switch-ball-size;\n          z-index: 0;\n        }\n\n        $active-selector: ".rmd-switch__input:checked + &" +\n          if($disable-menu-item-switch, "", ", &--active");\n\n        #{$active-selector} {\n          $offset: $switch-ball-size + $switch-ball-offset;\n\n          @include utils.rtl {\n            transform: translateX(-$offset);\n          }\n          @include set-var(switch-ball-background-color, get-var(active-color));\n\n          transform: translateX($offset);\n        }\n      }\n    }\n  }\n}\n\n@mixin menu-item-input-toggle-styles($disable-layer: false) {\n  @include utils.optional-layer(form, $disable-layer) {\n    .rmd-menu-item-input-toggle {\n      @if not $disable-menu-item-radio or not $disable-menu-item-switch {\n        &__icon {\n          // remove the padding since the icon isn\'t the click target anymore.\n          padding: 0;\n\n          // disable the hover states since it\'s handled by the ListItem instead\n          &::before {\n            content: none;\n          }\n        }\n      }\n\n      @if not $disable-menu-item-switch {\n        // this makes it so that the spacing between the switch and the text\n        // aligns with other menu items/icons\n        &__track {\n          @include icon.set-var(size, $switch-track-width);\n        }\n\n        // decrease the ball size and remove the hover states since it\'s handled\n        // by the ListItem instead. without decreasing the ball size, horizontal\n        // scrollbars will appear when the switch is checked\n        &__ball {\n          @include utils.auto-rtl(left, -$switch-ball-offset);\n\n          height: $switch-ball-size;\n          top: calc(50% - $switch-ball-size * 0.5);\n          width: $switch-ball-size;\n\n          &::before {\n            content: none;\n          }\n\n          &::after {\n            inset: 0;\n          }\n        }\n      }\n    }\n  }\n}\n\n@mixin slider-styles($disable-layer: false) {\n  @include utils.optional-layer(form, $disable-layer) {\n    .rmd-slider-container {\n      @if $slider-container-addon-spacing and\n        $slider-container-addon-spacing !=\n        icon.$spacing\n      {\n        @include icon.set-var(spacing, $slider-container-addon-spacing);\n      }\n\n      @include icon.use-var(gap, spacing);\n\n      align-items: center;\n\n      @if not $disable-horizontal-slider {\n        &--h {\n          display: flex;\n          width: 100%;\n        }\n\n        &--pad-left {\n          padding-left: $slider-container-padding;\n        }\n\n        &--pad-right {\n          padding-right: $slider-container-padding;\n        }\n      }\n\n      @if not $disable-vertical-slider {\n        &--v {\n          display: inline-flex;\n          flex-direction: column-reverse;\n        }\n\n        &--pad-top {\n          padding-top: $slider-container-padding;\n        }\n\n        &--pad-bottom {\n          padding-bottom: $slider-container-padding;\n        }\n      }\n    }\n\n    .rmd-slider-track {\n      position: relative;\n\n      &::before,\n      &::after {\n        @if $slider-track-color {\n          @include use-var(background-color, slider-color);\n        }\n\n        content: "";\n        pointer-events: none;\n        position: absolute;\n      }\n\n      &::before {\n        @if not $slider-track-color {\n          @include use-var(background-color, slider-inactive-color);\n        }\n\n        opacity: $slider-track-inactive-opacity;\n        z-index: $slider-track-inactive-z-index;\n      }\n\n      &::after {\n        @if not $slider-track-color {\n          @include use-var(background-color, slider-active-color);\n        }\n\n        opacity: $slider-track-active-opacity;\n        z-index: $slider-track-active-z-index;\n      }\n\n      &--hoverable:hover {\n        cursor: pointer;\n      }\n\n      &--animate::after {\n        transition-duration: $slider-transition-duration;\n        transition-timing-function: $slider-transition-timing-function;\n      }\n\n      @if $slider-track-color {\n        &--disabled {\n          @include set-var(slider-color, $slider-track-disabled-color);\n\n          @if $slider-track-inactive-opacity {\n            &::before {\n              opacity: 1;\n            }\n          }\n\n          &::after {\n            @include set-var(slider-active-size, 0px);\n            @if $slider-track-active-opacity {\n              opacity: 1;\n            }\n          }\n        }\n      }\n\n      @if not $disable-horizontal-slider {\n        &--h {\n          @include use-var(height, slider-size);\n\n          align-items: center;\n          display: flex;\n          width: 100%;\n\n          &::before {\n            @include use-var(height, slider-inactive-size);\n\n            width: 100%;\n          }\n\n          &::after {\n            @include use-var(height, slider-active-size);\n          }\n        }\n\n        &--h1::after {\n          @include utils.auto-rtl(left, 0);\n          @include use-var(max-width, slider-offset-1);\n\n          transition-property: max-width;\n          width: 100%;\n        }\n\n        @if not $disable-range-slider {\n          &--h2::after {\n            @include utils.rtl {\n              left: calc(100% - get-var(slider-offset-2));\n              right: get-var(slider-offset-1);\n            }\n\n            left: get-var(slider-offset-1);\n            right: calc(100% - get-var(slider-offset-2));\n            transition-property: left, right;\n            will-change: left, right;\n          }\n        }\n      }\n\n      @if not $disable-vertical-slider {\n        &--v {\n          @include use-var(height, slider-vertical-size);\n          @include use-var(width, slider-size);\n\n          display: inline-flex;\n          justify-content: center;\n\n          &::before {\n            @include use-var(width, slider-inactive-size);\n\n            height: 100%;\n          }\n\n          &::after {\n            @include use-var(width, slider-active-size);\n\n            bottom: 0;\n          }\n        }\n\n        // one thumb track horizontal styles\n        &--v1::after {\n          @include use-var(max-height, slider-offset-1);\n\n          height: 100%;\n          transition-property: max-height;\n        }\n\n        @if not $disable-range-slider {\n          // two thumb track horizontal styles\n          &--v2::after {\n            @include use-var(bottom, slider-offset-1);\n\n            top: calc(100% - #{get-var(slider-offset-2)});\n            transition-property: bottom, top;\n            will-change: bottom, top;\n          }\n        }\n      }\n    }\n\n    .rmd-slider-thumb {\n      @include use-var(\n        background-color,\n        if($slider-track-color, slider-color, slider-active-color)\n      );\n\n      border-radius: $slider-thumb-border-radius;\n      height: $slider-thumb-size;\n      outline-style: none;\n      position: absolute;\n      width: $slider-thumb-size;\n      z-index: $slider-thumb-z-index;\n\n      &::after {\n        @include utils.pseudo-element($z-index: null);\n\n        background-color: inherit;\n        opacity: $slider-thumb-bubble-opacity;\n        transition: transform $slider-transition-duration\n          $slider-transition-timing-function;\n      }\n\n      @if utils.$disable-focus-visible {\n        @include utils.keyboard-only {\n          &:focus::after {\n            transform: scale($slider-thumb-focus-scale);\n          }\n        }\n      } @else {\n        &:focus-visible::after {\n          transform: scale($slider-thumb-focus-scale);\n        }\n      }\n\n      @include utils.mouse-hover(false) {\n        &:hover::after,\n        &--active::after,\n        &--active:hover::after {\n          transform: scale($slider-thumb-active-scale);\n        }\n      }\n\n      &--animate {\n        transition-duration: $slider-transition-duration;\n        transition-timing-function: $slider-transition-timing-function;\n      }\n\n      &--disabled {\n        background-color: $slider-thumb-disabled-color;\n\n        // prevent hover effects like the "bubble"\n        pointer-events: none;\n      }\n\n      &--mask {\n        @include theme.theme-use-var(background-color);\n\n        border-radius: 0;\n      }\n\n      @if not $disable-horizontal-slider {\n        &--h {\n          @include utils.rtl {\n            transform: translateX(50%);\n            transition-property: right;\n          }\n\n          transform: translateX(-50%);\n          transition-property: left;\n        }\n\n        &--h1 {\n          @include utils.auto-rtl(left, get-var(slider-offset-1));\n        }\n\n        @if not $disable-range-slider {\n          &--h2 {\n            @include utils.auto-rtl(left, get-var(slider-offset-2));\n          }\n        }\n\n        &--disabled-h {\n          @include utils.rtl {\n            transform: translateX(50%) scale($slider-thumb-disabled-scale);\n          }\n\n          transform: translateX(-50%) scale($slider-thumb-disabled-scale);\n        }\n\n        &--mask-h {\n          @include utils.rtl {\n            transform: translateX(50%) scale($slider-thumb-mask-scale);\n          }\n\n          transform: translateX(-50%) scale($slider-thumb-mask-scale);\n        }\n      }\n\n      @if not $disable-vertical-slider {\n        &--v {\n          // want the thumb to be aligned so that the center is at the current value.\n          // without this transformation, the thumb\'s bottom side would be aligned\n          // with the current value\n          transform: translateY(50%);\n          transition-property: bottom;\n        }\n\n        &--v1 {\n          @include use-var(bottom, slider-offset-1);\n        }\n\n        @if not $disable-range-slider {\n          &--v2 {\n            @include use-var(bottom, slider-offset-2);\n          }\n        }\n\n        &--disabled-v {\n          transform: translateY(50%) scale($slider-thumb-disabled-scale);\n        }\n\n        &--mask-v {\n          transform: translateY(50%) scale($slider-thumb-mask-scale);\n        }\n      }\n\n      &__input {\n        appearance: none;\n        height: 0;\n        opacity: 0;\n        pointer-events: none;\n        width: 0;\n      }\n    }\n\n    @if not $disable-discrete-slider {\n      .rmd-slider-tooltip {\n        opacity: 1;\n        position: absolute;\n        z-index: $slider-tooltip-z-index;\n\n        // this is used to generate the triangle\n        &::after {\n          border: $slider-tooltip-caret-size solid transparent;\n          content: "";\n          position: absolute;\n        }\n\n        &--animate {\n          transition: transform\n            $slider-transition-duration\n            $slider-transition-timing-function;\n        }\n\n        @if not $disable-horizontal-slider {\n          &--h {\n            @include utils.rtl {\n              @include set-var(slider-tooltip-translate, 50%);\n            }\n\n            top: $slider-tooltip-offset;\n            transform: translateX(get-var(slider-tooltip-translate))\n              scale(get-var(slider-tooltip-scale));\n\n            &::after {\n              @include tooltip.use-var(border-top-color, background-color);\n\n              left: 50%;\n              top: 100%;\n              transform: translateX(get-var(slider-tooltip-translate));\n            }\n          }\n\n          &--h-off {\n            @include set-var(slider-tooltip-scale, 0);\n          }\n\n          // have to "duplicate" these styles since the `--h-off` would override the\n          // `--h` styles due to css order.\n          &--h-on {\n            @include set-var(slider-tooltip-scale, 1);\n          }\n        }\n\n        @if not $disable-vertical-slider {\n          &--v {\n            // going to force rendering always to the left even in RTL languages\n            left: $slider-tooltip-offset;\n            transform: translateY(50%) scale(1);\n\n            &::after {\n              @include tooltip.use-var(border-left-color, background-color);\n\n              left: 100%;\n              top: 50%;\n              transform: translateY(-50%);\n            }\n          }\n\n          &--v-off {\n            transform: translateY(50%) scale(0);\n          }\n\n          // have to "duplicate" these styles since the `--v-off` would override the\n          // `--v` styles due to css order.\n          &--v-on {\n            transform: translateY(50%) scale(1);\n          }\n        }\n      }\n    }\n\n    @if not $disable-discrete-slider-marks {\n      .rmd-slider-mark {\n        border-radius: $slider-mark-border-radius;\n        position: absolute;\n\n        &--inactive {\n          @include use-var(background-color, slider-mark-inactive-color);\n          @include use-var(opacity, slider-mark-inactive-opacity);\n\n          z-index: $slider-mark-inactive-z-index;\n        }\n\n        &--active {\n          @include use-var(background-color, slider-mark-active-color);\n          @include use-var(opacity, slider-mark-active-opacity);\n\n          z-index: $slider-mark-active-z-index;\n        }\n\n        @if not $disable-horizontal-slider {\n          &--h {\n            @include utils.auto-rtl(left, get-var(slider-mark-offset));\n\n            height: $slider-mark-height;\n            top: 50%;\n            transform: translateY(-50%);\n            width: $slider-mark-width;\n          }\n        }\n\n        @if not $disable-vertical-slider {\n          &--v {\n            bottom: get-var(slider-mark-offset);\n            height: $slider-mark-width;\n            transform: translateY(50%);\n            width: $slider-mark-height;\n          }\n        }\n      }\n    }\n\n    @if not $disable-discrete-slider-marks-labels {\n      .rmd-slider-mark-label {\n        position: absolute;\n\n        @if not $disable-horizontal-slider {\n          &--h {\n            @include utils.rtl {\n              @include use-var(right, slider-mark-offset);\n\n              left: auto;\n              transform: translateX(50%);\n            }\n            @include use-var(left, slider-mark-offset);\n\n            top: 100%;\n            transform: translateX(-50%);\n          }\n        }\n\n        @if not $disable-vertical-slider {\n          &--v {\n            @include utils.auto-rtl(left, 100%);\n\n            top: get-var(slider-mark-offset);\n            transform: translateY(-50%);\n          }\n        }\n      }\n    }\n  }\n}\n\n@mixin variables {\n  @if not $disable-everything {\n    @include set-var(active-color, $active-color);\n    @include set-var(focus-color, $focus-color);\n\n    @if not $disable-label and not $disable-floating-label {\n      @include set-var(label-floating-top, $label-floating-top);\n      @include set-var(label-left-offset, 0px);\n      @include set-var(label-top-offset, 0px);\n      @include set-var(label-active-padding, 0px);\n      @include set-var(label-active-background-color, transparent);\n    }\n\n    @if not $disable-text-field {\n      @include set-var(text-field-height, $text-field-height);\n      @include set-var(text-field-padding-left, 0px);\n      @include set-var(text-field-padding-right, 0px);\n      @include set-var(text-field-padding-top, 0px);\n      @include set-var(text-field-border-color, $text-field-border-color);\n      @include set-var(\n        text-field-hover-border-color,\n        $text-field-hover-border-color\n      );\n\n      @include set-var(\n        text-field-filled-color,\n        $text-field-filled-background-color\n      );\n    }\n\n    @if not $disable-textarea {\n      @include set-var(textarea-height, $text-field-height);\n      @include set-var(textarea-padding, $textarea-vertical-padding);\n    }\n\n    @if not $disable-text-field-addon {\n      @include set-var(addon-top, auto);\n      @include set-var(addon-margin-top, 0px);\n      @include set-var(addon-left-offset, 0px);\n    }\n\n    @if not $disable-switch {\n      @include set-var(\n        switch-track-background-color,\n        $switch-track-background-color\n      );\n      @include set-var(\n        switch-ball-background-color,\n        $switch-ball-background-color\n      );\n    }\n\n    @if not $disable-slider {\n      @include set-var(slider-color, $slider-track-color);\n      @include set-var(slider-active-color, $slider-track-active-color);\n      @include set-var(slider-inactive-color, $slider-track-inactive-color);\n      @include set-var(slider-size, $slider-size);\n      @include set-var(slider-active-size, $slider-track-active-size);\n      @include set-var(slider-inactive-size, $slider-track-inactive-size);\n      @if not $disable-discrete-slider {\n        @include set-var(slider-tooltip-scale, 1);\n        @include set-var(slider-tooltip-translate, -50%);\n\n        @if not $disable-discrete-slider-marks {\n          @include set-var(slider-mark-offset, 0%);\n          @include set-var(slider-mark-active-color, $slider-mark-active-color);\n          @include set-var(\n            slider-mark-active-opacity,\n            $slider-mark-active-opacity\n          );\n          @include set-var(\n            slider-mark-inactive-color,\n            $slider-mark-inactive-color\n          );\n          @include set-var(\n            slider-mark-inactive-opacity,\n            $slider-mark-inactive-opacity\n          );\n        }\n      }\n\n      @if not $disable-vertical-slider {\n        @include set-var(slider-vertical-size, $slider-vertical-size);\n      }\n    }\n  }\n}\n\n@mixin styles($disable-layer: false) {\n  @if not $disable-everything {\n    @include utils.optional-layer(form, $disable-layer) {\n      @include theme.default-system-theme {\n        @include use-dark-theme;\n      }\n\n      @if not $disable-fieldset {\n        .rmd-fieldset {\n          &--unstyled {\n            border: 0;\n            margin: 0;\n            min-width: 0; // just so it can shrink correctly in flex or grid\n            padding: 0;\n          }\n\n          &--full-width {\n            flex: 1 1 auto;\n            width: 100%;\n          }\n        }\n      }\n\n      @if not $disable-label {\n        @include label-styles(true);\n      }\n\n      @if not $disable-file-input {\n        @include file-input-styles(true);\n      }\n\n      @if not $disable-message {\n        @include form-message-styles(true);\n      }\n\n      @if not $_disable-text-field-container {\n        @include text-field-container-styles(true);\n      }\n\n      @if not\n        $disable-text-field or not\n        $disable-password or not\n        $disable-textarea\n      {\n        @include text-field-styles(true);\n      }\n\n      @if not $disable-password {\n        @include password-styles(true);\n      }\n\n      @if not $disable-textarea {\n        @include textarea-container-styles(true);\n        @include textarea-styles(true);\n      }\n\n      @if not $disable-select {\n        @include select-styles(true);\n      }\n\n      @if not $disable-option {\n        @include option-styles(true);\n      }\n\n      @if not $disable-native-select {\n        @include native-select-styles(true);\n      }\n\n      @if not $disable-text-field-addon {\n        @include text-field-addon-styles(true);\n      }\n\n      @if not $disable-checkbox or not $disable-radio or not $disable-switch {\n        @include hidden-input-styles(true);\n        @include input-toggle-styles(true);\n      }\n\n      @if not $disable-switch {\n        @include switch-styles(true);\n      }\n\n      @if not\n        $disable-menu-item-checkbox or not\n        $disable-menu-item-radio or not\n        $disable-menu-item-switch\n      {\n        @include menu-item-input-toggle-styles(true);\n      }\n\n      @if not $disable-slider {\n        @include slider-styles(true);\n      }\n    }\n  }\n}\n',
   "@react-md/icon/icon":
     '@use "sass:color";\n@use "../theme/theme";\n@use "../transition/transition";\n@use "../utils";\n\n$disable-font: false !default;\n$disable-svg: false !default;\n$disable-symbol: false !default;\n$disable-dense: false !default;\n$disable-inline: false !default;\n$disable-spacing-before: false !default;\n$disable-spacing-after: false !default;\n$disable-spacing-above: false !default;\n$disable-spacing-below: false !default;\n$disable-rotator: false !default;\n\n$light-theme-color: color.adjust(#000, $lightness: 46%) !default;\n$dark-theme-color: color.adjust(#fff, $lightness: -30%) !default;\n\n$color: theme.get-default-color($light-theme-color, $dark-theme-color) !default;\n\n$size: 1.5rem !default;\n$dense-size: 1.25rem !default;\n\n$symbol-fill: 0 !default;\n$symbol-weight: 400 !default;\n$symbol-grade: 0 !default;\n$symbol-optical-size: 48 !default;\n\n$_validated-fill: utils.validate((0, 1), $symbol-fill, "$symbol-fill");\n$_validated_weight: utils.validate(\n  (100 200 300 400 500 600 700),\n  $symbol-weight,\n  "$symbol-weight"\n);\n$_validated_grade: utils.validate((-25 0 200), $symbol-grade, "$symbol-grade");\n$_validated_optical-size: utils.validate(\n  (20 24 40 48),\n  $symbol-optical-size,\n  "$symbol-optical-size"\n);\n\n$spacing: 0.5rem !default;\n\n$rotate-from: 0deg !default;\n$rotate-to: 180deg !default;\n$rotate-duration: transition.$linear-duration !default;\n\n$variables: (\n  color,\n  size,\n  spacing,\n  rotate-from,\n  rotate-to,\n  symbol-fill,\n  symbol-grade,\n  symbol-weight,\n  symbol-optical-size\n);\n\n// shouldn\'t really use react-md without icons though...\n$_disable-icons: $disable-font and $disable-svg and $disable-symbol;\n\n@function get-var($name, $fallback: null) {\n  $var: utils.get-var-name($variables, $name, "icon");\n  @if $fallback {\n    @return var(#{$var}, #{$fallback});\n  }\n\n  @return var(#{$var});\n}\n\n@mixin set-var($name, $value) {\n  @if $value {\n    #{utils.get-var-name($variables, $name, "icon")}: #{$value};\n  }\n}\n\n@mixin use-var($property, $name: $property, $fallback: null) {\n  #{$property}: get-var($name, $fallback);\n}\n\n@mixin use-light-theme {\n  @if not $_disable-icons {\n    @include set-var(color, $light-theme-color);\n  }\n}\n\n@mixin use-dark-theme {\n  @if not $_disable-icons {\n    @include set-var(color, $dark-theme-color);\n  }\n}\n\n@mixin dense {\n  @if $dense-size {\n    @include set-var(size, $dense-size);\n  }\n}\n\n@mixin variables {\n  @if not $_disable-icons {\n    @include set-var(color, $color);\n    @include set-var(size, $size);\n    @include set-var(spacing, $spacing);\n  }\n\n  @if not $disable-symbol {\n    @include set-var(symbol-fill, $symbol-fill);\n    @include set-var(symbol-grade, $symbol-grade);\n    @include set-var(symbol-weight, $symbol-weight);\n    @include set-var(symbol-optical-size, $symbol-optical-size);\n  }\n\n  @if not $disable-rotator {\n    @include set-var(rotate-from, $rotate-from);\n    @include set-var(rotate-to, $rotate-to);\n  }\n}\n\n@mixin styles($disable-layer: false) {\n  @if not $_disable-icons {\n    @include utils.optional-layer(icon, $disable-layer) {\n      @include theme.default-system-theme {\n        @include use-dark-theme;\n      }\n\n      .rmd-icon {\n        @include use-var(font-size, size);\n        @include use-var(color);\n\n        // you normally don\'t want icons to shrink in flex containers.\n        // update the icon manually instead.\n        flex-shrink: 0;\n        user-select: none;\n\n        @if not $disable-font {\n          &--font {\n            text-align: center;\n          }\n        }\n\n        @if not $disable-svg {\n          &--svg {\n            fill: currentcolor;\n            height: 1em;\n            width: 1em;\n          }\n        }\n\n        @if not $disable-symbol {\n          &--symbol {\n            font-variation-settings:\n              "FILL" get-var(symbol-fill),\n              "wght" get-var(symbol-weight),\n              "GRAD" get-var(symbol-grade),\n              "opsz" get-var(symbol-optical-size);\n          }\n        }\n\n        @if not $disable-inline {\n          &--vab {\n            vertical-align: bottom;\n          }\n        }\n\n        @if not $disable-spacing-before {\n          &--before {\n            @include utils.auto-rtl(margin-right, get-var(spacing), 0);\n          }\n        }\n\n        @if not $disable-spacing-after {\n          &--after {\n            @include utils.auto-rtl(margin-left, get-var(spacing), 0);\n          }\n        }\n\n        @if not $disable-spacing-above {\n          &--above {\n            @include use-var(margin-bottom, spacing);\n          }\n        }\n\n        @if not $disable-spacing-below {\n          &--below {\n            @include use-var(margin-top, spacing);\n          }\n        }\n\n        @if not $disable-dense {\n          &--dense {\n            @include set-var(size, $dense-size);\n          }\n        }\n      }\n    }\n\n    @if not $disable-rotator {\n      .rmd-icon-rotator {\n        transform: rotate(get-var(rotate-from));\n\n        &--animate {\n          transition: transform $rotate-duration linear;\n        }\n\n        &--rotated {\n          transform: rotate(get-var(rotate-to));\n        }\n      }\n    }\n  }\n}\n',
   "@react-md/interaction/interaction":
diff --git a/packages/core/src/form/_form.scss b/packages/core/src/form/_form.scss
index f8b4893f92..f9c664b79d 100644
--- a/packages/core/src/form/_form.scss
+++ b/packages/core/src/form/_form.scss
@@ -1073,7 +1073,7 @@ $variables: (
     .rmd-select {
       // disable pointer events on touch devices so the soft keyboard does not
       // appear when clicking the select
-      @media (hover: none) and (pointer: course) {
+      @media (hover: none) and (pointer: coarse) {
         pointer-events: none;
       }