@syncfusion/blazor-themes 23.2.7 → 24.1.41

package/SCSS-Themes/inputs/rating/highcontrast.scss

@@ -1,5 +1,6 @@
 $rating-li-font-size: 20px !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: 9px !default;
@@ -12,18 +13,21 @@ $rating-reset-font-size : 16px !default;
 $rating-tooltip-tip-bottom-height: 8px !default;
 
 $rating-small-li-font-size: 16px !default;
+$rating-small-li-line-height: 13px !default;
 $rating-small-li-min-width-height: 24px !default;
 $rating-small-label-font-size: 10px !default;
 $rating-small-label-line-height: 16px !default;
 $rating-small-reset-font-size : 12px !default;
 
 $rating-bigger-li-font-size: 28px !default;
+$rating-bigger-li-line-height: 21px !default;
 $rating-bigger-li-min-width-height: 36px !default;
 $rating-bigger-label-font-size: 14px !default;
 $rating-bigger-label-line-height: 22px !default;
 $rating-bigger-reset-font-size : 24px !default;
 
 $rating-bigger-small-li-font-size: 24px !default;
+$rating-bigger-small-li-line-height: 19px !default;
 $rating-bigger-small-li-min-width-height: 32px !default;
 $rating-bigger-small-label-font-size: 12px !default;
 $rating-bigger-small-label-line-height: 18px !default;
@@ -60,7 +64,10 @@ $rating-reset-disabled-icon-color: $disable !default;
       margin: 4px;
 
       &:focus-visible:not(:hover) .e-rating-focus {
-        outline: 1px solid;
+        &:not(:has(svg)),
+        .e-rating-item:has(svg) {
+          outline: 1px solid;
+        }
       }
 
       &:focus-visible {
@@ -74,6 +81,9 @@ $rating-reset-disabled-icon-color: $disable !default;
     }
 
     .e-rating-item-container {
+      &:has(svg) {
+        line-height: $rating-li-line-height;
+      }
       cursor: pointer;
       font-size: $rating-li-font-size;
       padding: $rating-li-padding;
@@ -88,12 +98,11 @@ $rating-reset-disabled-icon-color: $disable !default;
       }
     }
 
-    &.e-rating-animation:not(.e-disabled) {
-      .e-rating-item-container:hover .e-rating-item {
-        transition: transform 150ms cubic-bezier(.4, 0, .2, 1) 0ms;
-        transform: scale(1.4);
-        pointer-events: none;
-      }
+    &.e-rating-animation.e-touch-select:not(.e-disabled) .e-rating-item-container.e-rating-focus .e-rating-item,
+    &.e-rating-animation:not(.e-disabled, .e-rating-touch) .e-rating-item-container:hover .e-rating-item {
+      transition: transform 150ms cubic-bezier(.4, 0, .2, 1) 0ms;
+      transform: scale(1.4);
+      pointer-events: none;
     }
 
     &.e-disabled {
@@ -202,6 +211,9 @@ $rating-reset-disabled-icon-color: $disable !default;
   .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;
     }
 
@@ -218,6 +230,9 @@ $rating-reset-disabled-icon-color: $disable !default;
   .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;
     }
 
@@ -236,6 +251,9 @@ $rating-reset-disabled-icon-color: $disable !default;
   .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;
     }
 
