diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index 26d42c0245..402a1cd60b 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -1476,31 +1476,30 @@
   background: #2396f2;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0.5rem;
+}
+.p-rating .p-rating-item .p-rating-icon {
   color: rgba(255, 255, 255, 0.87);
-  margin-left: 0.5rem;
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
-.p-rating .p-rating-icon.p-rating-cancel {
+.p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #F48FB1;
 }
-.p-rating .p-rating-icon:first-child {
-  margin-left: 0;
-}
-.p-rating .p-rating-icon.pi-star-fill {
-  color: #64B5F6;
-}
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-focus {
+.p-rating .p-rating-item.p-focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 1px #93cbf9;
   border-color: #64B5F6;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
   color: #64B5F6;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+  color: #64B5F6;
+}
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
   color: #F48FB1;
 }
 
@@ -3968,12 +3967,6 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: rgba(255, 255, 255, 0.03);
 }
-.p-splitter .p-splitter-gutter:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 1px #93cbf9;
-  border-radius: 3px;
-}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #383838;
 }
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index 75838ede29..65b0080179 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -1476,31 +1476,30 @@
   background: #54b358;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0.5rem;
+}
+.p-rating .p-rating-item .p-rating-icon {
   color: rgba(255, 255, 255, 0.87);
-  margin-left: 0.5rem;
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
-.p-rating .p-rating-icon.p-rating-cancel {
+.p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #F48FB1;
 }
-.p-rating .p-rating-icon:first-child {
-  margin-left: 0;
-}
-.p-rating .p-rating-icon.pi-star-fill {
-  color: #81C784;
-}
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-focus {
+.p-rating .p-rating-item.p-focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 1px #a7d8a9;
   border-color: #81C784;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
   color: #81C784;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+  color: #81C784;
+}
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
   color: #F48FB1;
 }
 
@@ -3968,12 +3967,6 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: rgba(255, 255, 255, 0.03);
 }
-.p-splitter .p-splitter-gutter:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 1px #a7d8a9;
-  border-radius: 3px;
-}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #383838;
 }
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index 2f1b739c46..1405520c0d 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -1476,31 +1476,30 @@
   background: #ffc50c;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0.5rem;
+}
+.p-rating .p-rating-item .p-rating-icon {
   color: rgba(255, 255, 255, 0.87);
-  margin-left: 0.5rem;
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
-.p-rating .p-rating-icon.p-rating-cancel {
+.p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #F48FB1;
 }
-.p-rating .p-rating-icon:first-child {
-  margin-left: 0;
-}
-.p-rating .p-rating-icon.pi-star-fill {
-  color: #FFD54F;
-}
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-focus {
+.p-rating .p-rating-item.p-focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 1px #ffe284;
   border-color: #FFD54F;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
   color: #FFD54F;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+  color: #FFD54F;
+}
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
   color: #F48FB1;
 }
 
@@ -3968,12 +3967,6 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: rgba(255, 255, 255, 0.03);
 }
-.p-splitter .p-splitter-gutter:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 1px #ffe284;
-  border-radius: 3px;
-}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #383838;
 }
diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css
index 3675561f9c..0905bae9a4 100644
--- a/public/themes/arya-purple/theme.css
+++ b/public/themes/arya-purple/theme.css
@@ -1476,31 +1476,30 @@
   background: #a241b2;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0.5rem;
+}
+.p-rating .p-rating-item .p-rating-icon {
   color: rgba(255, 255, 255, 0.87);
-  margin-left: 0.5rem;
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
-.p-rating .p-rating-icon.p-rating-cancel {
+.p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #F48FB1;
 }
-.p-rating .p-rating-icon:first-child {
-  margin-left: 0;
-}
-.p-rating .p-rating-icon.pi-star-fill {
-  color: #BA68C8;
-}
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-focus {
+.p-rating .p-rating-item.p-focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 1px #cf95d9;
   border-color: #BA68C8;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
   color: #BA68C8;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+  color: #BA68C8;
+}
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
   color: #F48FB1;
 }
 
@@ -3968,12 +3967,6 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: rgba(255, 255, 255, 0.03);
 }
-.p-splitter .p-splitter-gutter:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 1px #cf95d9;
-  border-radius: 3px;
-}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #383838;
 }
diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
index 851bf5a7a2..1a33a26947 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -1484,35 +1484,34 @@
   border-color: #151515;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0.5rem;
+}
+.p-rating .p-rating-item .p-rating-icon {
   color: rgba(255, 255, 255, 0.87);
-  margin-left: 0.5rem;
   transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
   font-size: 1.143rem;
 }
-.p-rating .p-rating-icon.p-rating-cancel {
+.p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #f19ea6;
 }
-.p-rating .p-rating-icon:first-child {
-  margin-left: 0;
-}
-.p-rating .p-rating-icon.pi-star-fill {
-  color: #8dd0ff;
-}
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-focus {
+.p-rating .p-rating-item.p-focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 1px #e3f3fe;
   border-color: #8dd0ff;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
   color: #8dd0ff;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+  color: #8dd0ff;
+}
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
   color: #f19ea6;
 }
 
-.p-highlight .p-rating .p-rating-icon {
+.p-highlight .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
   color: #151515;
 }
 
@@ -3980,12 +3979,6 @@
   transition: color 0.15s, box-shadow 0.15s;
   background: rgba(255, 255, 255, 0.04);
 }
-.p-splitter .p-splitter-gutter:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 1px #e3f3fe;
-  border-radius: 4px;
-}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #3f4b5b;
 }
diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css
index 68dbc2275d..ae566174a5 100644
--- a/public/themes/bootstrap4-dark-purple/theme.css
+++ b/public/themes/bootstrap4-dark-purple/theme.css
@@ -1484,35 +1484,34 @@
   border-color: #151515;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0.5rem;
+}
+.p-rating .p-rating-item .p-rating-icon {
   color: rgba(255, 255, 255, 0.87);
-  margin-left: 0.5rem;
   transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
   font-size: 1.143rem;
 }
-.p-rating .p-rating-icon.p-rating-cancel {
+.p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #f19ea6;
 }
-.p-rating .p-rating-icon:first-child {
-  margin-left: 0;
-}
-.p-rating .p-rating-icon.pi-star-fill {
-  color: #c298d8;
-}
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-focus {
+.p-rating .p-rating-item.p-focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 1px #f0e6f5;
   border-color: #c298d8;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
   color: #c298d8;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+  color: #c298d8;
+}
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
   color: #f19ea6;
 }
 
-.p-highlight .p-rating .p-rating-icon {
+.p-highlight .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
   color: #151515;
 }
 
@@ -3980,12 +3979,6 @@
   transition: color 0.15s, box-shadow 0.15s;
   background: rgba(255, 255, 255, 0.04);
 }
-.p-splitter .p-splitter-gutter:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 1px #f0e6f5;
-  border-radius: 4px;
-}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #3f4b5b;
 }
diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
index 8d919a8a33..57a7651afc 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -1484,35 +1484,34 @@
   border-color: #ffffff;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0.5rem;
+}
+.p-rating .p-rating-item .p-rating-icon {
   color: #495057;
-  margin-left: 0.5rem;
   transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
   font-size: 1.143rem;
 }
-.p-rating .p-rating-icon.p-rating-cancel {
+.p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #dc3545;
 }
-.p-rating .p-rating-icon:first-child {
-  margin-left: 0;
-}
-.p-rating .p-rating-icon.pi-star-fill {
-  color: #007bff;
-}
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-focus {
+.p-rating .p-rating-item.p-focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
   border-color: #007bff;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
   color: #007bff;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+  color: #007bff;
+}
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
   color: #dc3545;
 }
 
-.p-highlight .p-rating .p-rating-icon {
+.p-highlight .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
   color: #ffffff;
 }
 
@@ -3980,12 +3979,6 @@
   transition: box-shadow 0.15s;
   background: #efefef;
 }
-.p-splitter .p-splitter-gutter:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
-  border-radius: 4px;
-}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #dee2e6;
 }
diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css
index 66758b350d..0cd0f1f2b1 100644
--- a/public/themes/bootstrap4-light-purple/theme.css
+++ b/public/themes/bootstrap4-light-purple/theme.css
@@ -1484,35 +1484,34 @@
   border-color: #ffffff;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0.5rem;
+}
+.p-rating .p-rating-item .p-rating-icon {
   color: #495057;
-  margin-left: 0.5rem;
   transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
   font-size: 1.143rem;
 }
-.p-rating .p-rating-icon.p-rating-cancel {
+.p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #dc3545;
 }
-.p-rating .p-rating-icon:first-child {
-  margin-left: 0;
-}
-.p-rating .p-rating-icon.pi-star-fill {
-  color: #883cae;
-}
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-focus {
+.p-rating .p-rating-item.p-focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
   border-color: #883cae;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
   color: #883cae;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+  color: #883cae;
+}
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
   color: #dc3545;
 }
 
-.p-highlight .p-rating .p-rating-icon {
+.p-highlight .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
   color: #ffffff;
 }
 
@@ -3980,12 +3979,6 @@
   transition: box-shadow 0.15s;
   background: #efefef;
 }
-.p-splitter .p-splitter-gutter:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
-  border-radius: 4px;
-}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #dee2e6;
 }
diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css
index ae920359e3..eb97ec7d99 100644
--- a/public/themes/fluent-light/theme.css
+++ b/public/themes/fluent-light/theme.css
@@ -1476,31 +1476,30 @@
   background: #ffffff;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0.5rem;
+}
+.p-rating .p-rating-item .p-rating-icon {
   color: #323130;
-  margin-left: 0.5rem;
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
-.p-rating .p-rating-icon.p-rating-cancel {
+.p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #a4252c;
 }
-.p-rating .p-rating-icon:first-child {
-  margin-left: 0;
-}
-.p-rating .p-rating-icon.pi-star-fill {
-  color: #323130;
-}
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-focus {
+.p-rating .p-rating-item.p-focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: inset 0 0 0 1px #605e5c;
   border-color: #0078d4;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+  color: #323130;
+}
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
   color: #0078d4;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
   color: #a4252c;
 }
 
@@ -3943,12 +3942,6 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: #faf9f8;
 }
-.p-splitter .p-splitter-gutter:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset inset 0 0 0 1px #605e5c;
-  border-radius: 2px;
-}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #edebe9;
 }
diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css
index b81e81c1fb..e5e8a5b02a 100644
--- a/public/themes/lara-dark-blue/theme.css
+++ b/public/themes/lara-dark-blue/theme.css
@@ -1476,31 +1476,30 @@
   background: #6cb0fc;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0.5rem;
+}
+.p-rating .p-rating-item .p-rating-icon {
   color: rgba(255, 255, 255, 0.87);
-  margin-left: 0.5rem;
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
-.p-rating .p-rating-icon.p-rating-cancel {
+.p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #F48FB1;
 }
-.p-rating .p-rating-icon:first-child {
-  margin-left: 0;
-}
-.p-rating .p-rating-icon.pi-star-fill {
-  color: #93C5FD;
-}
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-focus {
+.p-rating .p-rating-item.p-focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
   border-color: #93C5FD;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
   color: #93C5FD;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+  color: #93C5FD;
+}
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
   color: #F48FB1;
 }
 
@@ -3943,12 +3942,6 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: rgba(255, 255, 255, 0.03);
 }
-.p-splitter .p-splitter-gutter:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
-  border-radius: 6px;
-}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #0b213f;
 }
diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css
index dff59a8adb..f28d36eaf7 100644
--- a/public/themes/lara-dark-indigo/theme.css
+++ b/public/themes/lara-dark-indigo/theme.css
@@ -1476,31 +1476,30 @@
   background: #7d92fb;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0.5rem;
+}
+.p-rating .p-rating-item .p-rating-icon {
   color: rgba(255, 255, 255, 0.87);
-  margin-left: 0.5rem;
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
-.p-rating .p-rating-icon.p-rating-cancel {
+.p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #F48FB1;
 }
-.p-rating .p-rating-icon:first-child {
-  margin-left: 0;
-}
-.p-rating .p-rating-icon.pi-star-fill {
-  color: #A5B4FC;
-}
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-focus {
+.p-rating .p-rating-item.p-focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 0.2rem rgba(165, 180, 252, 0.5);
   border-color: #A5B4FC;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
   color: #A5B4FC;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+  color: #A5B4FC;
+}
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
   color: #F48FB1;
 }
 
@@ -3943,12 +3942,6 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: rgba(255, 255, 255, 0.03);
 }
-.p-splitter .p-splitter-gutter:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 0.2rem rgba(165, 180, 252, 0.5);
-  border-radius: 6px;
-}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #0b213f;
 }
diff --git a/public/themes/lara-dark-purple/theme.css b/public/themes/lara-dark-purple/theme.css
index ab219c0423..f447178330 100644
--- a/public/themes/lara-dark-purple/theme.css
+++ b/public/themes/lara-dark-purple/theme.css
@@ -1476,31 +1476,30 @@
   background: #a28bfc;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0.5rem;
+}
+.p-rating .p-rating-item .p-rating-icon {
   color: rgba(255, 255, 255, 0.87);
-  margin-left: 0.5rem;
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
-.p-rating .p-rating-icon.p-rating-cancel {
+.p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #F48FB1;
 }
-.p-rating .p-rating-icon:first-child {
-  margin-left: 0;
-}
-.p-rating .p-rating-icon.pi-star-fill {
-  color: #C4B5FD;
-}
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-focus {
+.p-rating .p-rating-item.p-focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
   border-color: #C4B5FD;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
   color: #C4B5FD;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+  color: #C4B5FD;
+}
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
   color: #F48FB1;
 }
 
@@ -3943,12 +3942,6 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: rgba(255, 255, 255, 0.03);
 }
-.p-splitter .p-splitter-gutter:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
-  border-radius: 6px;
-}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #0b213f;
 }
diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css
index 145fcc1f4c..d2dc777e4f 100644
--- a/public/themes/lara-dark-teal/theme.css
+++ b/public/themes/lara-dark-teal/theme.css
@@ -1476,31 +1476,30 @@
   background: #41e6cc;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0.5rem;
+}
+.p-rating .p-rating-item .p-rating-icon {
   color: rgba(255, 255, 255, 0.87);
-  margin-left: 0.5rem;
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
-.p-rating .p-rating-icon.p-rating-cancel {
+.p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #F48FB1;
 }
-.p-rating .p-rating-icon:first-child {
-  margin-left: 0;
-}
-.p-rating .p-rating-icon.pi-star-fill {
-  color: #5EEAD4;
-}
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-focus {
+.p-rating .p-rating-item.p-focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 0.2rem rgba(94, 234, 212, 0.5);
   border-color: #5EEAD4;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
   color: #5EEAD4;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+  color: #5EEAD4;
+}
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
   color: #F48FB1;
 }
 
@@ -3943,12 +3942,6 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: rgba(255, 255, 255, 0.03);
 }
-.p-splitter .p-splitter-gutter:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 0.2rem rgba(94, 234, 212, 0.5);
-  border-radius: 6px;
-}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #0b213f;
 }
diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css
index 4d8e822a20..69acaa82dd 100644
--- a/public/themes/lara-light-blue/theme.css
+++ b/public/themes/lara-light-blue/theme.css
@@ -1476,31 +1476,30 @@
   background: #1D4ED8;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0.5rem;
+}
+.p-rating .p-rating-item .p-rating-icon {
   color: #495057;
-  margin-left: 0.5rem;
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
-.p-rating .p-rating-icon.p-rating-cancel {
+.p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #ea5455;
 }
-.p-rating .p-rating-icon:first-child {
-  margin-left: 0;
-}
-.p-rating .p-rating-icon.pi-star-fill {
-  color: #3B82F6;
-}
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-focus {
+.p-rating .p-rating-item.p-focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 0.2rem #BFDBFE;
   border-color: #3B82F6;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
   color: #3B82F6;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+  color: #3B82F6;
+}
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
   color: #e73d3e;
 }
 
