@syncfusion/ej2-inputs 25.2.6 → 26.1.35

package/styles/otp-input/tailwind.css

@@ -0,0 +1,225 @@
+.e-otpinput {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  gap: 12px;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+}
+.e-otpinput:has(.e-otp-separator):not(:empty) {
+  gap: 4px;
+}
+.e-otpinput .e-otp-input-field {
+  min-width: 30px;
+  min-height: 30px;
+  text-align: center;
+  padding: 0;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+  border: none;
+}
+.e-otpinput .e-otp-input-fieldinput[type=password], .e-otpinput .e-otp-input-field[type=password] {
+  font-size: 18px;
+}
+.e-otpinput .e-otp-input-field.e-input.e-otp-input-focus:focus {
+  padding-bottom: 0;
+}
+.e-otpinput.e-outline .e-otp-input-field {
+  border-radius: 4px;
+}
+.e-otpinput.e-underlined .e-otp-input-field {
+  border-radius: 4px 4px 0 0;
+}
+.e-otpinput.e-filled .e-otp-input-field {
+  border-radius: 4px 4px 0 0;
+  padding: 0;
+}
+.e-otpinput .e-otp-separator {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+}
+.e-otpinput input[type=number]::-webkit-inner-spin-button,
+.e-otpinput [type=number]::-webkit-outer-spin-button {
+  /* stylelint-disable property-no-vendor-prefix */
+  -webkit-appearance: none;
+  /* stylelint-enable property-no-vendor-prefix */
+  margin: 0;
+}
+.e-otpinput input[type=number] {
+  /* stylelint-disable property-no-vendor-prefix */
+  -moz-appearance: textfield;
+  /* stylelint-enable property-no-vendor-prefix */
+}
+
+.e-small.e-otpinput,
+.e-small .e-otpinput {
+  gap: 8px;
+}
+.e-small.e-otpinput:has(.e-otp-separator):not(:empty),
+.e-small .e-otpinput:has(.e-otp-separator):not(:empty) {
+  gap: 4px;
+}
+.e-small.e-otpinput .e-otp-input-field,
+.e-small .e-otpinput .e-otp-input-field {
+  min-width: 26px;
+  min-height: 26px;
+  font-size: 12px;
+  line-height: 16px;
+  padding: 0;
+}
+.e-small.e-otpinput .e-otp-input-fieldinput[type=password], .e-small.e-otpinput .e-otp-input-field[type=password],
+.e-small .e-otpinput .e-otp-input-fieldinput[type=password],
+.e-small .e-otpinput .e-otp-input-field[type=password] {
+  font-size: 18px;
+}
+.e-small.e-otpinput .e-otp-input-field.e-input.e-otp-input-focus:focus,
+.e-small .e-otpinput .e-otp-input-field.e-input.e-otp-input-focus:focus {
+  padding-bottom: 0;
+}
+.e-small.e-otpinput .e-otp-separator,
+.e-small .e-otpinput .e-otp-separator {
+  font-size: 12px;
+  line-height: 16px;
+}
+.e-small.e-otpinput.e-filled .e-otp-input-field,
+.e-small .e-otpinput.e-filled .e-otp-input-field {
+  padding: 0;
+}
+
+.e-bigger.e-otpinput,
+.e-bigger .e-otpinput {
+  gap: 16px;
+}
+.e-bigger.e-otpinput:has(.e-otp-separator):not(:empty),
+.e-bigger .e-otpinput:has(.e-otp-separator):not(:empty) {
+  gap: 8px;
+}
+.e-bigger.e-otpinput .e-otp-input-field,
+.e-bigger .e-otpinput .e-otp-input-field {
+  min-width: 38px;
+  min-height: 38px;
+  font-size: 16px;
+  line-height: 24px;
+  padding: 0;
+}
+.e-bigger.e-otpinput .e-otp-input-fieldinput[type=password], .e-bigger.e-otpinput .e-otp-input-field[type=password],
+.e-bigger .e-otpinput .e-otp-input-fieldinput[type=password],
+.e-bigger .e-otpinput .e-otp-input-field[type=password] {
+  font-size: 20px;
+}
+.e-bigger.e-otpinput .e-otp-input-field.e-input.e-otp-input-focus:focus,
+.e-bigger .e-otpinput .e-otp-input-field.e-input.e-otp-input-focus:focus {
+  padding-bottom: 0;
+}
+.e-bigger.e-otpinput .e-otp-separator,
+.e-bigger .e-otpinput .e-otp-separator {
+  font-size: 14px;
+  line-height: 22px;
+}
+.e-bigger.e-otpinput.e-filled .e-otp-input-field,
+.e-bigger .e-otpinput.e-filled .e-otp-input-field {
+  padding: 0;
+}
+
+.e-bigger.e-small.e-otpinput,
+.e-bigger.e-small .e-otpinput,
+.e-bigger .e-small.e-otpinput,
+.e-small .e-bigger.e-otpinput {
+  gap: 14px;
+}
+.e-bigger.e-small.e-otpinput:has(.e-otp-separator):not(:empty),
+.e-bigger.e-small .e-otpinput:has(.e-otp-separator):not(:empty),
+.e-bigger .e-small.e-otpinput:has(.e-otp-separator):not(:empty),
+.e-small .e-bigger.e-otpinput:has(.e-otp-separator):not(:empty) {
+  gap: 6px;
+}
+.e-bigger.e-small.e-otpinput .e-otp-input-field,
+.e-bigger.e-small .e-otpinput .e-otp-input-field,
+.e-bigger .e-small.e-otpinput .e-otp-input-field,
+.e-small .e-bigger.e-otpinput .e-otp-input-field {
+  min-width: 34px;
+  min-height: 34px;
+  font-size: 14px;
+  line-height: 22px;
+  padding: 0;
+}
+.e-bigger.e-small.e-otpinput .e-otp-input-fieldinput[type=password], .e-bigger.e-small.e-otpinput .e-otp-input-field[type=password],
+.e-bigger.e-small .e-otpinput .e-otp-input-fieldinput[type=password],
+.e-bigger.e-small .e-otpinput .e-otp-input-field[type=password],
+.e-bigger .e-small.e-otpinput .e-otp-input-fieldinput[type=password],
+.e-bigger .e-small.e-otpinput .e-otp-input-field[type=password],
+.e-small .e-bigger.e-otpinput .e-otp-input-fieldinput[type=password],
+.e-small .e-bigger.e-otpinput .e-otp-input-field[type=password] {
+  font-size: 20px;
+}
+.e-bigger.e-small.e-otpinput .e-otp-input-field.e-input.e-otp-input-focus:focus,
+.e-bigger.e-small .e-otpinput .e-otp-input-field.e-input.e-otp-input-focus:focus,
+.e-bigger .e-small.e-otpinput .e-otp-input-field.e-input.e-otp-input-focus:focus,
+.e-small .e-bigger.e-otpinput .e-otp-input-field.e-input.e-otp-input-focus:focus {
+  padding-bottom: 0;
+}
+.e-bigger.e-small.e-otpinput .e-otp-separator,
+.e-bigger.e-small .e-otpinput .e-otp-separator,
+.e-bigger .e-small.e-otpinput .e-otp-separator,
+.e-small .e-bigger.e-otpinput .e-otp-separator {
+  font-size: 14px;
+  line-height: 22px;
+}
+.e-bigger.e-small.e-otpinput.e-filled .e-otp-input-field,
+.e-bigger.e-small .e-otpinput.e-filled .e-otp-input-field,
+.e-bigger .e-small.e-otpinput.e-filled .e-otp-input-field,
+.e-small .e-bigger.e-otpinput.e-filled .e-otp-input-field {
+  padding: 0;
+}
+
+.e-otpinput .e-otp-input-field {
+  color: #111827;
+  background: #fff;
+}
+.e-otpinput .e-otp-separator {
+  color: #d1d5db;
+}
+.e-otpinput.e-outline .e-otp-input-field {
+  border: 2px solid #d1d5db;
+}
+.e-otpinput.e-outline .e-otp-input-field, .e-otpinput.e-underlined .e-otp-input-field, .e-otpinput.e-filled .e-otp-input-field {
+  border-bottom: 2px solid #d1d5db;
+}
+.e-otpinput.e-outline .e-otp-input-field:disabled, .e-otpinput.e-underlined .e-otp-input-field:disabled, .e-otpinput.e-filled .e-otp-input-field:disabled {
+  border-color: #f3f4f6;
+  color: #9ca3af;
+}
+.e-otpinput.e-filled .e-otp-input-field {
+  background: #f3f4f6;
+}
+.e-otpinput.e-underlined .e-otp-input-field {
+  background: transparent;
+}
+.e-otpinput.e-error.e-outline .e-otp-input-field,
+.e-otpinput.e-error.e-outline .e-otp-input-field.e-otp-input-focus, .e-otpinput.e-error.e-underlined .e-otp-input-field,
+.e-otpinput.e-error.e-underlined .e-otp-input-field.e-otp-input-focus, .e-otpinput.e-error.e-filled .e-otp-input-field,
+.e-otpinput.e-error.e-filled .e-otp-input-field.e-otp-input-focus {
+  border-color: #dc2626;
+}
+.e-otpinput.e-success.e-outline .e-otp-input-field,
+.e-otpinput.e-success.e-outline .e-otp-input-field.e-otp-input-focus, .e-otpinput.e-success.e-underlined .e-otp-input-field,
+.e-otpinput.e-success.e-underlined .e-otp-input-field.e-otp-input-focus, .e-otpinput.e-success.e-filled .e-otp-input-field,
+.e-otpinput.e-success.e-filled .e-otp-input-field.e-otp-input-focus {
+  border-color: #15803d;
+}
+.e-otpinput.e-warning.e-outline .e-otp-input-field,
+.e-otpinput.e-warning.e-outline .e-otp-input-field.e-otp-input-focus, .e-otpinput.e-warning.e-underlined .e-otp-input-field,
+.e-otpinput.e-warning.e-underlined .e-otp-input-field.e-otp-input-focus, .e-otpinput.e-warning.e-filled .e-otp-input-field,
+.e-otpinput.e-warning.e-filled .e-otp-input-field.e-otp-input-focus {
+  border-color: #c2410c;
+}