@@ -255,8 +273,11 @@ $rating-reset-disabled-icon-color: $disable !default;
   .e-rating-container {
     .e-rating-item-list {
       &:focus-visible:not(:hover) .e-rating-focus {
-        outline-color: $rating-li-focus;
-        border-radius: $rating-focus-border-radius;
+        &:not(:has(svg)),
+        .e-rating-item:has(svg) {
+          outline-color: $rating-li-focus;
+          border-radius: $rating-focus-border-radius;
+        }
       }
     }
 

package/SCSS-Themes/inputs/rating/material-dark.scss

@@ -1,5 +1,6 @@
 $rating-li-font-size: 20px !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;
@@ -12,18 +13,21 @@ $rating-reset-font-size : 16px !default;
 $rating-tooltip-tip-bottom-height: 8px !default;
 
 $rating-small-li-font-size: 16px !default;
+$rating-small-li-line-height: 9px !default;
 $rating-small-li-min-width-height: 24px !default;
 $rating-small-label-font-size: 10px !default;
 $rating-small-label-line-height: 16px !default;
 $rating-small-reset-font-size : 12px !default;
 
 $rating-bigger-li-font-size: 32px !default;
+$rating-bigger-li-line-height: 21px !default;
 $rating-bigger-li-min-width-height: 40px !default;
 $rating-bigger-label-font-size: 14px !default;
 $rating-bigger-label-line-height: 22px !default;
 $rating-bigger-reset-font-size : 28px !default;
 
 $rating-bigger-small-li-font-size: 24px !default;
+$rating-bigger-small-li-line-height: 17px !default;
 $rating-bigger-small-li-min-width-height: 32px !default;
 $rating-bigger-small-label-font-size: 12px !default;
 $rating-bigger-small-label-line-height: 18px !default;
@@ -60,7 +64,10 @@ $rating-reset-disabled-icon-color: $grey-600 !default;
       margin: 4px;
 
       &:focus-visible:not(:hover) .e-rating-focus {
-        outline: 1px solid;
+        &:not(:has(svg)),
+        .e-rating-item:has(svg) {
+          outline: 1px solid;
+        }
       }
 
       &:focus-visible {
@@ -74,6 +81,9 @@ $rating-reset-disabled-icon-color: $grey-600 !default;
     }
 
     .e-rating-item-container {
+      &:has(svg) {
+        line-height: $rating-li-line-height;
+      }
       cursor: pointer;
       font-size: $rating-li-font-size;
       padding: $rating-li-padding;
@@ -88,12 +98,11 @@ $rating-reset-disabled-icon-color: $grey-600 !default;
       }
     }
 
-    &.e-rating-animation:not(.e-disabled) {
-      .e-rating-item-container:hover .e-rating-item {
-        transition: transform 150ms cubic-bezier(.4, 0, .2, 1) 0ms;
-        transform: scale(1.4);
-        pointer-events: none;
-      }
+    &.e-rating-animation.e-touch-select:not(.e-disabled) .e-rating-item-container.e-rating-focus .e-rating-item,
+    &.e-rating-animation:not(.e-disabled, .e-rating-touch) .e-rating-item-container:hover .e-rating-item {
+      transition: transform 150ms cubic-bezier(.4, 0, .2, 1) 0ms;
+      transform: scale(1.4);
+      pointer-events: none;
     }
 
     &.e-disabled {
@@ -202,6 +211,9 @@ $rating-reset-disabled-icon-color: $grey-600 !default;
   .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;
     }
 
@@ -218,6 +230,9 @@ $rating-reset-disabled-icon-color: $grey-600 !default;
   .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;
     }
 
@@ -236,6 +251,9 @@ $rating-reset-disabled-icon-color: $grey-600 !default;
   .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;
     }
 
@@ -255,8 +273,11 @@ $rating-reset-disabled-icon-color: $grey-600 !default;
   .e-rating-container {
     .e-rating-item-list {
       &:focus-visible:not(:hover) .e-rating-focus {
-        outline-color: $rating-li-focus;
-        border-radius: $rating-focus-border-radius;
+        &:not(:has(svg)),
+        .e-rating-item:has(svg) {
+          outline-color: $rating-li-focus;
+          border-radius: $rating-focus-border-radius;
+        }
       }
     }
 

package/SCSS-Themes/inputs/rating/material.scss

@@ -1,5 +1,6 @@
 $rating-li-font-size: 20px !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;
@@ -12,18 +13,21 @@ $rating-reset-font-size : 16px !default;
 $rating-tooltip-tip-bottom-height: 8px !default;
 
 $rating-small-li-font-size: 16px !default;
+$rating-small-li-line-height: 9px !default;
 $rating-small-li-min-width-height: 24px !default;
 $rating-small-label-font-size: 10px !default;
 $rating-small-label-line-height: 16px !default;
 $rating-small-reset-font-size : 12px !default;
 
 $rating-bigger-li-font-size: 32px !default;
+$rating-bigger-li-line-height: 21px !default;
 $rating-bigger-li-min-width-height: 40px !default;
 $rating-bigger-label-font-size: 14px !default;
 $rating-bigger-label-line-height: 22px !default;
 $rating-bigger-reset-font-size : 28px !default;
 
 $rating-bigger-small-li-font-size: 24px !default;
+$rating-bigger-small-li-line-height: 17px !default;
 $rating-bigger-small-li-min-width-height: 32px !default;
 $rating-bigger-small-label-font-size: 12px !default;
 $rating-bigger-small-label-line-height: 18px !default;
@@ -60,7 +64,10 @@ $rating-reset-disabled-icon-color: $grey-500 !default;
       margin: 4px;
 
       &:focus-visible:not(:hover) .e-rating-focus {
-        outline: 1px solid;
+        &:not(:has(svg)),
+        .e-rating-item:has(svg) {
+          outline: 1px solid;
+        }
       }
 
       &:focus-visible {
@@ -74,6 +81,9 @@ $rating-reset-disabled-icon-color: $grey-500 !default;
     }
 
     .e-rating-item-container {
+      &:has(svg) {
+        line-height: $rating-li-line-height;
+      }
       cursor: pointer;
       font-size: $rating-li-font-size;
       padding: $rating-li-padding;
@@ -88,12 +98,11 @@ $rating-reset-disabled-icon-color: $grey-500 !default;
       }
     }
 