@@ -3943,12 +3942,6 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: #f8f9fa;
 }
-.p-splitter .p-splitter-gutter:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 0.2rem #BFDBFE;
-  border-radius: 6px;
-}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #dee2e6;
 }
diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css
index 3911a67895..cab5fc0589 100644
--- a/public/themes/lara-light-indigo/theme.css
+++ b/public/themes/lara-light-indigo/theme.css
@@ -1476,31 +1476,30 @@
   background: #4338CA;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0.5rem;
+}
+.p-rating .p-rating-item .p-rating-icon {
   color: #495057;
-  margin-left: 0.5rem;
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
-.p-rating .p-rating-icon.p-rating-cancel {
+.p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #ea5455;
 }
-.p-rating .p-rating-icon:first-child {
-  margin-left: 0;
-}
-.p-rating .p-rating-icon.pi-star-fill {
-  color: #6366F1;
-}
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-focus {
+.p-rating .p-rating-item.p-focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 0.2rem #C7D2FE;
   border-color: #6366F1;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
   color: #6366F1;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+  color: #6366F1;
+}
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
   color: #e73d3e;
 }
 
@@ -3943,12 +3942,6 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: #f8f9fa;
 }
-.p-splitter .p-splitter-gutter:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 0.2rem #C7D2FE;
-  border-radius: 6px;
-}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #dee2e6;
 }
diff --git a/public/themes/lara-light-purple/theme.css b/public/themes/lara-light-purple/theme.css
index c33211fa14..c892c4d850 100644
--- a/public/themes/lara-light-purple/theme.css
+++ b/public/themes/lara-light-purple/theme.css
@@ -1476,31 +1476,30 @@
   background: #6D28D9;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0.5rem;
+}
+.p-rating .p-rating-item .p-rating-icon {
   color: #495057;
-  margin-left: 0.5rem;
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
-.p-rating .p-rating-icon.p-rating-cancel {
+.p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #ea5455;
 }
-.p-rating .p-rating-icon:first-child {
-  margin-left: 0;
-}
-.p-rating .p-rating-icon.pi-star-fill {
-  color: #8B5CF6;
-}
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-focus {
+.p-rating .p-rating-item.p-focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 0.2rem #DDD6FE;
   border-color: #8B5CF6;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
   color: #8B5CF6;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+  color: #8B5CF6;
+}
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
   color: #e73d3e;
 }
 
@@ -3943,12 +3942,6 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: #f8f9fa;
 }
-.p-splitter .p-splitter-gutter:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 0.2rem #DDD6FE;
-  border-radius: 6px;
-}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #dee2e6;
 }
diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css
index 2e5895e2e0..741071805c 100644
--- a/public/themes/lara-light-teal/theme.css
+++ b/public/themes/lara-light-teal/theme.css
@@ -1476,31 +1476,30 @@
   background: #0F766E;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0.5rem;
+}
+.p-rating .p-rating-item .p-rating-icon {
   color: #495057;
-  margin-left: 0.5rem;
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
-.p-rating .p-rating-icon.p-rating-cancel {
+.p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #ea5455;
 }
-.p-rating .p-rating-icon:first-child {
-  margin-left: 0;
-}
-.p-rating .p-rating-icon.pi-star-fill {
-  color: #14B8A6;
-}
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-focus {
+.p-rating .p-rating-item.p-focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 0.2rem #99F6E4;
   border-color: #14B8A6;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
   color: #14B8A6;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+  color: #14B8A6;
+}
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
   color: #e73d3e;
 }
 
@@ -3943,12 +3942,6 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: #f8f9fa;
 }
-.p-splitter .p-splitter-gutter:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 0.2rem #99F6E4;
-  border-radius: 6px;
-}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #dee2e6;
 }
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index 1a1ad794c3..f2125e1a57 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -1484,35 +1484,34 @@
   border-color: #212529;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0.5rem;
+}
+.p-rating .p-rating-item .p-rating-icon {
   color: #dedede;
-  margin-left: 0.5rem;
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
-.p-rating .p-rating-icon.p-rating-cancel {
+.p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #e4018d;
 }
-.p-rating .p-rating-icon:first-child {
-  margin-left: 0;
-}
-.p-rating .p-rating-icon.pi-star-fill {
-  color: #FFE082;
-}
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-focus {
+.p-rating .p-rating-item.p-focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 0.1rem white;
   border-color: #FFE082;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
   color: #FFE082;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+  color: #FFE082;
+}
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
   color: #b5019f;
 }
 
-.p-highlight .p-rating .p-rating-icon {
+.p-highlight .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
   color: #212529;
 }
 
@@ -3955,12 +3954,6 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: #191919;
 }
-.p-splitter .p-splitter-gutter:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 0.1rem white;
-  border-radius: 3px;
-}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #4b4b4b;
 }
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index 20ac731a11..7f2aac8688 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -1484,35 +1484,34 @@
   border-color: #212529;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0.5rem;
+}
+.p-rating .p-rating-item .p-rating-icon {
   color: #dedede;
-  margin-left: 0.5rem;
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
-.p-rating .p-rating-icon.p-rating-cancel {
+.p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #e4018d;
 }
-.p-rating .p-rating-icon:first-child {
-  margin-left: 0;
-}
-.p-rating .p-rating-icon.pi-star-fill {
-  color: #81D4FA;
-}
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-focus {
+.p-rating .p-rating-item.p-focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 0.1rem white;
   border-color: #81D4FA;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
   color: #81D4FA;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+  color: #81D4FA;
+}
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
   color: #b5019f;
 }
 
-.p-highlight .p-rating .p-rating-icon {
+.p-highlight .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
   color: #212529;
 }
 
@@ -3955,12 +3954,6 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: #191919;
 }
-.p-splitter .p-splitter-gutter:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 0.1rem white;
-  border-radius: 3px;
-}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #4b4b4b;
 }
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index d220d977dc..da8fd12361 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -1484,35 +1484,34 @@
   border-color: #212529;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0.5rem;
+}
+.p-rating .p-rating-item .p-rating-icon {
   color: #dedede;
-  margin-left: 0.5rem;
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
-.p-rating .p-rating-icon.p-rating-cancel {
+.p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #e4018d;
 }
-.p-rating .p-rating-icon:first-child {
-  margin-left: 0;
-}
-.p-rating .p-rating-icon.pi-star-fill {
-  color: #C5E1A5;
-}
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-focus {
+.p-rating .p-rating-item.p-focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 0.1rem white;
   border-color: #C5E1A5;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
   color: #C5E1A5;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+  color: #C5E1A5;
+}
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
   color: #b5019f;
 }
 
-.p-highlight .p-rating .p-rating-icon {
+.p-highlight .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
   color: #212529;
 }
 
@@ -3955,12 +3954,6 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: #191919;
 }
-.p-splitter .p-splitter-gutter:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 0.1rem white;
-  border-radius: 3px;
-}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #4b4b4b;
 }
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index ea45686d1a..6f8fec8040 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -1484,35 +1484,34 @@
   border-color: #212529;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0.5rem;
+}
+.p-rating .p-rating-item .p-rating-icon {
   color: #dedede;
-  margin-left: 0.5rem;
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
-.p-rating .p-rating-icon.p-rating-cancel {
+.p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #e4018d;
 }
-.p-rating .p-rating-icon:first-child {
-  margin-left: 0;
-}
-.p-rating .p-rating-icon.pi-star-fill {
-  color: #F48FB1;
-}
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-focus {
+.p-rating .p-rating-item.p-focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 0.1rem white;
   border-color: #F48FB1;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
   color: #F48FB1;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+  color: #F48FB1;
+}
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
   color: #b5019f;
 }
 
-.p-highlight .p-rating .p-rating-icon {
+.p-highlight .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
   color: #212529;
 }
 
@@ -3955,12 +3954,6 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: #191919;
 }
-.p-splitter .p-splitter-gutter:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 0.1rem white;
-  border-radius: 3px;
-}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #4b4b4b;
 }
diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css
index 5d2933bc15..fba16da058 100644
--- a/public/themes/md-dark-deeppurple/theme.css
+++ b/public/themes/md-dark-deeppurple/theme.css
@@ -1500,31 +1500,30 @@
   background: #121212;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0.5rem;
+}
+.p-rating .p-rating-item .p-rating-icon {
   color: #CE93D8;
-  margin-left: 0.5rem;
   transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
   font-size: 1.143rem;
 }
-.p-rating .p-rating-icon.p-rating-cancel {
+.p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #f44435;
 }
-.p-rating .p-rating-icon:first-child {
-  margin-left: 0;
-}
-.p-rating .p-rating-icon.pi-star-fill {
-  color: #CE93D8;
-}
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-focus {
+.p-rating .p-rating-item.p-focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: none;
   border-color: #CE93D8;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+  color: #CE93D8;
+}
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
   color: #CE93D8;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
   color: #f44435;
 }
 
@@ -3992,12 +3991,6 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: rgba(255, 255, 255, 0.04);
 }
-.p-splitter .p-splitter-gutter:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset none;
-  border-radius: 4px;
-}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: rgba(255, 255, 255, 0.12);
 }
@@ -6877,25 +6870,25 @@
   display: none;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0;
+}
+.p-rating .p-rating-item {
   border-radius: 50%;
   width: 2rem;
   height: 2rem;
-  display: inline-flex;
   justify-content: center;
-  align-items: center;
-  margin-left: 0;
 }
-.p-rating .p-rating-icon:focus {
+.p-rating .p-rating-item.p-focus {
   background: rgba(206, 147, 216, 0.12);
 }
-.p-rating .p-rating-icon.p-rating-cancel:focus {
+.p-rating .p-rating-item.p-focus.p-rating-cancel-item {
   background: rgba(244, 68, 53, 0.12);
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover {
   background-color: rgba(0, 0, 0, 0.04);
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover.p-rating-cancel-item {
   background: rgba(244, 68, 53, 0.04);
 }
 
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
index 9b5ad57442..2d733178ef 100644
--- a/public/themes/md-dark-indigo/theme.css
+++ b/public/themes/md-dark-indigo/theme.css
@@ -1500,31 +1500,30 @@
   background: #121212;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0.5rem;
+}
+.p-rating .p-rating-item .p-rating-icon {
   color: #9FA8DA;
-  margin-left: 0.5rem;
   transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
   font-size: 1.143rem;
 }
-.p-rating .p-rating-icon.p-rating-cancel {
+.p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #f44435;
 }
-.p-rating .p-rating-icon:first-child {
-  margin-left: 0;
-}
-.p-rating .p-rating-icon.pi-star-fill {
-  color: #9FA8DA;
-}
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-focus {
+.p-rating .p-rating-item.p-focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: none;
   border-color: #9FA8DA;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+  color: #9FA8DA;
+}
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
   color: #9FA8DA;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
   color: #f44435;
 }
 
@@ -3992,12 +3991,6 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: rgba(255, 255, 255, 0.04);
 }
-.p-splitter .p-splitter-gutter:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset none;
-  border-radius: 4px;
-}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: rgba(255, 255, 255, 0.12);
 }
@@ -6877,25 +6870,25 @@
   display: none;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0;
+}
+.p-rating .p-rating-item {
   border-radius: 50%;
   width: 2rem;
   height: 2rem;
-  display: inline-flex;
   justify-content: center;
-  align-items: center;
-  margin-left: 0;
 }
-.p-rating .p-rating-icon:focus {
+.p-rating .p-rating-item.p-focus {
   background: rgba(159, 168, 218, 0.12);
 }
-.p-rating .p-rating-icon.p-rating-cancel:focus {
+.p-rating .p-rating-item.p-focus.p-rating-cancel-item {
   background: rgba(244, 68, 53, 0.12);
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover {
   background-color: rgba(0, 0, 0, 0.04);
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover.p-rating-cancel-item {
   background: rgba(244, 68, 53, 0.04);
 }
 
diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css
index 70ccf44ab4..b9ac00b51a 100644
--- a/public/themes/md-light-deeppurple/theme.css
+++ b/public/themes/md-light-deeppurple/theme.css
@@ -1500,31 +1500,30 @@
   background: #ffffff;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0.5rem;
+}
+.p-rating .p-rating-item .p-rating-icon {
   color: #673AB7;
-  margin-left: 0.5rem;
   transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
   font-size: 1.143rem;
 }
-.p-rating .p-rating-icon.p-rating-cancel {
+.p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #B00020;
 }
-.p-rating .p-rating-icon:first-child {
-  margin-left: 0;
-}
-.p-rating .p-rating-icon.pi-star-fill {
-  color: #673AB7;
-}
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-focus {
+.p-rating .p-rating-item.p-focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: none;
   border-color: #673AB7;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+  color: #673AB7;
+}
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
   color: #673AB7;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
   color: #B00020;
 }
 
@@ -3992,12 +3991,6 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: rgba(0, 0, 0, 0.04);
 }
-.p-splitter .p-splitter-gutter:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset none;
-  border-radius: 4px;
-}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: rgba(0, 0, 0, 0.12);
 }
@@ -6877,25 +6870,25 @@
   display: none;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0;
+}
+.p-rating .p-rating-item {
   border-radius: 50%;
   width: 2rem;
   height: 2rem;
-  display: inline-flex;
   justify-content: center;
-  align-items: center;
-  margin-left: 0;
 }
-.p-rating .p-rating-icon:focus {
+.p-rating .p-rating-item.p-focus {
   background: rgba(103, 58, 183, 0.12);
 }
-.p-rating .p-rating-icon.p-rating-cancel:focus {
+.p-rating .p-rating-item.p-focus.p-rating-cancel-item {
   background: rgba(176, 0, 32, 0.12);
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover {
   background-color: rgba(0, 0, 0, 0.04);
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover.p-rating-cancel-item {
   background: rgba(176, 0, 32, 0.04);
 }
 
diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
index 1ec3758a92..c025689f69 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@@ -1500,31 +1500,30 @@
   background: #ffffff;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0.5rem;
+}
+.p-rating .p-rating-item .p-rating-icon {
   color: #3F51B5;
-  margin-left: 0.5rem;
   transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
   font-size: 1.143rem;
 }
-.p-rating .p-rating-icon.p-rating-cancel {
+.p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #B00020;
 }
-.p-rating .p-rating-icon:first-child {
-  margin-left: 0;
-}
-.p-rating .p-rating-icon.pi-star-fill {
-  color: #3F51B5;
-}
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-focus {
+.p-rating .p-rating-item.p-focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: none;
   border-color: #3F51B5;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+  color: #3F51B5;
+}
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
   color: #3F51B5;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
   color: #B00020;
 }
 
@@ -3992,12 +3991,6 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: rgba(0, 0, 0, 0.04);
 }
-.p-splitter .p-splitter-gutter:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset none;
-  border-radius: 4px;
-}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: rgba(0, 0, 0, 0.12);
 }
@@ -6877,25 +6870,25 @@
   display: none;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0;
+}
+.p-rating .p-rating-item {
   border-radius: 50%;
   width: 2rem;
   height: 2rem;
-  display: inline-flex;
   justify-content: center;
-  align-items: center;
-  margin-left: 0;
 }