package/styles/otp-input/tailwind.scss

@@ -0,0 +1,3 @@
+@import 'ej2-base/styles/definition/tailwind.scss';
+@import 'tailwind-definition.scss';
+@import 'all.scss';

package/styles/rating/_bds-definition.scss

@@ -11,6 +11,7 @@ $rating-label-font-size: $text-xs !default;
 $rating-label-line-height: 18px !default;
 $rating-reset-font-size : $font-icon-16 !default;
 $rating-tooltip-tip-bottom-height: 8px !default;
+$rating-border-width: 1px !default;
 
 $rating-small-li-font-size: $font-icon-16 !default;
 $rating-small-li-line-height: 10px !default;
@@ -33,10 +34,9 @@ $rating-bigger-small-label-font-size: $text-xs !default;
 $rating-bigger-small-label-line-height: 18px !default;
 $rating-bigger-small-reset-font-size : $font-icon-18 !default;
 
-$rating-border-width: 1px !default;
-
 $rating-selected-bg-color: $rating-selected-color !default;
 $rating-unrated-bg-color: $rating-unrated-color !default;
+$rating-unrated-icon-bg-color: none !default;
 $rating-hover-bg-color: $rating-selected-hover-color !default;
 $rating-pressed-bg-color: $rating-pressed-color !default;
 $rating-selected-disabled-bg-color: $rating-selected-disabled-color !default;