-    &.e-rating-animation:not(.e-disabled) {
-      .e-rating-item-container:hover .e-rating-item {
-        transition: transform 150ms cubic-bezier(.4, 0, .2, 1) 0ms;
-        transform: scale(1.4);
-        pointer-events: none;
-      }
+    &.e-rating-animation.e-touch-select:not(.e-disabled) .e-rating-item-container.e-rating-focus .e-rating-item,
+    &.e-rating-animation:not(.e-disabled, .e-rating-touch) .e-rating-item-container:hover .e-rating-item {
+      transition: transform 150ms cubic-bezier(.4, 0, .2, 1) 0ms;
+      transform: scale(1.4);
+      pointer-events: none;
     }
 
     &.e-disabled {
@@ -202,6 +211,9 @@ $rating-reset-disabled-icon-color: $grey-500 !default;
   .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;
     }
 
@@ -218,6 +230,9 @@ $rating-reset-disabled-icon-color: $grey-500 !default;
   .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;
     }
 
@@ -236,6 +251,9 @@ $rating-reset-disabled-icon-color: $grey-500 !default;
   .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;
     }
 
@@ -255,8 +273,11 @@ $rating-reset-disabled-icon-color: $grey-500 !default;
   .e-rating-container {
     .e-rating-item-list {
       &:focus-visible:not(:hover) .e-rating-focus {
-        outline-color: $rating-li-focus;
-        border-radius: $rating-focus-border-radius;
+        &:not(:has(svg)),
+        .e-rating-item:has(svg) {
+          outline-color: $rating-li-focus;
+          border-radius: $rating-focus-border-radius;
+        }
       }
     }
 

package/SCSS-Themes/inputs/rating/material3-dark.scss

@@ -1,5 +1,6 @@
 $rating-li-font-size: 20px !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: 8px !default;
@@ -12,18 +13,21 @@ $rating-reset-font-size : 16px !default;
 $rating-tooltip-tip-bottom-height: 8px !default;
 
 $rating-small-li-font-size: 16px !default;
+$rating-small-li-line-height: 9px !default;
 $rating-small-li-min-width-height: 24px !default;
 $rating-small-label-font-size: 10px !default;
 $rating-small-label-line-height: 16px !default;
 $rating-small-reset-font-size : 12px !default;
 
 $rating-bigger-li-font-size: 28px !default;
+$rating-bigger-li-line-height: 21px !default;
 $rating-bigger-li-min-width-height: 36px !default;
 $rating-bigger-label-font-size: 14px !default;
 $rating-bigger-label-line-height: 22px !default;
 $rating-bigger-reset-font-size : 24px !default;
 
 $rating-bigger-small-li-font-size: 24px !default;
+$rating-bigger-small-li-line-height: 17px !default;
 $rating-bigger-small-li-min-width-height: 32px !default;
 $rating-bigger-small-label-font-size: 12px !default;
 $rating-bigger-small-label-line-height: 18px !default;
@@ -60,7 +64,10 @@ $rating-reset-disabled-icon-color: $icon-color-disabled !default;
       margin: 4px;
 
       &:focus-visible:not(:hover) .e-rating-focus {
-        outline: 1px solid;
+        &:not(:has(svg)),
+        .e-rating-item:has(svg) {
+          outline: 1px solid;
+        }
       }
 
       &:focus-visible {
@@ -74,6 +81,9 @@ $rating-reset-disabled-icon-color: $icon-color-disabled !default;
     }
 
     .e-rating-item-container {
+      &:has(svg) {
+        line-height: $rating-li-line-height;
+      }
       cursor: pointer;
       font-size: $rating-li-font-size;
       padding: $rating-li-padding;
@@ -88,12 +98,11 @@ $rating-reset-disabled-icon-color: $icon-color-disabled !default;
       }
     }
 
