@react-md/core 1.0.0-next.0

package/src/form/_form.scss

@@ -0,0 +1,2066 @@
+@use "sass:map";
+@use "sass:math";
+@use "sass:color";
+@use "../utils";
+@use "../box-shadows";
+@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-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-font-size: 0.75em !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-spacing: icon.$spacing !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-margin: icon.$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-theme-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-circular-progress-width: 12 !default;
+
+$menu-item-switch-spacing: calc(icon.$spacing + $switch-ball-size) !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-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;
+
+$var-lookup: (
+  active-color: (
+    var: --rmd-form-active-color,
+    value: $active-color,
+  ),
+  focus-color: (
+    var: --rmd-form-focus-color,
+    value: $focus-color,
+  ),
+  floating-top: (
+    var: --rmd-form-label-floating-top,
+    value: $label-floating-top,
+  ),
+  label-left-offset: (
+    var: --rmd-form-label-left-offset,
+    value: 0px,
+  ),
+  label-top-offset: (
+    var: --rmd-form-label-top-offset,
+    value: 0px,
+  ),
+  label-active-padding: (
+    var: --rmd-form-label-active-padding,
+    value: 0px,
+  ),
+  label-active-background-color: (
+    var: --rmd-form-label-active-background-color,
+    value: transparent,
+  ),
+  text-height: (
+    var: --rmd-form-text-height,
+    value: $text-field-height,
+  ),
+  text-padding-left: (
+    var: --rmd-form-text-padding-left,
+    value: 0px,
+  ),
+  text-padding-right: (
+    var: --rmd-form-text-padding-right,
+    value: 0px,
+  ),
+  text-padding-top: (
+    var: --rmd-form-text-padding-top,
+    value: 0px,
+  ),
+  text-border-color: (
+    var: --rmd-form-text-border-color,
+    value: $text-field-border-color,
+  ),
+  text-hover-border-color: (
+    var: --rmd-form-text-hover-border-color,
+    value: $text-field-hover-border-color,
+  ),
+  text-filled-color: (
+    var: --rmd-form-text-filled-color,
+    value: $text-field-filled-background-color,
+  ),
+  textarea-height: (
+    var: --rmd-form-textarea-height,
+    value: 0px,
+  ),
+  textarea-padding: (
+    var: --rmd-form-textarea-padding,
+    value: $textarea-vertical-padding,
+  ),
+  addon-top: (
+    var: --rmd-form-addon-top,
+    value: auto,
+  ),
+  addon-margin-top: (
+    var: --rmd-form-addon-margin-top,
+    value: 0px,
+  ),
+  switch-track-background-color: (
+    var: --rmd-switch-track-background-color,
+    value: $switch-track-background-color,
+  ),
+  switch-ball-background-color: (
+    var: --rmd-switch-ball-background-color,
+    value: $switch-ball-background-color,
+  ),
+  slider-color: (
+    var: --rmd-slider-color,
+    value: $slider-track-color,
+  ),
+  slider-active-color: (
+    var: --rmd-slider-active-color,
+    value: $slider-track-active-color,
+  ),
+  slider-inactive-color: (
+    var: --rmd-slider-inactive-color,
+    value: $slider-track-inactive-color,
+  ),
+  slider-size: (
+    var: --rmd-slider-size,
+    value: $slider-size,
+  ),
+  slider-active-size: (
+    var: --rmd-slider-active-size,
+    value: $slider-track-active-size,
+  ),
+  slider-inactive-size: (
+    var: --rmd-slider-inactive-size,
+    value: $slider-track-inactive-size,
+  ),
+  slider-vertical-size: (
+    var: --rmd-slider-vertical-size,
+    value: $slider-vertical-size,
+  ),
+  slider-offset-1: (
+    var: --rmd-slider-offset-1,
+    value: 0,
+  ),
+  slider-offset-2: (
+    var: --rmd-slider-offset-2,
+    value: 0,
+  ),
+  slider-tooltip-scale: (
+    var: --rmd-slider-tooltip-scale,
+    value: 1,
+  ),
+  slider-tooltip-translate: (
+    var: --rmd-slider-tooltip-translate,
+    value: -50%,
+  ),
+  slider-mark-offset: (
+    var: --rmd-slider-mark-offset,
+    value: 0%,
+  ),
+  slider-mark-active-color: (
+    var: --rmd-slider-mark-active-color,
+    value: $slider-mark-active-color,
+  ),
+  slider-mark-active-opacity: (
+    var: --rmd-slider-mark-active-opacity,
+    value: $slider-mark-active-opacity,
+  ),
+  slider-mark-inactive-color: (
+    var: --rmd-slider-mark-inactive-color,
+    value: $slider-mark-inactive-color,
+  ),
+  slider-mark-inactive-opacity: (
+    var: --rmd-slider-mark-inactive-opacity,
+    value: $slider-mark-inactive-opacity,
+  ),
+);
+
+@function get-var($name, $fallback: null) {
+  $found: utils.validate($var-lookup, $name, "form var");
+  $var: map.get($found, var);
+  $value: if($fallback, $fallback, map.get($found, value));
+
+  @if $value {
+    @return var(#{$var}, #{$value});
+  }
+
+  @return var(#{$var});
+}
+
+@mixin set-var($name, $value) {
+  $var: map.get(utils.validate($var-lookup, $name, "form var"), var);
+
+  #{$var}: #{$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-border-color, $text-field-light-border-color);
+    @include set-var(
+      text-hover-border-color,
+      $text-field-light-hover-border-color
+    );
+    @include set-var(
+      text-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-border-color, $text-field-dark-border-color);
+    @include set-var(
+      text-hover-border-color,
+      $text-field-dark-hover-border-color
+    );
+    @include set-var(
+      text-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 {
+  .rmd-file-input:focus-within::before {
+    @include utils.keyboard-only {
+      @include interaction.focus-styles;
+    }
+  }
+}
+
+@mixin form-message-styles {
+  .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 and $text-field-filled-padding {
+      &--filled {
+        padding-left: $text-field-filled-padding;
+        padding-right: $text-field-filled-padding;
+      }
+    }
+
+    @if not $disable-text-field-outlined-theme and $text-field-outlined-padding
+    {
+      &--outline {
+        padding-left: $text-field-outlined-padding;
+        padding-right: $text-field-outlined-padding;
+      }
+    }
+
+    @if not
+      $disable-text-field-underlined-theme and
+      $text-field-underlined-padding
+    {
+      &--underline {
+        padding-left: $text-field-underlined-padding;
+        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 {
+  .rmd-label {
+    @include utils.map-to-styles($label-typography);
+
+    align-items: center;
+    display: inline-flex;
+    transition-duration: transition.$linear-duration;
+    transition-property: background-color, color, font-size, 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-padding-left)),
+            get-var(floating-top)
+          );
+        }
+
+        left: 0;
+        // disable pointer events for floating labels so that the input behind
+        // is clicked instead. this prevents double click events for the Select
+        // component
+        pointer-events: none;
+        position: absolute;
+        top: 0;
+        transform: translate(get-var(text-padding-left), get-var(floating-top));
+        will-change: font-size, transform;
+      }
+
+      &--floating-dense {
+        @include set-var(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: translate(
+            utils.negate-var(get-var(label-left-offset)),
+            get-var(label-top-offset)
+          );
+        }
+        @include use-var(background-color, label-active-background-color);
+        @include use-var(padding, label-active-padding);
+
+        font-size: $label-floating-font-size;
+        transform: translate(
+          get-var(label-left-offset),
+          get-var(label-top-offset)
+        );
+        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 {
+  .rmd-text-field-container {
+    @include use-var(height, text-height);
+
+    align-items: center;
+    display: flex;
+    position: relative;
+
+    @if not $disable-text-field-container-dense {
+      &--dense {
+        @include set-var(text-height, $text-field-dense-height);
+      }
+
+      &--dense-label {
+        @include set-var(text-height, $text-field-label-dense-height);
+      }
+    }
+
+    &--inline {
+      display: inline-flex;
+    }
+
+    &--stretch {
+      flex: 1 1 auto;
+      width: 100%;
+    }
+
+    &--label {
+      @include set-var(text-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-border-color, theme.theme-get-var(error-color));
+        @include set-var(
+          text-hover-border-color,
+          theme.theme-get-var(error-color)
+        );
+      }
+    }
+
+    &--hoverable:hover {
+      @include set-var(text-border-color, get-var(text-hover-border-color));
+    }
+
+    @if not $disable-text-field-outlined-theme {
+      &--outline {
+        @include set-var(text-padding-left, $text-field-outlined-padding);
+        @include set-var(text-padding-right, $text-field-outlined-padding);
+        @include set-var(
+          label-left-offset,
+          $text-field-outlined-padding - $label-floating-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)
+        );
+        @include use-var(border-color, text-border-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;
+      }
+
+      &--outline-left {
+        $distance: calc(
+          #{icon.get-var(size)} +
+            #{$text-field-outlined-padding +
+            $text-field-spacing}
+        );
+
+        @include set-var(text-padding-left, $distance);
+      }
+
+      &--outline-right {
+        $distance: calc(#{icon.get-var(size)} + #{$text-field-spacing * 2});
+
+        @include set-var(text-padding-right, $distance);
+      }
+    }
+
+    @if not $disable-text-field-filled-theme {
+      &--filled {
+        @include set-var(text-padding-left, $text-field-filled-padding);
+        @include set-var(text-padding-right, $text-field-filled-padding);
+        @include set-var(label-left-offset, $text-field-filled-padding);
+        @include use-var(background-color, text-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-border-color);
+
+        border-bottom-style: solid;
+        border-bottom-width: $text-field-border-width;
+
+        @if $text-field-underlined-padding {
+          @include set-var(text-padding-left, $text-field-underlined-padding);
+          @include set-var(text-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-padding-top,
+            $text-field-underlined-placeholder-addon-padding-top
+          );
+          height: $text-field-underlined-placeholder-height;
+        }
+
+        &--underline-placeholder-only {
+          @include set-var(
+            text-padding-top,
+            $text-field-underlined-placeholder-padding-top
+          );
+        }
+      }
+
+      &--underline-labelled {
+        @include set-var(
+          text-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-padding-left, calc(#{$addon-offset}));
+        }
+
+        &--underline-right-addon {
+          @include set-var(text-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-padding-right);
+    @include use-var(padding-right, text-padding-left);
+  }
+  @include use-var(padding-left, text-padding-left);
+  @include use-var(padding-right, text-padding-right);
+  @include use-var(padding-top, text-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 {
+  .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 {
+  .rmd-password {
+    @include set-var(text-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 {
+  .rmd-textarea-container {
+    @include set-var(addon-top, $textarea-addon-top);
+
+    height: auto;
+    max-width: 100%;
+    padding-top: calc(
+      #{get-var(text-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(
+          floating-top,
+          $text-field-underlined-label-padding-top
+        );
+      }
+    }
+
+    @if not $disable-textarea-resizing-rows {
+      &--height {
+        height: calc(
+          #{get-var(text-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 {
+  .rmd-textarea {
+    @include set-var(text-padding-top, 0px);
+    @include use-var(min-height, text-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 {
+  .rmd-select-container {
+    outline-style: none;
+  }
+
+  .rmd-select-value {
+    @include _text-field-base-styles;
+
+    align-items: center;
+    display: flex;
+    gap: 0.5rem;
+    position: absolute;
+    white-space: nowrap;
+
+    &__v {
+      @include typography.text-overflow;
+    }
+  }
+
+  .rmd-select {
+    opacity: 0;
+    pointer-events: none;
+
+    // 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-padding-left);
+
+          padding-left: 0;
+        }
+
+        padding-right: 0;
+      }
+    }
+
+    @if not $disable-text-field-outlined-theme {
+      &--outline {
+        @include utils.rtl {
+          @include use-var(padding-right, text-padding-left);
+
+          padding-left: $text-field-outlined-padding;
+        }
+
+        padding-right: $text-field-outlined-padding;
+      }
+    }
+
+    @if not $disable-text-field-filled-theme {
+      &--filled {
+        @include utils.rtl {
+          @include use-var(padding-right, text-padding-left);
+
+          padding-left: $text-field-filled-padding;
+        }
+
+        padding-right: $text-field-filled-padding;
+      }
+    }
+  }
+}
+
+@mixin option-styles {
+  .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 {
+  @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-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-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 {
+  .rmd-text-field-addon {
+    @if not
+      $disable-text-field-filled-theme or not
+      $disable-text-field-underlined-theme
+    {
+      @include use-var(margin-top, addon-margin-top);
+    }
+
+    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(label-left-offset));
+    }
+
+    &--after {
+      @include utils.auto-rtl(right, $text-field-spacing);
+    }
+
+    &--presentational {
+      pointer-events: none;
+    }
+  }
+}
+
+@mixin hidden-input-styles {
+  .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 {
+  .rmd-input-toggle {
+    @include interaction.surface(
+      $focus-selector: "&:focus-within",
+      $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 {
+  .rmd-switch {
+    padding: $switch-track-vertical-padding $switch-track-horizontal-padding;
+
+    &--clickable:hover {
+      cursor: pointer;
+    }
+
+    &__input {
+      @include utils.keyboard-only {
+        &:focus + .rmd-switch__ball::before {
+          @include interaction.focus-styles;
+        }
+      }
+
+      &:disabled + .rmd-switch__ball {
+        cursor: auto;
+
+        &:hover::before {
+          @include interaction.set-var(background-color, transparent);
+        }
+      }
+    }
+
+    &__track {
+      @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;
+      }
+
+      @if not $disable-switch-circular-progress {
+        &--async {
+          @include progress.set-var(
+            circular-stroke-width,
+            $switch-circular-progress-width
+          );
+          @include progress.set-var(circular-size, $switch-ball-size);
+        }
+      }
+    }
+
+    &__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: 1;
+      }
+
+      $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 {
+  .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 {
+      // increase the spacing because the switch's ball extends past the
+      // container's width
+      @if $menu-item-switch-spacing and
+        $menu-item-switch-spacing !=
+        icon.$spacing
+      {
+        &--switch {
+          @include icon.set-var(spacing, $menu-item-switch-spacing);
+        }
+      }
+
+      // 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 {
+  .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)
+    );
+    @include utils.keyboard-only {
+      &:focus::after {
+        transform: scale($slider-thumb-focus-scale);
+      }
+    }
+    @include utils.touch-only {
+      &:hover::after,
+      &--active:after,
+      &--active:hover::after {
+        transform: none;
+      }
+    }
+
+    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;
+    }
+
+    &:hover::after {
+      transform: scale($slider-thumb-focus-scale);
+    }
+
+    &--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;
+
+      // 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 styles {
+  @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;
+  }
+
+  @if not $disable-file-input {
+    @include file-input-styles;
+  }
+
+  @if not $disable-message {
+    @include form-message-styles;
+  }
+
+  @if not $_disable-text-field-container {
+    @include text-field-container-styles;
+  }
+
+  @if not $disable-text-field or not $disable-password or not $disable-textarea
+  {
+    @include text-field-styles;
+  }
+
+  @if not $disable-password {
+    @include password-styles;
+  }
+
+  @if not $disable-textarea {
+    @include textarea-container-styles;
+    @include textarea-styles;
+  }
+
+  @if not $disable-select {
+    @include select-styles;
+  }
+
+  @if not $disable-option {
+    @include option-styles;
+  }
+
+  @if not $disable-native-select {
+    @include native-select-styles;
+  }
+
+  @if not $disable-text-field-addon {
+    @include text-field-addon-styles;
+  }
+
+  @if not $disable-checkbox or not $disable-radio or not $disable-switch {
+    @include hidden-input-styles;
+    @include input-toggle-styles;
+  }
+
+  @if not $disable-switch {
+    @include switch-styles;
+  }
+
+  @if not
+    $disable-menu-item-checkbox or not
+    $disable-menu-item-radio or not
+    $disable-menu-item-switch
+  {
+    @include menu-item-input-toggle-styles;
+  }
+
+  @if not $disable-slider {
+    @include slider-styles;
+  }
+}