package/styles/rating/_bootstrap-dark-definition.scss

@@ -11,6 +11,7 @@ $rating-label-font-size: 12px !default;
 $rating-label-line-height: 18px !default;
 $rating-reset-font-size : 16px !default;
 $rating-tooltip-tip-bottom-height: 8px !default;
+$rating-border-width: 1px !default;
 
 $rating-small-li-font-size: 16px !default;
 $rating-small-li-line-height: 4px !default;
@@ -33,10 +34,9 @@ $rating-bigger-small-label-font-size: 12px !default;
 $rating-bigger-small-label-line-height: 18px !default;
 $rating-bigger-small-reset-font-size : 22px !default;
 
-$rating-border-width: 1px !default;
-
 $rating-selected-bg-color: $grey-cc !default;
 $rating-unrated-bg-color: $grey-ad !default;
+$rating-unrated-icon-bg-color: none !default;
 $rating-hover-bg-color: $brand-primary-lighten-20 !default;
 $rating-pressed-bg-color: $brand-primary-lighten-20 !default;
 $rating-selected-disabled-bg-color: $grey-99 !default;

package/styles/rating/_bootstrap-definition.scss

@@ -11,6 +11,7 @@ $rating-label-font-size: 12px !default;
 $rating-label-line-height: 18px !default;
 $rating-reset-font-size : 16px !default;
 $rating-tooltip-tip-bottom-height: 8px !default;