-    &.e-rating-animation:not(.e-disabled) {
-      .e-rating-item-container:hover .e-rating-item {
-        transition: transform 150ms cubic-bezier(.4, 0, .2, 1) 0ms;
-        transform: scale(1.4);
-        pointer-events: none;
-      }
+    &.e-rating-animation.e-touch-select:not(.e-disabled) .e-rating-item-container.e-rating-focus .e-rating-item,
+    &.e-rating-animation:not(.e-disabled, .e-rating-touch) .e-rating-item-container:hover .e-rating-item {
+      transition: transform 150ms cubic-bezier(.4, 0, .2, 1) 0ms;
+      transform: scale(1.4);
+      pointer-events: none;
     }
 
     &.e-disabled {
@@ -202,6 +211,9 @@ $rating-reset-disabled-icon-color: $icon-color-disabled !default;
   .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;
     }
 
@@ -218,6 +230,9 @@ $rating-reset-disabled-icon-color: $icon-color-disabled !default;
   .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;
     }
 
@@ -236,6 +251,9 @@ $rating-reset-disabled-icon-color: $icon-color-disabled !default;
   .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;
     }
 
@@ -255,8 +273,11 @@ $rating-reset-disabled-icon-color: $icon-color-disabled !default;
   .e-rating-container {
     .e-rating-item-list {
       &:focus-visible:not(:hover) .e-rating-focus {
-        outline-color: $rating-li-focus;
-        border-radius: $rating-focus-border-radius;
+        &:not(:has(svg)),
+        .e-rating-item:has(svg) {
+          outline-color: $rating-li-focus;
+          border-radius: $rating-focus-border-radius;
+        }
       }
     }
 

package/SCSS-Themes/inputs/rating/material3.scss

@@ -1,5 +1,6 @@
 $rating-li-font-size: 20px !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: 8px !default;
@@ -12,18 +13,21 @@ $rating-reset-font-size : 16px !default;
 $rating-tooltip-tip-bottom-height: 8px !default;
 
 $rating-small-li-font-size: 16px !default;
+$rating-small-li-line-height: 9px !default;
 $rating-small-li-min-width-height: 24px !default;
 $rating-small-label-font-size: 10px !default;
 $rating-small-label-line-height: 16px !default;
 $rating-small-reset-font-size : 12px !default;
 
 $rating-bigger-li-font-size: 28px !default;
+$rating-bigger-li-line-height: 21px !default;
 $rating-bigger-li-min-width-height: 36px !default;
 $rating-bigger-label-font-size: 14px !default;
 $rating-bigger-label-line-height: 22px !default;
 $rating-bigger-reset-font-size : 24px !default;
 
 $rating-bigger-small-li-font-size: 24px !default;
+$rating-bigger-small-li-line-height: 17px !default;
 $rating-bigger-small-li-min-width-height: 32px !default;
 $rating-bigger-small-label-font-size: 12px !default;
 $rating-bigger-small-label-line-height: 18px !default;
@@ -60,7 +64,10 @@ $rating-reset-disabled-icon-color: $icon-color-disabled !default;
       margin: 4px;
 
       &:focus-visible:not(:hover) .e-rating-focus {
-        outline: 1px solid;
+        &:not(:has(svg)),
+        .e-rating-item:has(svg) {
+          outline: 1px solid;
+        }
       }
 
       &:focus-visible {
@@ -74,6 +81,9 @@ $rating-reset-disabled-icon-color: $icon-color-disabled !default;
     }
 
     .e-rating-item-container {
+      &:has(svg) {
+        line-height: $rating-li-line-height;
+      }
       cursor: pointer;
       font-size: $rating-li-font-size;
       padding: $rating-li-padding;
@@ -88,12 +98,11 @@ $rating-reset-disabled-icon-color: $icon-color-disabled !default;
       }
     }
 
-    &.e-rating-animation:not(.e-disabled) {
-      .e-rating-item-container:hover .e-rating-item {
-        transition: transform 150ms cubic-bezier(.4, 0, .2, 1) 0ms;
-        transform: scale(1.4);
-        pointer-events: none;
-      }
+    &.e-rating-animation.e-touch-select:not(.e-disabled) .e-rating-item-container.e-rating-focus .e-rating-item,
+    &.e-rating-animation:not(.e-disabled, .e-rating-touch) .e-rating-item-container:hover .e-rating-item {
+      transition: transform 150ms cubic-bezier(.4, 0, .2, 1) 0ms;
+      transform: scale(1.4);
+      pointer-events: none;
     }
 
     &.e-disabled {
@@ -202,6 +211,9 @@ $rating-reset-disabled-icon-color: $icon-color-disabled !default;
   .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;
     }
 
@@ -218,6 +230,9 @@ $rating-reset-disabled-icon-color: $icon-color-disabled !default;
   .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;
     }
 