-.p-rating .p-rating-icon:focus {
+.p-rating .p-rating-item.p-focus {
   background: rgba(63, 81, 181, 0.12);
 }
-.p-rating .p-rating-icon.p-rating-cancel:focus {
+.p-rating .p-rating-item.p-focus.p-rating-cancel-item {
   background: rgba(176, 0, 32, 0.12);
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover {
   background-color: rgba(0, 0, 0, 0.04);
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover.p-rating-cancel-item {
   background: rgba(176, 0, 32, 0.04);
 }
 
diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css
index 80a775496d..932c7b713f 100644
--- a/public/themes/mdc-dark-deeppurple/theme.css
+++ b/public/themes/mdc-dark-deeppurple/theme.css
@@ -1500,31 +1500,30 @@
   background: #121212;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0.5rem;
+}
+.p-rating .p-rating-item .p-rating-icon {
   color: #CE93D8;
-  margin-left: 0.5rem;
   transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
   font-size: 1rem;
 }
-.p-rating .p-rating-icon.p-rating-cancel {
+.p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #f44435;
 }
-.p-rating .p-rating-icon:first-child {
-  margin-left: 0;
-}
-.p-rating .p-rating-icon.pi-star-fill {
-  color: #CE93D8;
-}
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-focus {
+.p-rating .p-rating-item.p-focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: none;
   border-color: #CE93D8;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+  color: #CE93D8;
+}
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
   color: #CE93D8;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
   color: #f44435;
 }
 
@@ -3992,12 +3991,6 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: rgba(255, 255, 255, 0.04);
 }
-.p-splitter .p-splitter-gutter:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset none;
-  border-radius: 4px;
-}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: rgba(255, 255, 255, 0.12);
 }
@@ -6877,25 +6870,25 @@
   display: none;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0;
+}
+.p-rating .p-rating-item {
   border-radius: 50%;
   width: 2rem;
   height: 2rem;
-  display: inline-flex;
   justify-content: center;
-  align-items: center;
-  margin-left: 0;
 }
-.p-rating .p-rating-icon:focus {
+.p-rating .p-rating-item.p-focus {
   background: rgba(206, 147, 216, 0.12);
 }
-.p-rating .p-rating-icon.p-rating-cancel:focus {
+.p-rating .p-rating-item.p-focus.p-rating-cancel-item {
   background: rgba(244, 68, 53, 0.12);
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover {
   background-color: rgba(0, 0, 0, 0.04);
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover.p-rating-cancel-item {
   background: rgba(244, 68, 53, 0.04);
 }
 
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
index 85373fef55..a7ff1e1d41 100644
--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/public/themes/mdc-dark-indigo/theme.css
@@ -1500,31 +1500,30 @@
   background: #121212;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0.5rem;
+}
+.p-rating .p-rating-item .p-rating-icon {
   color: #9FA8DA;
-  margin-left: 0.5rem;
   transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
   font-size: 1rem;
 }
-.p-rating .p-rating-icon.p-rating-cancel {
+.p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #f44435;
 }
-.p-rating .p-rating-icon:first-child {
-  margin-left: 0;
-}
-.p-rating .p-rating-icon.pi-star-fill {
-  color: #9FA8DA;
-}
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-focus {
+.p-rating .p-rating-item.p-focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: none;
   border-color: #9FA8DA;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+  color: #9FA8DA;
+}
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
   color: #9FA8DA;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
   color: #f44435;
 }
 
@@ -3992,12 +3991,6 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: rgba(255, 255, 255, 0.04);
 }
-.p-splitter .p-splitter-gutter:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset none;
-  border-radius: 4px;
-}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: rgba(255, 255, 255, 0.12);
 }
@@ -6877,25 +6870,25 @@
   display: none;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0;
+}
+.p-rating .p-rating-item {
   border-radius: 50%;
   width: 2rem;
   height: 2rem;
-  display: inline-flex;
   justify-content: center;
-  align-items: center;
-  margin-left: 0;
 }
-.p-rating .p-rating-icon:focus {
+.p-rating .p-rating-item.p-focus {
   background: rgba(159, 168, 218, 0.12);
 }
-.p-rating .p-rating-icon.p-rating-cancel:focus {
+.p-rating .p-rating-item.p-focus.p-rating-cancel-item {
   background: rgba(244, 68, 53, 0.12);
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover {
   background-color: rgba(0, 0, 0, 0.04);
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover.p-rating-cancel-item {
   background: rgba(244, 68, 53, 0.04);
 }
 
diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css
index 1476ca2cee..4943072708 100644
--- a/public/themes/mdc-light-deeppurple/theme.css
+++ b/public/themes/mdc-light-deeppurple/theme.css
@@ -1500,31 +1500,30 @@
   background: #ffffff;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0.5rem;
+}
+.p-rating .p-rating-item .p-rating-icon {
   color: #673AB7;
-  margin-left: 0.5rem;
   transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
   font-size: 1rem;
 }
-.p-rating .p-rating-icon.p-rating-cancel {
+.p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #B00020;
 }
-.p-rating .p-rating-icon:first-child {
-  margin-left: 0;
-}
-.p-rating .p-rating-icon.pi-star-fill {
-  color: #673AB7;
-}
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-focus {
+.p-rating .p-rating-item.p-focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: none;
   border-color: #673AB7;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+  color: #673AB7;
+}
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
   color: #673AB7;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
   color: #B00020;
 }
 
@@ -3992,12 +3991,6 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: rgba(0, 0, 0, 0.04);
 }
-.p-splitter .p-splitter-gutter:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset none;
-  border-radius: 4px;
-}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: rgba(0, 0, 0, 0.12);
 }
@@ -6877,25 +6870,25 @@
   display: none;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0;
+}
+.p-rating .p-rating-item {
   border-radius: 50%;
   width: 2rem;
   height: 2rem;
-  display: inline-flex;
   justify-content: center;
-  align-items: center;
-  margin-left: 0;
 }
-.p-rating .p-rating-icon:focus {
+.p-rating .p-rating-item.p-focus {
   background: rgba(103, 58, 183, 0.12);
 }
-.p-rating .p-rating-icon.p-rating-cancel:focus {
+.p-rating .p-rating-item.p-focus.p-rating-cancel-item {
   background: rgba(176, 0, 32, 0.12);
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover {
   background-color: rgba(0, 0, 0, 0.04);
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover.p-rating-cancel-item {
   background: rgba(176, 0, 32, 0.04);
 }
 
diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
index a571e0254e..76166d940a 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -1500,31 +1500,30 @@
   background: #ffffff;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0.5rem;
+}
+.p-rating .p-rating-item .p-rating-icon {
   color: #3F51B5;
-  margin-left: 0.5rem;
   transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
   font-size: 1rem;
 }
-.p-rating .p-rating-icon.p-rating-cancel {
+.p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #B00020;
 }
-.p-rating .p-rating-icon:first-child {
-  margin-left: 0;
-}
-.p-rating .p-rating-icon.pi-star-fill {
-  color: #3F51B5;
-}
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-focus {
+.p-rating .p-rating-item.p-focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: none;
   border-color: #3F51B5;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+  color: #3F51B5;
+}
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
   color: #3F51B5;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
   color: #B00020;
 }
 
@@ -3992,12 +3991,6 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: rgba(0, 0, 0, 0.04);
 }
-.p-splitter .p-splitter-gutter:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset none;
-  border-radius: 4px;
-}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: rgba(0, 0, 0, 0.12);
 }
@@ -6877,25 +6870,25 @@
   display: none;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0;
+}
+.p-rating .p-rating-item {
   border-radius: 50%;
   width: 2rem;
   height: 2rem;
-  display: inline-flex;
   justify-content: center;
-  align-items: center;
-  margin-left: 0;
 }
-.p-rating .p-rating-icon:focus {
+.p-rating .p-rating-item.p-focus {
   background: rgba(63, 81, 181, 0.12);
 }
-.p-rating .p-rating-icon.p-rating-cancel:focus {
+.p-rating .p-rating-item.p-focus.p-rating-cancel-item {
   background: rgba(176, 0, 32, 0.12);
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover {
   background-color: rgba(0, 0, 0, 0.04);
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover.p-rating-cancel-item {
   background: rgba(176, 0, 32, 0.04);
 }
 
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index 71f3031b57..0cfbf3fbf1 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -1476,31 +1476,30 @@
   background: #005b9f;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0.5rem;
+}
+.p-rating .p-rating-item .p-rating-icon {
   color: #333333;
-  margin-left: 0.5rem;
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
-.p-rating .p-rating-icon.p-rating-cancel {
+.p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #e4018d;
 }
-.p-rating .p-rating-icon:first-child {
-  margin-left: 0;
-}
-.p-rating .p-rating-icon.pi-star-fill {
-  color: #007ad9;
-}
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-focus {
+.p-rating .p-rating-item.p-focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 0.2rem #8dcdff;
   border-color: #007ad9;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
   color: #007ad9;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+  color: #007ad9;
+}
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
   color: #b5019f;
 }
 
@@ -3943,12 +3942,6 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: #eaeaea;
 }
-.p-splitter .p-splitter-gutter:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 0.2rem #8dcdff;
-  border-radius: 3px;
-}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #d8dae2;
 }
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index 8a12ebda09..b77782125c 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -1484,35 +1484,34 @@
   border-color: #ffffff;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0.5rem;