+$rating-border-width: 1px !default;
 
 $rating-small-li-font-size: 16px !default;
 $rating-small-li-line-height: 4px !default;
@@ -33,10 +34,9 @@ $rating-bigger-small-label-font-size: 12px !default;
 $rating-bigger-small-label-line-height: 18px !default;
 $rating-bigger-small-reset-font-size : 24px !default;
 
-$rating-border-width: 1px !default;
-
 $rating-selected-bg-color: $grey-44 !default;
 $rating-unrated-bg-color: $grey-ad !default;
+$rating-unrated-icon-bg-color: none !default;
 $rating-hover-bg-color: $brand-primary-darken-10 !default;
 $rating-pressed-bg-color: $brand-primary !default;
 $rating-selected-disabled-bg-color: $grey-99 !default;

package/styles/rating/_bootstrap4-definition.scss

@@ -11,6 +11,7 @@ $rating-label-font-size: 12px !default;
 $rating-label-line-height: 18px !default;
 $rating-reset-font-size : 16px !default;
 $rating-tooltip-tip-bottom-height: 8px !default;
+$rating-border-width: 1px !default;
 
 $rating-small-li-font-size: 16px !default;
 $rating-small-li-line-height: 4px !default;
@@ -33,10 +34,9 @@ $rating-bigger-small-label-font-size: 12px !default;
 $rating-bigger-small-label-line-height: 18px !default;
 $rating-bigger-small-reset-font-size : 20px !default;
 
-$rating-border-width: 1px !default;
-
 $rating-selected-bg-color: $gray-700 !default;
 $rating-unrated-bg-color: $gray-600 !default;
+$rating-unrated-icon-bg-color: none !default;
 $rating-hover-bg-color: $primary !default;
 $rating-pressed-bg-color: $gray-300 !default;
 $rating-selected-disabled-bg-color: $gray-800 !default;

package/styles/rating/_bootstrap5-definition.scss

@@ -11,6 +11,7 @@ $rating-label-font-size: $text-xs !default;
 $rating-label-line-height: 18px !default;
 $rating-reset-font-size : $font-icon-18 !default;
 $rating-tooltip-tip-bottom-height: 8px !default;
+$rating-border-width: 1px !default;
 
 $rating-small-li-font-size: $font-icon-16 !default;
 $rating-small-li-line-height: 6px !default;
@@ -33,10 +34,9 @@ $rating-bigger-small-label-font-size: $text-xs !default;
 $rating-bigger-small-label-line-height: 18px !default;
 $rating-bigger-small-reset-font-size : $font-icon-22 !default;
 
-$rating-border-width: 1px !default;
-
 $rating-selected-bg-color: $rating-selected-color !default;
 $rating-unrated-bg-color: $rating-unrated-color !default;
+$rating-unrated-icon-bg-color: none !default;
 $rating-hover-bg-color: $rating-selected-hover-color !default;
 $rating-pressed-bg-color: $rating-pressed-color !default;
 $rating-selected-disabled-bg-color: $rating-selected-disabled-color !default;