@@ -236,6 +251,9 @@ $rating-reset-disabled-icon-color: $icon-color-disabled !default;
   .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;
     }
 
@@ -255,8 +273,11 @@ $rating-reset-disabled-icon-color: $icon-color-disabled !default;
   .e-rating-container {
     .e-rating-item-list {
       &:focus-visible:not(:hover) .e-rating-focus {
-        outline-color: $rating-li-focus;
-        border-radius: $rating-focus-border-radius;
+        &:not(:has(svg)),
+        .e-rating-item:has(svg) {
+          outline-color: $rating-li-focus;
+          border-radius: $rating-focus-border-radius;
+        }
       }
     }
 

package/SCSS-Themes/inputs/rating/tailwind-dark.scss

@@ -1,5 +1,6 @@
 $rating-li-font-size: $font-icon-20 !default;
 $rating-li-padding: 4px !default;
+$rating-li-line-height: 3px !default;
 $rating-li-min-width-height: 28px !default;
 $rating-focus-border-radius: 4px !default;
 $rating-label-bottom-margin: 6px !default;
@@ -12,18 +13,21 @@ $rating-reset-font-size : $font-icon-16 !default;
 $rating-tooltip-tip-bottom-height: 8px !default;
 
 $rating-small-li-font-size: $font-icon-16 !default;
+$rating-small-li-line-height: 10px !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-24 !default;
+$rating-bigger-li-line-height: 18px !default;
 $rating-bigger-li-min-width-height: 32px !default;
 $rating-bigger-label-font-size: $text-2xl !default;
 $rating-bigger-label-line-height: 22px !default;
 $rating-bigger-reset-font-size : $font-icon-20 !default;
 
 $rating-bigger-small-li-font-size: $font-icon-22 !default;
+$rating-bigger-small-li-line-height: 15px !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: 18px !default;
@@ -60,7 +64,10 @@ $rating-reset-disabled-icon-color: $icon-color-disabled !default;
       margin: 4px;
 
       &:focus-visible:not(:hover) .e-rating-focus {
-        outline: 1px solid;
+        &:not(:has(svg)),
+        .e-rating-item:has(svg) {
+          outline: 1px solid;
+        }
       }
 
       &:focus-visible {
@@ -74,6 +81,9 @@ $rating-reset-disabled-icon-color: $icon-color-disabled !default;
     }
 
     .e-rating-item-container {
+      &:has(svg) {
+        line-height: $rating-li-line-height;
+      }
       cursor: pointer;
       font-size: $rating-li-font-size;
       padding: $rating-li-padding;
@@ -88,12 +98,11 @@ $rating-reset-disabled-icon-color: $icon-color-disabled !default;
       }
     }
 
-    &.e-rating-animation:not(.e-disabled) {
-      .e-rating-item-container:hover .e-rating-item {
-        transition: transform 150ms cubic-bezier(.4, 0, .2, 1) 0ms;
-        transform: scale(1.4);
-        pointer-events: none;
-      }
+    &.e-rating-animation.e-touch-select:not(.e-disabled) .e-rating-item-container.e-rating-focus .e-rating-item,
+    &.e-rating-animation:not(.e-disabled, .e-rating-touch) .e-rating-item-container:hover .e-rating-item {
+      transition: transform 150ms cubic-bezier(.4, 0, .2, 1) 0ms;
+      transform: scale(1.4);
+      pointer-events: none;
     }
 
     &.e-disabled {
@@ -202,6 +211,9 @@ $rating-reset-disabled-icon-color: $icon-color-disabled !default;
   .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;
     }
 
@@ -218,6 +230,9 @@ $rating-reset-disabled-icon-color: $icon-color-disabled !default;
   .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;
     }
 
@@ -236,6 +251,9 @@ $rating-reset-disabled-icon-color: $icon-color-disabled !default;
   .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;
     }
 
@@ -255,8 +273,11 @@ $rating-reset-disabled-icon-color: $icon-color-disabled !default;
   .e-rating-container {
     .e-rating-item-list {
       &:focus-visible:not(:hover) .e-rating-focus {
-        outline-color: $rating-li-focus;
-        border-radius: $rating-focus-border-radius;
+        &:not(:has(svg)),
+        .e-rating-item:has(svg) {
+          outline-color: $rating-li-focus;
+          border-radius: $rating-focus-border-radius;
+        }
       }
     }