+}
+.p-rating .p-rating-item .p-rating-icon {
   color: #333333;
-  margin-left: 0.5rem;
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
-.p-rating .p-rating-icon.p-rating-cancel {
+.p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #e4018d;
 }
-.p-rating .p-rating-icon:first-child {
-  margin-left: 0;
-}
-.p-rating .p-rating-icon.pi-star-fill {
-  color: #007ad9;
-}
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-focus {
+.p-rating .p-rating-item.p-focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 0.2rem #8dcdff;
   border-color: #007ad9;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
   color: #007ad9;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+  color: #007ad9;
+}
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
   color: #b5019f;
 }
 
-.p-highlight .p-rating .p-rating-icon {
+.p-highlight .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
   color: #ffffff;
 }
 
@@ -3955,12 +3954,6 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: #eaeaea;
 }
-.p-splitter .p-splitter-gutter:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 0.2rem #8dcdff;
-  border-radius: 3px;
-}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #d8dae2;
 }
diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css
index 7c86463ab4..c1925ac128 100644
--- a/public/themes/nova-vue/theme.css
+++ b/public/themes/nova-vue/theme.css
@@ -1484,35 +1484,34 @@
   border-color: #ffffff;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0.5rem;
+}
+.p-rating .p-rating-item .p-rating-icon {
   color: #333333;
-  margin-left: 0.5rem;
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
-.p-rating .p-rating-icon.p-rating-cancel {
+.p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #e4018d;
 }
-.p-rating .p-rating-icon:first-child {
-  margin-left: 0;
-}
-.p-rating .p-rating-icon.pi-star-fill {
-  color: #41b883;
-}
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-focus {
+.p-rating .p-rating-item.p-focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 0.2rem #c2e9d8;
   border-color: #41b883;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
   color: #41b883;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+  color: #41b883;
+}
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
   color: #b5019f;
 }
 
-.p-highlight .p-rating .p-rating-icon {
+.p-highlight .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
   color: #ffffff;
 }
 
@@ -3955,12 +3954,6 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: #eaeaea;
 }
-.p-splitter .p-splitter-gutter:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 0.2rem #c2e9d8;
-  border-radius: 3px;
-}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #d8dae2;
 }
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index 4695fbea96..57d49077a9 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -1484,35 +1484,34 @@
   border-color: #ffffff;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0.5rem;
+}
+.p-rating .p-rating-item .p-rating-icon {
   color: #333333;
-  margin-left: 0.5rem;
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
-.p-rating .p-rating-icon.p-rating-cancel {
+.p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #e4018d;
 }
-.p-rating .p-rating-icon:first-child {
-  margin-left: 0;
-}
-.p-rating .p-rating-icon.pi-star-fill {
-  color: #007ad9;
-}
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-focus {
+.p-rating .p-rating-item.p-focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 0.2rem #8dcdff;
   border-color: #007ad9;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
   color: #007ad9;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+  color: #007ad9;
+}
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
   color: #b5019f;
 }
 
-.p-highlight .p-rating .p-rating-icon {
+.p-highlight .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
   color: #ffffff;
 }
 
@@ -3955,12 +3954,6 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: #eaeaea;
 }
-.p-splitter .p-splitter-gutter:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 0.2rem #8dcdff;
-  border-radius: 3px;
-}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #d8dae2;
 }
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index fee6993b36..f5355f6498 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -1476,31 +1476,30 @@
   background: #617c8a;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0.5rem;
+}
+.p-rating .p-rating-item .p-rating-icon {
   color: #666666;
-  margin-left: 0.5rem;
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
-.p-rating .p-rating-icon.p-rating-cancel {
+.p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #f3b9b9;
 }
-.p-rating .p-rating-icon:first-child {
-  margin-left: 0;
-}
-.p-rating .p-rating-icon.pi-star-fill {
-  color: #7B95A3;
-}
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-focus {
+.p-rating .p-rating-item.p-focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 0.2rem #e4e9ec;
   border-color: #7B95A3;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
   color: #7B95A3;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+  color: #7B95A3;
+}
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
   color: #d66161;
 }
 
@@ -3943,12 +3942,6 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: #eaeaea;
 }
-.p-splitter .p-splitter-gutter:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 0.2rem #e4e9ec;
-  border-radius: 2px;
-}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #dadada;
 }
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index d505cbc1ca..cba559fb1e 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -1476,31 +1476,30 @@
   background: #0b7ad1;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0.5rem;
+}
+.p-rating .p-rating-item .p-rating-icon {
   color: #495057;
-  margin-left: 0.5rem;
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
-.p-rating .p-rating-icon.p-rating-cancel {
+.p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #e74c3c;
 }
-.p-rating .p-rating-icon:first-child {
-  margin-left: 0;
-}
-.p-rating .p-rating-icon.pi-star-fill {
-  color: #2196F3;
-}
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-focus {
+.p-rating .p-rating-item.p-focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 0.2rem #a6d5fa;
   border-color: #2196F3;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
   color: #2196F3;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+  color: #2196F3;
+}
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
   color: #c0392b;
 }
 
@@ -3968,12 +3967,6 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: #f8f9fa;
 }
-.p-splitter .p-splitter-gutter:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 0.2rem #a6d5fa;
-  border-radius: 3px;
-}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #dee2e6;
 }
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index 4009b21f6e..ecafd99c9f 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -1476,31 +1476,30 @@
   background: #3d8c40;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0.5rem;
+}
+.p-rating .p-rating-item .p-rating-icon {
   color: #495057;
-  margin-left: 0.5rem;
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
-.p-rating .p-rating-icon.p-rating-cancel {
+.p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #e74c3c;
 }
-.p-rating .p-rating-icon:first-child {
-  margin-left: 0;
-}
-.p-rating .p-rating-icon.pi-star-fill {
-  color: #4CAF50;
-}
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-focus {
+.p-rating .p-rating-item.p-focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 0.2rem #b7e0b8;
   border-color: #4CAF50;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
   color: #4CAF50;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+  color: #4CAF50;
+}
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
   color: #c0392b;
 }
 
@@ -3968,12 +3967,6 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: #f8f9fa;
 }
-.p-splitter .p-splitter-gutter:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 0.2rem #b7e0b8;
-  border-radius: 3px;
-}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #dee2e6;
 }
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index 61af6c20b6..34e4fa2370 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -1476,31 +1476,30 @@
   background: #d29d00;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0.5rem;
+}
+.p-rating .p-rating-item .p-rating-icon {
   color: #495057;
-  margin-left: 0.5rem;
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
-.p-rating .p-rating-icon.p-rating-cancel {
+.p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #e74c3c;
 }
-.p-rating .p-rating-icon:first-child {
-  margin-left: 0;
-}
-.p-rating .p-rating-icon.pi-star-fill {
-  color: #FFC107;
-}
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-focus {
+.p-rating .p-rating-item.p-focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 0.2rem #ffe69c;
   border-color: #FFC107;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
   color: #FFC107;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+  color: #FFC107;
+}
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
   color: #c0392b;
 }
 
@@ -3968,12 +3967,6 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: #f8f9fa;
 }
-.p-splitter .p-splitter-gutter:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 0.2rem #ffe69c;
-  border-radius: 3px;
-}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #dee2e6;
 }
diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css
index 6627e7c7d6..ae8c580f42 100644
--- a/public/themes/saga-purple/theme.css
+++ b/public/themes/saga-purple/theme.css
@@ -1476,31 +1476,30 @@
   background: #7d1f8d;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0.5rem;