package/styles/rating/_bootstrap5.3-definition.scss

@@ -0,0 +1,47 @@
+$rating-li-font-size: $font-icon-22 !default;
+$rating-li-padding: 4px !default;
+$rating-li-line-height: 13px !default;
+$rating-li-min-width-height: 30px !default;
+$rating-focus-border-radius: 4px !default;
+$rating-label-bottom-margin: 4px !default;
+$rating-label-right-margin: 8px !default;
+$rating-label-top-margin: 8px !default;
+$rating-label-left-margin: 11px !default;
+$rating-label-font-size: $text-xs !default;
+$rating-label-line-height: 18px !default;
+$rating-reset-font-size : $font-icon-18 !default;
+$rating-tooltip-tip-bottom-height: 8px !default;
+$rating-border-width: 1px !default;
+
+$rating-small-li-font-size: $font-icon-16 !default;
+$rating-small-li-line-height: 6px !default;
+$rating-small-li-min-width-height: 24px !default;
+$rating-small-label-font-size: $text-xxs !default;
+$rating-small-label-line-height: 16px !default;
+$rating-small-reset-font-size : $font-icon-12 !default;
+
+$rating-bigger-li-font-size: $font-icon-32 !default;
+$rating-bigger-li-line-height: 13px !default;
+$rating-bigger-li-min-width-height: 40px !default;
+$rating-bigger-label-font-size: $text-sm !default;
+$rating-bigger-label-line-height: 22px !default;
+$rating-bigger-reset-font-size : $font-icon-28 !default;
+
+$rating-bigger-small-li-font-size: $font-icon-26 !default;
+$rating-bigger-small-li-line-height: 13px !default;
+$rating-bigger-small-li-min-width-height: 34px !default;
+$rating-bigger-small-label-font-size: $text-xs !default;
+$rating-bigger-small-label-line-height: 18px !default;
+$rating-bigger-small-reset-font-size : $font-icon-22 !default;
+
+$rating-selected-bg-color: $rating-selected-color !default;
+$rating-unrated-bg-color: $rating-unrated-color !default;
+$rating-unrated-icon-bg-color: none !default;
+$rating-hover-bg-color: $rating-selected-hover-color !default;
+$rating-pressed-bg-color: $rating-pressed-color !default;
+$rating-selected-disabled-bg-color: $rating-selected-disabled-color !default;
+$rating-unrated-disabled-bg-color: $rating-unrated-disabled-color !default;
+$rating-li-focus: $rating-selected-color !default;
+$rating-reset-icon-color: $rating-unrated-bg-color !default;
+$rating-reset-hover-icon-color: $rating-selected-hover-color !default;
+$rating-reset-disabled-icon-color: $rating-selected-disabled-color !default;

package/styles/rating/_fabric-dark-definition.scss

@@ -11,6 +11,7 @@ $rating-label-font-size: 12px !default;
 $rating-label-line-height: 18px !default;
 $rating-reset-font-size : 16px !default;
 $rating-tooltip-tip-bottom-height: 8px !default;
+$rating-border-width: 1px !default;
 
 $rating-small-li-font-size: 16px !default;
 $rating-small-li-line-height: 10px !default;
@@ -33,10 +34,9 @@ $rating-bigger-small-label-font-size: 12px !default;
 $rating-bigger-small-label-line-height: 18px !default;
 $rating-bigger-small-reset-font-size : 20px !default;
 
-$rating-border-width: 1px !default;
-
 $rating-selected-bg-color: $neutral-primary !default;
 $rating-unrated-bg-color: $neutral-tertiary !default;
+$rating-unrated-icon-bg-color: none !default;
 $rating-hover-bg-color: $theme-primary !default;
 $rating-pressed-bg-color: $theme-dark !default;
 $rating-selected-disabled-bg-color: $neutral-quintenary !default;

package/styles/rating/_fabric-definition.scss

@@ -11,6 +11,7 @@ $rating-label-font-size: 12px !default;
 $rating-label-line-height: 18px !default;
 $rating-reset-font-size : 16px !default;
 $rating-tooltip-tip-bottom-height: 8px !default;
