@rossigee/clarity-ui 18.2.1-fixed

package/forms/styles/_input.clarity.scss

@@ -0,0 +1,78 @@
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+@use '../../styles/mixins';
+@use 'mixins.forms' as forms-mixins;
+@use 'variables.forms' as forms-variables;
+
+@include mixins.exports('forms.input') {
+  .clr-input-wrapper {
+    white-space: nowrap;
+    max-height: forms-variables.$clr-forms-input-wrapper-height;
+  }
+
+  .clr-input {
+    @include forms-mixins.custom-inputs-reset(forms-variables.$clr-forms-input-wrapper-height);
+    @include forms-mixins.form-fields-appearance();
+
+    padding: forms-variables.$clr-forms-input-padding;
+    max-height: forms-variables.$clr-forms-input-wrapper-height;
+
+    @include mixins.generate-typography-token('SECONDARY-13-RG-EXP');
+
+    &[readonly] {
+      border: none;
+    }
+
+    &:not([readonly]) {
+      @include forms-mixins.input-border-bottom-animation();
+    }
+
+    &:disabled {
+      @include forms-mixins.disabled-form-fields();
+      @include mixins.input-placeholder-wrapper() {
+        color: forms-variables.$clr-forms-placeholder-disabled-color;
+      }
+    }
+  }
+
+  .clr-error .clr-input:not([readonly]) {
+    border-bottom-color: forms-variables.$clr-forms-invalid-color;
+
+    @include forms-mixins.input-border-bottom-animation(forms-variables.$clr-forms-invalid-color);
+  }
+
+  .clr-success .clr-input:not([readonly]) {
+    border-bottom-color: forms-variables.$clr-forms-valid-color;
+
+    @include forms-mixins.input-border-bottom-animation(forms-variables.$clr-forms-valid-color);
+  }
+
+  .clr-form-control.row .clr-input-wrapper {
+    max-width: calc(100% - #{forms-variables.$clr-forms-icon-size});
+  }
+
+  .clr-form-compact .clr-input {
+    @include forms-mixins.form-flatten-compact-adjustments();
+  }
+
+  .clr-form-control-readonly .clr-input {
+    border: none;
+  }
+
+  .clr-form-control-multi .clr-input {
+    max-width: calc(100% + #{forms-variables.$clr-forms-icon-size});
+  }
+
+  /**
+   Placeholder
+   **/
+
+  @include mixins.input-placeholder-wrapper() {
+    color: forms-variables.$clr-forms-placeholder-color;
+  }
+}

package/forms/styles/_mixins.forms.scss

@@ -0,0 +1,173 @@
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+@use '../../styles/mixins';
+@use '../../styles/core/tokens/variables.tokens' as tokens;
+@use '../../styles/variables/variables.global';
+@use '../../styles/variables/variables.density' as density;
+@use 'variables.forms' as forms-variables;
+@use '../../button/variables.toggles' as toggle-variables;
+
+// Flatten the error icon and message to be inline for certain input types
+
+@mixin form-flatten-validate-text() {
+  .clr-control-label {
+    font-weight: normal;
+    display: block;
+  }
+}
+
+// Used to provide an inline set of labels for checkbox/radios
+
+@mixin form-inline-input($wrap: false) {
+  display: flex;
+
+  @if $wrap {
+    flex-wrap: wrap;
+    align-content: flex-start;
+  }
+
+  .clr-control-label {
+    display: inline-block;
+    margin-right: density.$clr-base-gap-m;
+    width: auto;
+  }
+}
+
+// Used to adjust the flattened error icon message for compact
+
+@mixin form-flatten-compact-adjustments() {
+  max-width: 100%;
+
+  & ~ .clr-subtext {
+    margin-left: density.$clr-base-horizontal-offset-xs;
+  }
+}
+
+// Standard Clarity Input Bottom Border Animation
+
+@mixin input-border-bottom-animation($border-color: forms-variables.$clr-forms-focused-color) {
+  // Border-bottom animation on focus
+  background: linear-gradient(to bottom, transparent 95%, #{$border-color} 95%) no-repeat;
+  background-size: 0 100%;
+  transition: background-size 0.2s ease;
+
+  &:focus,
+  &.clr-focus,
+  &:focus-within {
+    border-bottom-color: $border-color;
+    background-size: 100% 100%;
+  }
+}
+
+// Style default input
+
+@mixin custom-inputs-reset($height) {
+  @include mixins.clr-appearance-normal();
+
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  background: none;
+  height: $height;
+
+  &:focus {
+    outline: 0;
+  }
+}
+@mixin form-fields-appearance(
+  $border-color: forms-variables.$clr-forms-border-color,
+  $text-color: forms-variables.$clr-forms-text-color
+) {
+  color: $text-color;
+  border-bottom: #{tokens.$cds-alias-object-border-width-100} solid #{$border-color};
+  display: inline-flex;
+  align-items: center;
+}
+@mixin disabled-form-fields() {
+  color: forms-variables.$clr-forms-text-disabled-color;
+  cursor: not-allowed;
+}
+@mixin checkbox-radio-toggle-control-group-gap() {
+  & + .clr-checkbox-wrapper,
+  & + .clr-radio-wrapper {
+    padding-top: density.$clr-base-control-group-gap;
+  }
+
+  & + .clr-toggle-wrapper {
+    margin-top: density.$clr-base-control-group-gap;
+  }
+}
+@mixin checkbox-radio-input-styles($size) {
+  position: relative;
+  //NOTE: Even though the input is invisible, we assign it a height
+  //and width so that it aligns right behind the fake checkbox
+  //and so that the user's default input size doesn't affect it
+
+  @include mixins.min-equilateral($size);
+}
+@mixin checkbox-radio-label-styles($min-height, $color, $typography) {
+  //Positioning
+  position: relative;
+
+  //Display
+  display: block;
+  margin-top: 0;
+  cursor: pointer;
+  min-height: $min-height;
+  padding: density.$clr-base-vertical-offset-multi-row-inline-s 0;
+  color: $color;
+
+  @include mixins.generate-typography-token($typography);
+}
+@mixin checkbox-radio-shared-inactive($size, $border-color) {
+  //Display
+  content: '';
+  position: absolute;
+  display: inline-block;
+
+  @include mixins.equilateral($size);
+
+  border: tokens.$cds-global-space-1 solid $border-color;
+}
+@mixin custom-inputs($height) {
+  @include mixins.clr-appearance-normal();
+
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  background: none;
+  height: $height;
+
+  &:focus {
+    outline: 0;
+  }
+}
+@mixin range-style($height, $background-color) {
+  appearance: none;
+  left: 0;
+  height: $height;
+  background-color: $background-color;
+}
+@mixin range-border-style($border-color, $border-radius, $border-width) {
+  border: $border-width solid $border-color;
+  border-radius: $border-radius;
+}
+@mixin range-thumb-style($size, $background-color) {
+  border-radius: 50%;
+  background-color: $background-color;
+
+  @include mixins.equilateral($size);
+}
+@mixin clr-toggle-transition-styles() {
+  transition-duration: toggle-variables.$clr-toggle-transition-time;
+  transition-timing-function: toggle-variables.$clr-toggle-transition-animation;
+}

package/forms/styles/_number-input.clarity.scss

@@ -0,0 +1,58 @@
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+@use '../../styles/mixins';
+@use 'mixins.forms' as forms-mixins;
+@use 'variables.forms' as forms-variables;
+@use '../../styles/core/tokens/variables.tokens' as tokens;
+@use '../../styles/variables/variables.density' as density;
+@use 'sass:selector';
+
+@include mixins.exports('forms.number-input') {
+  .clr-number-input-wrapper {
+    display: inline-block;
+    white-space: nowrap;
+    max-height: forms-variables.$clr-forms-input-wrapper-height;
+
+    .clr-number-input {
+      /* Chrome, Safari, Edge, Opera */
+      &::-webkit-outer-spin-button,
+      &::-webkit-inner-spin-button {
+        appearance: none;
+        margin: 0;
+      }
+
+      /* Firefox */
+      appearance: textfield;
+
+      &-separator {
+        background: tokens.$cds-alias-object-border-color;
+        width: tokens.$cds-alias-object-border-width-100;
+        height: density.$clr-base-row-height-xs;
+      }
+    }
+
+    .clr-input-group-icon-action {
+      height: calc(forms-variables.$clr-forms-input-wrapper-height - tokens.$cds-alias-object-border-width-300);
+      padding: 0 density.$clr-base-horizontal-offset-xs;
+      display: flex;
+      align-items: center;
+
+      &:hover {
+        background-color: tokens.$cds-alias-object-interaction-background-hover;
+      }
+
+      &:active {
+        background-color: tokens.$cds-alias-object-interaction-background-active;
+      }
+
+      &:disabled {
+        background-color: unset;
+      }
+    }
+  }
+}

package/forms/styles/_password.clarity.scss

@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+@use 'variables.forms' as forms-variables;
+
+.clr-input-wrapper input[clrPassword] {
+  & + button.clr-input-group-icon-action {
+    .clr-password-eye-icon {
+      color: forms-variables.$clr-forms-password-eye-icon-color;
+    }
+  }
+
+  & + button.clr-input-group-icon-action[disabled] {
+    .clr-password-eye-icon {
+      fill: forms-variables.$clr-forms-password-disabled-eye-icon-color;
+    }
+  }
+
+  &[disabled] {
+    color: forms-variables.$clr-forms-password-disabled-eye-icon-color;
+  }
+}

package/forms/styles/_properties.forms.scss

@@ -0,0 +1,121 @@
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+@use '../../styles/mixins';
+@use '../../styles/core/tokens/variables.tokens' as tokens;
+@use '../../styles/variables/variables.density' as density;
+
+@include mixins.exports('forms.properties') {
+  @include mixins.root-or-host() {
+    // Legacy CLR form base line (6px). Baked deeply in all form calculations.
+    // Don't change it unless you know exactly what you are doing.
+    --clr-forms-baseline: #{tokens.$cds-global-space-4};
+    --clr-forms-label-font-weight: #{tokens.$cds-alias-typography-font-weight-semibold};
+    --clr-forms-checkbox-height: #{tokens.$cds-global-space-7};
+
+    &,
+    & [clr-density] {
+      --clr-forms-icon-size: #{density.$clr-base-icon-size-s};
+      --clr-forms-input-group-icon-action-size: #{density.$clr-base-icon-size-s};
+      --clr-forms-checkbox-border-radius: #{density.$clr-base-border-radius-s};
+      --clr-forms-select-caret-size: #{density.$clr-base-icon-size-xs};
+      --clr-forms-textarea-border-radius: #{density.$clr-base-border-radius-s};
+      --clr-forms-datalist-caret-icon-size: #{density.$clr-base-icon-size-s};
+
+      // Input
+      --clr-forms-input-padding: 0 #{density.$clr-base-horizontal-offset-m};
+      --clr-forms-input-wrapper-height: #{density.$clr-base-row-height-s};
+
+      // Range
+      --clr-forms-range-thumb-height: #{density.$clr-base-icon-size-s};
+      --clr-forms-range-track-height: #{density.$clr-base-layout-space-2xs};
+      --clr-forms-range-track-border-radius: #{density.$clr-base-border-radius-s};
+    }
+
+    &,
+    & [cds-theme] {
+      --clr-form-disabled-background-color: #{tokens.$cds-alias-object-interaction-background};
+
+      // Generic
+      --clr-forms-label-color: #{tokens.$cds-alias-typography-color-400};
+      --clr-forms-text-color: #{tokens.$cds-alias-typography-color-400};
+      --clr-forms-invalid-color: #{tokens.$cds-alias-status-danger};
+      --clr-forms-invalid-text-color: #{tokens.$cds-alias-status-danger};
+      --clr-forms-valid-color: #{tokens.$cds-alias-status-success};
+      --clr-forms-valid-text-color: #{tokens.$cds-alias-status-success};
+      --clr-forms-subtext-color: #{tokens.$cds-alias-typography-color-300};
+      --clr-forms-placeholder-color: #{tokens.$cds-alias-typography-color-200};
+      --clr-forms-border-color: #{tokens.$cds-alias-object-interaction-border-color};
+      --clr-forms-focused-color: #{tokens.$cds-alias-object-interaction-background-highlight};
+      --clr-forms-subtext-disabled-color: #{tokens.$cds-alias-typography-disabled};
+      --clr-forms-border-disabled-color: #{tokens.$cds-alias-object-interaction-color-disabled};
+      --clr-forms-text-disabled-color: #{tokens.$cds-alias-typography-disabled};
+      --clr-forms-label-disabled-color: #{tokens.$cds-alias-typography-disabled};
+      --clr-forms-placeholder-disabled-color: #{tokens.$cds-alias-typography-disabled};
+
+      // Input group
+      --clr-forms-input-group-icon-disabled-color: #{tokens.$cds-alias-status-disabled};
+
+      // Checkbox
+      --clr-forms-checkbox-label-color: var(--clr-forms-label-color);
+      --clr-forms-checkbox-background-color: #{tokens.$cds-alias-object-interaction-background-highlight};
+      --clr-forms-checkbox-indeterminate-border-color: #{tokens.$cds-alias-object-interaction-background-highlight};
+      --clr-forms-checkbox-mark-color: #{tokens.$cds-alias-object-interaction-background};
+      --clr-forms-checkbox-disabled-label-color: var(--clr-forms-label-disabled-color);
+      --clr-forms-checkbox-disabled-background-color: var(--clr-form-disabled-background-color);
+      --clr-forms-checkbox-disabled-checked-background-color: #{tokens.$cds-alias-status-disabled};
+      --clr-forms-checkbox-disabled-border-color: #{tokens.$cds-alias-status-disabled};
+      --clr-forms-checkbox-disabled-indeterminate-color: #{tokens.$cds-alias-status-disabled};
+      --clr-forms-checkbox-disabled-mark-color: #{tokens.$cds-alias-object-interaction-background};
+
+      // Radio
+      --clr-forms-radio-label-color: var(--clr-forms-label-color);
+      --clr-forms-radio-label-disabled-color: #{tokens.$cds-alias-typography-disabled};
+      --clr-forms-radio-disabled-background-color: var(--clr-form-disabled-background-color);
+      --clr-forms-radio-disabled-mark-color: #{tokens.$cds-alias-typography-color-100};
+      --clr-forms-radio-selected-shadow: inset 0 0 0 #{tokens.$cds-global-space-4}
+        #{tokens.$cds-alias-object-interaction-background-highlight};
+      --clr-forms-radio-checked-disabled-shadow: inset 0 0 0 #{tokens.$cds-global-space-4}
+        #{tokens.$cds-alias-object-interaction-color-disabled};
+
+      // Password
+      --clr-forms-password-eye-icon-color: #{tokens.$cds-alias-object-interaction-color};
+      --clr-forms-password-disabled-eye-icon-color: #{tokens.$cds-alias-status-disabled};
+
+      // Range
+      --clr-forms-range-progress-fill-color: #{tokens.$cds-alias-object-interaction-background-highlight};
+      --clr-forms-range-track-color: #{tokens.$cds-alias-object-container-background-shade};
+      --clr-forms-range-track-border-color: #{tokens.$cds-alias-object-interaction-background-highlight};
+      --clr-forms-range-track-border-width: #{tokens.$cds-global-space-1};
+      --clr-forms-range-progress-fill-color-disabled: #{tokens.$cds-alias-object-interaction-color-disabled};
+      --clr-forms-range-track-color-disabled: #{tokens.$cds-alias-status-disabled-tint};
+      --clr-forms-range-track-border-color-disabled: #{tokens.$cds-alias-object-interaction-color-disabled};
+
+      // Select
+      --clr-forms-select-hover-background: transparent;
+      --clr-forms-select-disabled-color: #{tokens.$cds-alias-object-interaction-color-disabled};
+      --clr-forms-select-hover-border-color: #{tokens.$cds-alias-object-interaction-color-hover};
+      --clr-forms-select-disabled-border-color: #{tokens.$cds-alias-object-interaction-color-disabled};
+      --clr-forms-select-caret-hover-color: #{tokens.$cds-alias-object-interaction-color-hover};
+      --clr-forms-select-caret-color: #{tokens.$cds-alias-object-interaction-color};
+      --clr-forms-select-option-color: #{tokens.$cds-alias-typography-color-400};
+      --clr-forms-select-option-background-color: #{tokens.$cds-alias-object-interaction-background};
+      --clr-forms-select-multiple-background-color: #{tokens.$cds-alias-object-container-background};
+      --clr-forms-select-multiple-border-color: #{tokens.$cds-alias-object-border-color};
+      --clr-forms-select-multiple-option-color: #{tokens.$cds-alias-typography-color-400};
+      --clr-forms-select-multiple-selected-option-background-color: #{tokens.$cds-alias-object-interaction-background-selected};
+
+      // Textarea
+      --clr-forms-textarea-background-color: #{tokens.$cds-alias-object-container-background};
+      --clr-forms-textarea-disabled-background: #{tokens.$cds-alias-object-container-background};
+
+      // Datalist
+      --clr-forms-datalist-caret-color: #{tokens.$cds-alias-status-neutral};
+      --clr-forms-datalist-caret-disabled-color: #{tokens.$cds-alias-status-disabled};
+    }
+  }
+}

package/forms/styles/_radio.clarity.scss

@@ -0,0 +1,120 @@
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+@use '../../styles/mixins';
+@use 'mixins.forms' as forms-mixins;
+@use 'variables.forms' as forms-variables;
+@use '../../styles/variables/variables.density' as density;
+@use '../../styles/core/tokens/variables.tokens' as tokens;
+
+@include mixins.exports('forms.radio') {
+  //Remove the default radio appearance
+  %custom-radio {
+    @include mixins.clr-appearance-normal();
+  }
+
+  // @TODO un-nest the radio inputs when old forms are removed
+  .clr-radio-wrapper {
+    @include forms-mixins.form-flatten-validate-text();
+
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+
+    @include forms-mixins.checkbox-radio-toggle-control-group-gap();
+
+    //Hide the default radio
+    input[type='radio'] {
+      @include forms-mixins.checkbox-radio-input-styles(forms-variables.$clr-forms-radio-size);
+
+      @extend %custom-radio;
+
+      padding: density.$clr-base-vertical-offset-xs 0;
+
+      &:not(:disabled) {
+        cursor: pointer;
+      }
+
+      //Radio button base
+      &::before {
+        @include forms-mixins.checkbox-radio-shared-inactive(
+          forms-variables.$clr-forms-radio-height,
+          forms-variables.$clr-forms-border-color
+        );
+
+        border-radius: 50%;
+      }
+
+      //Checked Radio Styles
+      &:checked {
+        &::before {
+          border: none;
+          box-shadow: forms-variables.$clr-forms-radio-selected-shadow;
+        }
+
+        &:disabled::before {
+          //background-color around the dot
+          box-shadow: forms-variables.$clr-forms-radio-checked-disabled-shadow;
+        }
+      }
+
+      &:focus {
+        outline: none;
+
+        &::before {
+          @include mixins.include-outline-style-form-fields(mixins.baselinePx(3));
+        }
+      }
+
+      &:disabled {
+        + label {
+          cursor: not-allowed;
+          color: forms-variables.$clr-forms-radio-label-disabled-color;
+        }
+
+        &::before {
+          background-color: forms-variables.$clr-forms-radio-disabled-background-color;
+          border-color: tokens.$cds-alias-object-interaction-color-disabled;
+        }
+      }
+    }
+
+    .clr-control-label {
+      @include forms-mixins.checkbox-radio-label-styles(
+        forms-variables.$clr-forms-radio-label-height,
+        forms-variables.$clr-forms-radio-label-color,
+        'SECONDARY-13-RG-CPT'
+      );
+
+      &:empty {
+        padding-left: 0;
+      }
+    }
+  }
+
+  .clr-form-control-disabled .clr-radio-wrapper {
+    .clr-control-label {
+      cursor: not-allowed;
+      color: forms-variables.$clr-forms-radio-label-disabled-color;
+    }
+  }
+
+  .clr-error .clr-radio-wrapper input[type='radio']::before {
+    border-color: forms-variables.$clr-forms-invalid-color;
+  }
+
+  .clr-form-compact .clr-radio-wrapper {
+    padding-top: 0;
+
+    @include forms-mixins.form-flatten-compact-adjustments();
+    @include forms-mixins.form-inline-input();
+
+    .clr-control-label {
+      margin-top: 0;
+    }
+  }
+}

package/forms/styles/_range.clarity.scss

@@ -0,0 +1,124 @@
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+@use '../../styles/mixins';
+@use 'mixins.forms' as forms-mixins;
+@use 'variables.forms' as forms-variables;
+@use '../../styles/core/tokens/variables.tokens' as tokens;
+
+@include mixins.exports('forms.range') {
+  // Thumb should move down to match its center with track center
+  $thumb-y-translation: calc(
+    #{forms-variables.$clr-forms-range-thumb-height} / 2 - #{forms-variables.$clr-forms-range-track-height} / 2 +
+      #{forms-variables.$clr-forms-range-border-width}
+  );
+
+  .clr-range-wrapper {
+    position: relative;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    height: forms-variables.$clr-forms-input-wrapper-height;
+    white-space: nowrap;
+
+    .fill-input {
+      position: absolute;
+      left: 0;
+      display: inline-block;
+      height: forms-variables.$clr-forms-range-track-height;
+      pointer-events: none; // needed for correct chrome behavior with progress
+      cursor: pointer;
+      z-index: 10;
+      background-color: forms-variables.$clr-forms-range-progress-fill-color;
+      border-radius: forms-variables.$clr-forms-range-border-radius;
+      border-style: none;
+    }
+  }
+
+  .clr-range {
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+    height: forms-variables.$clr-forms-range-thumb-height;
+
+    &:disabled {
+      pointer-events: auto; // needed for correct chrome behavior for disabled w/ progress
+      cursor: not-allowed;
+
+      @include forms-mixins.range-style(
+        forms-variables.$clr-forms-range-track-height,
+        forms-variables.$clr-forms-range-track-color-disabled
+      );
+    }
+
+    &:disabled::-webkit-slider-thumb {
+      appearance: none;
+      transform: translate(0, #{$thumb-y-translation});
+
+      @include forms-mixins.range-thumb-style(
+        forms-variables.$clr-forms-range-thumb-height,
+        forms-variables.$clr-forms-range-progress-fill-color-disabled
+      );
+    }
+
+    &:disabled::-moz-range-thumb {
+      border: 0;
+
+      @include forms-mixins.range-thumb-style(
+        forms-variables.$clr-forms-range-thumb-height,
+        forms-variables.$clr-forms-range-progress-fill-color-disabled
+      );
+    }
+
+    &:disabled + .fill-input {
+      pointer-events: auto; // needed for correct chrome behavior for disabled w/ progress
+      cursor: not-allowed;
+      background-color: forms-variables.$clr-forms-range-progress-fill-color-disabled;
+    }
+  }
+
+  input[type='range'] {
+    padding: 0;
+
+    @include forms-mixins.range-style(
+      forms-variables.$clr-forms-range-track-height,
+      forms-variables.$clr-forms-range-track-color
+    );
+    @include forms-mixins.range-border-style(
+      forms-variables.$clr-forms-range-border-color,
+      forms-variables.$clr-forms-range-border-radius,
+      forms-variables.$clr-forms-range-border-width
+    );
+
+    &::-webkit-slider-thumb {
+      appearance: none;
+      transform: translate(0, #{$thumb-y-translation});
+
+      @include forms-mixins.range-thumb-style(
+        forms-variables.$clr-forms-range-thumb-height,
+        forms-variables.$clr-forms-range-progress-fill-color
+      );
+    }
+
+    &:disabled {
+      @include forms-mixins.range-border-style(
+        forms-variables.$clr-forms-range-border-color-disabled,
+        forms-variables.$clr-forms-range-border-radius,
+        forms-variables.$clr-forms-range-border-width
+      );
+    }
+
+    &::-moz-range-thumb {
+      border: 0;
+
+      @include forms-mixins.range-thumb-style(
+        forms-variables.$clr-forms-range-thumb-height,
+        forms-variables.$clr-forms-range-progress-fill-color
+      );
+    }
+  }
+}