+}
+.p-rating .p-rating-item .p-rating-icon {
   color: #495057;
-  margin-left: 0.5rem;
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
-.p-rating .p-rating-icon.p-rating-cancel {
+.p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #e74c3c;
 }
-.p-rating .p-rating-icon:first-child {
-  margin-left: 0;
-}
-.p-rating .p-rating-icon.pi-star-fill {
-  color: #9C27B0;
-}
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-focus {
+.p-rating .p-rating-item.p-focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 0.2rem #df9eea;
   border-color: #9C27B0;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
   color: #9C27B0;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+  color: #9C27B0;
+}
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
   color: #c0392b;
 }
 
@@ -3968,12 +3967,6 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: #f8f9fa;
 }
-.p-splitter .p-splitter-gutter:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 0.2rem #df9eea;
-  border-radius: 3px;
-}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #dee2e6;
 }
diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css
index 14526c1ade..137a9f38b5 100644
--- a/public/themes/tailwind-light/theme.css
+++ b/public/themes/tailwind-light/theme.css
@@ -1511,31 +1511,30 @@
   background: #4F46E5;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0.5rem;
+}
+.p-rating .p-rating-item .p-rating-icon {
   color: #3f3f46;
-  margin-left: 0.5rem;
   transition: none;
   font-size: 1.143rem;
 }
-.p-rating .p-rating-icon.p-rating-cancel {
+.p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #EF4444;
 }
-.p-rating .p-rating-icon:first-child {
-  margin-left: 0;
-}
-.p-rating .p-rating-icon.pi-star-fill {
-  color: #4F46E5;
-}
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-focus {
+.p-rating .p-rating-item.p-focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 1px #6366F1;
   border-color: #4F46E5;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
   color: #4F46E5;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+  color: #4F46E5;
+}
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
   color: #DC2626;
 }
 
@@ -4003,12 +4002,6 @@
   transition: none;
   background: #fafafa;
 }
-.p-splitter .p-splitter-gutter:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 1px #6366F1;
-  border-radius: 0.375rem;
-}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #e5e7eb;
 }
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index 68ccf795ef..1bdda55b45 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -1476,31 +1476,30 @@
   background: #2396f2;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0.5rem;
+}
+.p-rating .p-rating-item .p-rating-icon {
   color: rgba(255, 255, 255, 0.87);
-  margin-left: 0.5rem;
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
-.p-rating .p-rating-icon.p-rating-cancel {
+.p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #F48FB1;
 }
-.p-rating .p-rating-icon:first-child {
-  margin-left: 0;
-}
-.p-rating .p-rating-icon.pi-star-fill {
-  color: #64B5F6;
-}
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-focus {
+.p-rating .p-rating-item.p-focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 1px #93cbf9;
   border-color: #64B5F6;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
   color: #64B5F6;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+  color: #64B5F6;
+}
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
   color: #F48FB1;
 }
 
@@ -3968,12 +3967,6 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: rgba(255, 255, 255, 0.03);
 }
-.p-splitter .p-splitter-gutter:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 1px #93cbf9;
-  border-radius: 3px;
-}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #304562;
 }
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index dd699a6400..095f575a1a 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -1476,31 +1476,30 @@
   background: #54b358;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0.5rem;
+}
+.p-rating .p-rating-item .p-rating-icon {
   color: rgba(255, 255, 255, 0.87);
-  margin-left: 0.5rem;
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
-.p-rating .p-rating-icon.p-rating-cancel {
+.p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #F48FB1;
 }
-.p-rating .p-rating-icon:first-child {
-  margin-left: 0;
-}
-.p-rating .p-rating-icon.pi-star-fill {
-  color: #81C784;
-}
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-focus {
+.p-rating .p-rating-item.p-focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 1px #a7d8a9;
   border-color: #81C784;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
   color: #81C784;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+  color: #81C784;
+}
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
   color: #F48FB1;
 }
 
@@ -3968,12 +3967,6 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: rgba(255, 255, 255, 0.03);
 }
-.p-splitter .p-splitter-gutter:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 1px #a7d8a9;
-  border-radius: 3px;
-}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #304562;
 }
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index f4a6a230b8..fc6484a9e8 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -1476,31 +1476,30 @@
   background: #ffc50c;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0.5rem;
+}
+.p-rating .p-rating-item .p-rating-icon {
   color: rgba(255, 255, 255, 0.87);
-  margin-left: 0.5rem;
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
-.p-rating .p-rating-icon.p-rating-cancel {
+.p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #F48FB1;
 }
-.p-rating .p-rating-icon:first-child {
-  margin-left: 0;
-}
-.p-rating .p-rating-icon.pi-star-fill {
-  color: #FFD54F;
-}
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-focus {
+.p-rating .p-rating-item.p-focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 1px #ffe284;
   border-color: #FFD54F;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
   color: #FFD54F;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+  color: #FFD54F;
+}
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
   color: #F48FB1;
 }
 
@@ -3968,12 +3967,6 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: rgba(255, 255, 255, 0.03);
 }
-.p-splitter .p-splitter-gutter:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 1px #ffe284;
-  border-radius: 3px;
-}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #304562;
 }
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index 6101a82ecb..7b561f3831 100644
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@@ -1476,31 +1476,30 @@
   background: #a241b2;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0.5rem;
+}
+.p-rating .p-rating-item .p-rating-icon {
   color: rgba(255, 255, 255, 0.87);
-  margin-left: 0.5rem;
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
-.p-rating .p-rating-icon.p-rating-cancel {
+.p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #F48FB1;
 }
-.p-rating .p-rating-icon:first-child {
-  margin-left: 0;
-}
-.p-rating .p-rating-icon.pi-star-fill {
-  color: #BA68C8;
-}
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-focus {
+.p-rating .p-rating-item.p-focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 1px #cf95d9;
   border-color: #BA68C8;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
   color: #BA68C8;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+  color: #BA68C8;
+}
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
   color: #F48FB1;
 }
 
@@ -3968,12 +3967,6 @@
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
   background: rgba(255, 255, 255, 0.03);
 }
-.p-splitter .p-splitter-gutter:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 1px #cf95d9;
-  border-radius: 3px;
-}
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #304562;
 }
diff --git a/src/components/rating/Rating.vue b/src/components/rating/Rating.vue
index 3f975051f5..d9b67de604 100755
--- a/src/components/rating/Rating.vue
+++ b/src/components/rating/Rating.vue
@@ -1,49 +1,51 @@
 <template>
-    <div ref="rating" :class="containerClass">
-        <template v-if="cancel">
-            <span :class="cancelIconClasses()" @click="onCancelClick" @keydown="onKeyDown">
-                <component v-if="$slots.cancel" :is="$slots.cancel" />
+    <div :class="containerClass">
+        <div v-if="cancel" :class="['p-rating-item p-rating-cancel-item', { 'p-focus': focusedOptionIndex === 0 }]" @click="onOptionClick">
+            <span class="p-hidden-accessible">
+                <input type="radio" value="0" :name="name" :checked="modelValue === 0" :disabled="disabled" :readonly="readonly" :aria-label="cancelAriaLabel()" @focus="onFocus($event, 0)" @blur="onBlur" @change="onChange($event, value)" />
+            </span>
+            <slot name="cancel" :value="0">
+                <span :class="cancelIconClass" />
+            </slot>
+        </div>
+        <template v-for="value in stars" :key="value">
+            <div :class="['p-rating-item', { 'p-rating-item-active': value <= modelValue, 'p-focus': value === focusedOptionIndex }]" @click="onOptionClick">
                 <span class="p-hidden-accessible">
                     <input
                         type="radio"
-                        value="0"
+                        :value="value"
                         :name="name"
-                        :checked="modelValue === 0"
+                        :checked="modelValue === value"
                         :disabled="disabled"
                         :readonly="readonly"
-                        :aria-label="$primevue.config.locale.clear"
-                        @focus="onFocus($event, 0)"
+                        :aria-label="starAriaLabel(value)"
+                        @focus="onFocus($event, value)"
                         @blur="onBlur"
-                        @keydown="onKeyDown($event, 0)"
+                        @change="onChange($event, value)"
                     />
                 </span>