+$rating-border-width: 1px !default;
 
 $rating-small-li-font-size: 16px !default;
 $rating-small-li-line-height: 13px !default;
@@ -33,10 +34,9 @@ $rating-bigger-small-label-font-size: 12px !default;
 $rating-bigger-small-label-line-height: 18px !default;
 $rating-bigger-small-reset-font-size : 20px !default;
 
-$rating-border-width: 1px !default;
-
 $rating-selected-bg-color: $neutral-primary !default;
 $rating-unrated-bg-color: $neutral-secondary !default;
+$rating-unrated-icon-bg-color: none !default;
 $rating-hover-bg-color: $theme-secondary !default;
 $rating-pressed-bg-color: $theme-dark !default;
 $rating-selected-disabled-bg-color: $neutral-quintenary !default;

package/styles/rating/_fluent-definition.scss

@@ -11,6 +11,7 @@ $rating-label-font-size: $text-xs !default;
 $rating-label-line-height: 18px !default;
 $rating-reset-font-size : $font-icon-16 !default;
 $rating-tooltip-tip-bottom-height: 12.5px !default;
+$rating-border-width: 1px !default;
 
 $rating-small-li-font-size: $font-icon-16 !default;
 $rating-small-li-line-height: 13px !default;
@@ -33,10 +34,9 @@ $rating-bigger-small-label-font-size: $text-xs !default;
 $rating-bigger-small-label-line-height: 18px !default;
 $rating-bigger-small-reset-font-size : $font-icon-20 !default;
 
-$rating-border-width: 1px !default;
-
 $rating-selected-bg-color: $rating-selected-color !default;
 $rating-unrated-bg-color: $rating-unrated-color !default;
+$rating-unrated-icon-bg-color: none !default;
 $rating-hover-bg-color: $rating-selected-hover-color !default;
 $rating-pressed-bg-color: $rating-pressed-color !default;
 $rating-selected-disabled-bg-color: $rating-selected-disabled-color !default;

package/styles/rating/_fluent2-definition.scss

@@ -0,0 +1,47 @@
+$rating-li-font-size: $font-icon-20 !default;
+$rating-li-padding: 4px !default;
+$rating-li-line-height: 13px !default;
+$rating-li-min-width-height: 28px !default;
+$rating-focus-border-radius: 0 !default;
+$rating-label-bottom-margin: 4px !default;
+$rating-label-right-margin: 4px !default;
+$rating-label-top-margin: 4px !default;
+$rating-label-left-margin: 4px !default;
+$rating-label-font-size: $text-xs !default;
+$rating-label-line-height: 16px !default;
+$rating-reset-font-size : $font-icon-16 !default;
+$rating-tooltip-tip-bottom-height: 8px !default;
+$rating-border-width: 1px !default;
+
+$rating-small-li-font-size: $font-icon-16 !default;
+$rating-small-li-line-height: 13px !default;
+$rating-small-li-min-width-height: 24px !default;
+$rating-small-label-font-size: $text-xxs !default;
+$rating-small-label-line-height: 14px !default;
+$rating-small-reset-font-size : $font-icon-16 !default;
+
+$rating-bigger-li-font-size: $font-icon-28 !default;
+$rating-bigger-li-line-height: 21px !default;
+$rating-bigger-li-min-width-height: 32px !default;
+$rating-bigger-label-font-size: $text-sm !default;
+$rating-bigger-label-line-height: 20px !default;
+$rating-bigger-reset-font-size : $font-icon-18 !default;
+
+$rating-bigger-small-li-font-size: $font-icon-24 !default;
+$rating-bigger-small-li-line-height: 19px !default;
+$rating-bigger-small-li-min-width-height: 30px !default;
+$rating-bigger-small-label-font-size: $text-xs !default;
+$rating-bigger-small-label-line-height: 16px !default;
+$rating-bigger-small-reset-font-size : $font-icon-18 !default;
+
+$rating-selected-bg-color: $rating-selected-color !default;
+$rating-unrated-bg-color: $rating-unrated-color !default;
+$rating-unrated-icon-bg-color: none !default;
+$rating-hover-bg-color: $rating-selected-hover-color !default;
+$rating-pressed-bg-color: $rating-selected-bg-color !default;
+$rating-selected-disabled-bg-color: $rating-selected-disabled-color !default;
+$rating-unrated-disabled-bg-color: $rating-unrated-disabled-color !default;
+$rating-li-focus: $content-text-color !default;
+$rating-reset-icon-color: $icon-color !default;
+$rating-reset-hover-icon-color: $icon-color-hover !default;
+$rating-reset-disabled-icon-color: $icon-color-disabled !default;

