@react-md/core 1.0.0-next.14 → 1.0.0-next.16

package/src/form/_form.scss

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