-            </span>
-        </template>
-        <template v-for="i in stars" :key="i">
-            <span :class="iconClasses(i)" @click="onStarClick($event, i)">
-                <component v-if="hasIconSlot && i <= modelValue" :is="$slots.onIcon" :index="i" />
-                <component v-if="hasIconSlot && i > modelValue" :is="$slots.offIcon" :index="i" />
-                <span class="p-hidden-accessible">
-                    <input type="radio" :value="i" :name="name" :checked="modelValue === i" :disabled="disabled" :readonly="readonly" :aria-label="ariaLabelTemplate(i)" @focus="onFocus($event, i)" @blur="onBlur" @keydown="onKeyDown($event, i)" />
-                </span>
-            </span>
+                <slot v-if="value <= modelValue" name="onicon" :value="value">
+                    <span :class="onIconClass" />
+                </slot>
+                <slot v-else name="officon" :value="value">
+                    <span :class="offIconClass" />
+                </slot>
+            </div>
         </template>
     </div>
 </template>
 
 <script>
+import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
+
 export default {
     name: 'Rating',
-    emits: ['update:modelValue', 'change', 'focus', 'blur', 'cancel'],
+    emits: ['update:modelValue', 'change', 'focus', 'blur'],
     props: {
         modelValue: {
             type: Number,
             default: null
         },
-        name: {
-            type: String,
-            default: null
-        },
         disabled: {
             type: Boolean,
             default: false
@@ -62,11 +64,11 @@ export default {
         },
         onIcon: {
             type: String,
-            default: 'pi pi-star'
+            default: 'pi pi-star-fill'
         },
         offIcon: {
             type: String,
-            default: 'pi pi-star-fill'
+            default: 'pi pi-star'
         },
         cancelIcon: {
             type: String,
@@ -75,118 +77,46 @@ export default {
     },
     data() {
         return {
-            focusIndex: null,
-            outsideClickListener: null,
-            keyboardEvent: false
+            focusedOptionIndex: -1
         };
     },
-    mounted() {
-        this.bindOutsideClickListener();
-    },
-    beforeUnmount() {
-        this.unbindOutsideClickListener();
-    },
     methods: {
-        onStarClick(event, value) {
-            if (!this.readonly && !this.disabled && !this.keyboardEvent) {
-                this.updateModel(event, value);
-                window.setTimeout(() => {
-                    this.focusIndex = value;
-                }, 1);
-            }
-
-            this.keyboardEvent = false;
-        },
-        onKeyDown(event, value) {
-            this.keyboardEvent = true;
-
-            if (event.code === 'Space') {
-                this.updateModel(event, value);
-            }
+        onOptionClick(event) {
+            if (!this.readonly && !this.disabled) {
+                const firstFocusableEl = DomHandler.getFirstFocusableElement(event.currentTarget);
 
-            if (event.code === 'Tab') {
-                this.focusIndex = null;
+                firstFocusableEl && DomHandler.focus(firstFocusableEl);
             }
         },
-        onFocus(event, index) {
-            if (!this.readonly) {
-                if (this.modelValue === null && this.focusIndex === null && index === this.stars) {
-                    this.focusIndex = this.cancel ? 0 : 1;
-                    this.updateModel(event, this.focusIndex);
-                } else if (this.modelValue === 0 && this.focusIndex === 0 && index === this.stars - 1) {
-                    this.focusIndex = index + 1;
-                    this.updateModel(event, this.focusIndex);
-                } else if (this.modelValue === null && this.focusIndex === null) {
-                    this.focusIndex = this.cancel ? 0 : 1;
-                    this.updateModel(event, this.focusIndex);
-                } else if (this.modelValue !== null && this.focusIndex === null) {
-                    this.focusIndex = this.modelValue;
-                    this.updateModel(event, this.modelValue);
-                } else {
-                    this.focusIndex = index;
-                    this.updateModel(event, index);
-                }
-
-                this.$emit('focus', event);
-            }
+        onFocus(event, value) {
+            this.onOptionSelect(event, value);
+            this.$emit('focus', event);
         },
         onBlur(event) {
+            this.focusedOptionIndex = -1;
             this.$emit('blur', event);
         },
-        onCancelClick(event) {
-            if (!this.readonly && !this.disabled) {
-                window.setTimeout(() => {
-                    this.focusIndex = 0;
-                }, 1);
-                this.updateModel(event, null);
-                this.$emit('cancel');
+        onChange(event, value) {
+            if (ObjectUtils.isEmpty(this.modelValue) && this.focusedOptionIndex !== -1) {
+                this.updateModel(event, value || null);
             }
         },
-        updateModel(event, value) {
-            this.$emit('update:modelValue', value);
-            this.$emit('change', {
-                originalEvent: event,
-                value: value
-            });
-        },
-        ariaLabelTemplate(index) {
-            return index === 1 ? this.$primevue.config.locale.aria.star : this.$primevue.config.locale.aria.stars.replace(/{star}/g, index);
-        },
-        iconClasses(i) {
-            const iconOn = i > this.modelValue && !this.hasIconSlot() ? this.onIcon : null;
-            const iconOff = i <= this.modelValue && !this.hasIconSlot() ? this.offIcon : null;
+        onOptionSelect(event, value) {
+            this.focusedOptionIndex = value;
 
-            return ['p-rating-icon', iconOn, iconOff, { 'p-focus': i === this.focusIndex }];
-        },
-        cancelIconClasses() {
-            const focusOnCancel = this.focusIndex === 0 && (this.modelValue === 0 || this.modelValue === null);
-
-            if (this.$slots.cancel) {
-                return ['p-rating-icon', { 'p-focus': focusOnCancel }];
+            if (ObjectUtils.isNotEmpty(this.modelValue)) {
+                this.updateModel(event, value || null);
             }
-
-            return ['p-rating-icon p-rating-cancel', this.cancelIcon, { 'p-focus': focusOnCancel }];
         },
-        hasIconSlot() {
-            return this.$slots.onIcon && this.$slots.offIcon;
-        },
-        bindOutsideClickListener() {
-            this.outsideClickListener = (event) => {
-                if (this.focusIndex !== null && this.isOutsideRatingClicked(event)) {
-                    this.focusIndex = null;
-                }
-            };
-
-            document.addEventListener('click', this.outsideClickListener);
+        updateModel(event, value) {
+            this.$emit('update:modelValue', value);
+            this.$emit('change', { originalEvent: event, value });
         },
-        unbindOutsideClickListener() {
-            document.removeEventListener('click', this.outsideClickListener);
-            this.outsideClickListener = null;
+        cancelAriaLabel() {
+            return this.$primevue.config.locale.clear;
         },
-        isOutsideRatingClicked(event) {
-            const ratingRef = this.$refs.rating;
-
-            return !(ratingRef.isSameNode(event.target) || ratingRef.contains(event.target));
+        starAriaLabel(value) {
+            return value === 1 ? this.$primevue.config.locale.aria.star : this.$primevue.config.locale.aria.stars.replace(/{star}/g, value);
         }
     },
     computed: {
@@ -198,25 +128,36 @@ export default {
                     'p-disabled': this.disabled
                 }
             ];
+        },
+        cancelIconClass() {
+            return ['p-rating-icon p-rating-cancel', this.cancelIcon];
+        },
+        onIconClass() {
+            return ['p-rating-icon', this.onIcon];
+        },
+        offIconClass() {
+            return ['p-rating-icon', this.offIcon];
+        },
+        name() {
+            return this.$attrs.name || UniqueComponentId();
         }
     }
 };
 </script>
 
 <style>
-.p-rating-icon {
-    cursor: pointer;
-    display: inline-block;
+.p-rating {
+    display: flex;
+    align-items: center;
 }
 
-.p-rating.p-rating-readonly .p-rating-icon {
-    cursor: default;
+.p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
 }
 
-.p-rating:not(.p-disabled) .p-rating-icon.p-focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #bfdbfe;
-    border-color: #3b82f6;
+.p-rating.p-readonly .p-rating-item {
+    cursor: default;
 }
 </style>