package/styles/rating/_fusionnew-definition.scss

@@ -11,6 +11,7 @@ $rating-label-font-size: 12px !default;
 $rating-label-line-height: 18px !default;
 $rating-reset-font-size : 18px !default;
 $rating-tooltip-tip-bottom-height: 8px !default;
+$rating-border-width: 1px !default;
 
 $rating-small-li-font-size: 16px !default;
 $rating-small-li-line-height: 6px !default;
@@ -33,10 +34,9 @@ $rating-bigger-small-label-font-size: 12px !default;
 $rating-bigger-small-label-line-height: 18px !default;
 $rating-bigger-small-reset-font-size : 22px !default;
 
-$rating-border-width: 1px !default;
-
 $rating-selected-bg-color: $rating-selected-color !default;
 $rating-unrated-bg-color: $rating-unrated-color !default;
+$rating-unrated-icon-bg-color: none !default;
 $rating-hover-bg-color: $rating-selected-hover-color !default;
 $rating-pressed-bg-color: $rating-pressed-color !default;
 $rating-selected-disabled-bg-color: $rating-selected-disabled-color !default;

package/styles/rating/_highcontrast-definition.scss

@@ -11,6 +11,7 @@ $rating-label-font-size: 12px !default;
 $rating-label-line-height: 18px !default;
 $rating-reset-font-size : 16px !default;
 $rating-tooltip-tip-bottom-height: 8px !default;
+$rating-border-width: 1px !default;
 
 $rating-small-li-font-size: 16px !default;
 $rating-small-li-line-height: 13px !default;
@@ -33,10 +34,9 @@ $rating-bigger-small-label-font-size: 12px !default;
 $rating-bigger-small-label-line-height: 18px !default;
 $rating-bigger-small-reset-font-size : 20px !default;
 
-$rating-border-width: 1px !default;
-
 $rating-selected-bg-color: $content-font !default;
 $rating-unrated-bg-color: $content-font !default;
+$rating-unrated-icon-bg-color: none !default;
 $rating-hover-bg-color: $selection-bg !default;
 $rating-pressed-bg-color: $selection-border !default;
 $rating-selected-disabled-bg-color: $disable !default;

package/styles/rating/_highcontrast-light-definition.scss

@@ -11,6 +11,7 @@ $rating-label-font-size: 12px !default;
 $rating-label-line-height: 18px !default;
 $rating-reset-font-size : 16px !default;
 $rating-tooltip-tip-bottom-height: 8px !default;
+$rating-border-width: 1px !default;
 
 $rating-small-li-font-size: 16px !default;
 $rating-small-li-line-height: 13px !default;
@@ -33,10 +34,9 @@ $rating-bigger-small-label-font-size: 12px !default;
 $rating-bigger-small-label-line-height: 18px !default;
 $rating-bigger-small-reset-font-size : 20px !default;
 
-$rating-border-width: 1px !default;
-
 $rating-selected-bg-color: $content-font !default;
 $rating-unrated-bg-color: $content-font !default;
+$rating-unrated-icon-bg-color: none !default;
 $rating-hover-bg-color: $selection-bg !default;
 $rating-pressed-bg-color: $selection-border !default;
 $rating-selected-disabled-bg-color: $disable !default;

package/styles/rating/_layout.scss

@@ -1,3 +1,21 @@
+@mixin rating-container-properties($svg-font-size, $svg-line-height, $label-font-size, $label-line-height, $reset-icon-font-size) {
+  .e-rating-item-container {
+    &:has(svg) {
+      line-height: $svg-line-height;
+    }
+    font-size: $svg-font-size;
+  }
+
+  .e-rating-label {
+    font-size: $label-font-size;
+    line-height: $label-line-height;
+  }
+
+  .e-reset {
+    font-size: $reset-icon-font-size;
+  }
+}
+
 @include export-module('rating-layout') {
   .e-rating-container {
     display: inline-flex;
@@ -76,7 +94,7 @@
         cursor: default;
       }
 
-      &:focus-visible{
+      &:focus-visible {
         outline: 1px solid;
         border-radius: $rating-focus-border-radius;
       }
@@ -162,60 +180,18 @@
 
   .e-small.e-rating-container,
   .e-small .e-rating-container {
-    .e-rating-item-container {
-      &:has(svg) {
-        line-height: $rating-small-li-line-height;
-      }
-      font-size: $rating-small-li-font-size;
-    }
-
-    .e-rating-label {
-      font-size: $rating-small-label-font-size;
-      line-height: $rating-small-label-line-height;
-    }
-
-    .e-reset {
-      font-size: $rating-small-reset-font-size;
-    }
+    @include rating-container-properties($rating-small-li-font-size, $rating-small-li-line-height, $rating-small-label-font-size, $rating-small-label-line-height, $rating-small-reset-font-size);
   }
 
   .e-bigger.e-rating-container,
   .e-bigger .e-rating-container {
-    .e-rating-item-container {
-      &:has(svg) {
-        line-height: $rating-bigger-li-line-height;
-      }
-      font-size: $rating-bigger-li-font-size;
-    }
-
-    .e-rating-label {
-      font-size: $rating-bigger-label-font-size;
-      line-height: $rating-bigger-label-line-height;
-    }
-
-    .e-reset {
-      font-size: $rating-bigger-reset-font-size;
-    }
+    @include rating-container-properties($rating-bigger-li-font-size, $rating-bigger-li-line-height, $rating-bigger-label-font-size, $rating-bigger-label-line-height, $rating-bigger-reset-font-size);
   }
 
   .e-bigger.e-small.e-rating-container,
   .e-bigger.e-small .e-rating-container,
   .e-bigger .e-small.e-rating-container,
   .e-small .e-bigger.e-rating-container {
-    .e-rating-item-container {
-      &:has(svg) {
-        line-height: $rating-bigger-small-li-line-height;
-      }
-      font-size: $rating-bigger-small-li-font-size;
-    }
-
-    .e-rating-label {
-      font-size: $rating-bigger-small-label-font-size;
-      line-height: $rating-bigger-small-label-line-height;
-    }
-
-    .e-reset {
-      font-size: $rating-bigger-small-reset-font-size;
-    }
+    @include rating-container-properties($rating-bigger-small-li-font-size, $rating-bigger-small-li-line-height, $rating-bigger-small-label-font-size, $rating-bigger-small-label-line-height, $rating-bigger-small-reset-font-size);
   }
 }

package/styles/rating/_material-dark-definition.scss

@@ -11,6 +11,7 @@ $rating-label-font-size: 12px !default;
 $rating-label-line-height: 18px !default;
 $rating-reset-font-size : 16px !default;
 $rating-tooltip-tip-bottom-height: 8px !default;
+$rating-border-width: 1px !default;
 
 $rating-small-li-font-size: 16px !default;
 $rating-small-li-line-height: 9px !default;
@@ -33,10 +34,9 @@ $rating-bigger-small-label-font-size: 12px !default;
 $rating-bigger-small-label-line-height: 18px !default;
 $rating-bigger-small-reset-font-size : 20px !default;
 
-$rating-border-width: 1px !default;
-
 $rating-selected-bg-color: $grey-300 !default;
 $rating-unrated-bg-color: $grey-500 !default;
+$rating-unrated-icon-bg-color: none !default;
 $rating-hover-bg-color: $primary !default;
 $rating-pressed-bg-color: $primary-300 !default;
 $rating-selected-disabled-bg-color: $grey-600 !default;