survey-react 1.11.4 → 1.11.6

package/defaultV2.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.11.4
+ * surveyjs - Survey JavaScript library v1.11.6
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -460,6 +460,22 @@ button.sv-action-bar-item {
   visibility: hidden;
 }
 
+.sv-drag-drop-choices-shortcut {
+  cursor: grabbing;
+  position: absolute;
+  z-index: 10000;
+  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
+}
+
+.sv-drag-drop-choices-shortcut__content.sv-drag-drop-choices-shortcut__content {
+  min-width: 100px;
+  box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1)), var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
+  background-color: var(--sjs-general-backcolor, var(--background, #fff));
+  border-radius: calc(4.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-right: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin-left: 0;
+}
+
 :root {
   --sjs-transition-duration: 150ms;
 }
@@ -1875,6 +1891,15 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list-item__marker-icon use {
   font-weight: 400;
 }
 
+.sv-list__item.sv-list__item--selected.sv-list__item--group > .sv-list__item-body {
+  background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
+  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
+  font-weight: 400;
+}
+.sv-list__item.sv-list__item--selected.sv-list__item--group > .sv-list__item-body use {
+  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
+}
+
 .sv-list__item.sv-list__item--disabled .sv-list__item-body {
   cursor: default;
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
@@ -2109,6 +2134,10 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list-item__marker-icon use {
   opacity: 0.25;
 }
 
+.sd-element__title.sd-element__title--hidden {
+  display: none;
+}
+
 .sd-root--readonly .sd-element__title.sd-element__title--disabled {
   opacity: 1;
 }
@@ -4320,7 +4349,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   fill: var(--sjs-general-forecolor, var(--foreground, #161616));
   font-size: var(--sjs-font-size, 16px);
   box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15)), inset 0 0 0 0px var(--sjs-general-backcolor, var(--background, #fff));
-  transition: border var(--sjs-transition-duration, 150ms), box-shadow var(--sjs-transition-duration, 150ms), background-color var(--sjs-transition-duration, 150ms);
+  transition: box-shadow var(--sjs-transition-duration, 150ms), background-color var(--sjs-transition-duration, 150ms);
 }
 
 .sd-rating__item--fixed-size {
@@ -4377,6 +4406,9 @@ legend + sv-ng-rating-item + .sd-rating__item {
   box-shadow: none;
   transform: none;
 }
+.sd-rating__item.sd-rating__item--preview:focus-within {
+  box-shadow: none;
+}
 .sd-rating__item.sd-rating__item--preview .sd-rating__item-text.sd-rating__item-text {
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
 }
@@ -4398,19 +4430,18 @@ legend + sv-ng-rating-item + .sd-rating__item {
 }
 
 .sd-rating__item:focus-within {
-  border: 2px solid var(--sjs-primary-backcolor, var(--primary, #19b394));
+  box-shadow: 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 
 .sd-rating__item--selected {
   background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
-  border: 2px solid var(--sjs-primary-backcolor, var(--primary, #19b394));
   color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
   font-weight: 600;
-  box-shadow: 0px 1px 2px transparent;
+  box-shadow: 0 0 0 0px var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 
 .sd-rating__item--selected:focus-within {
-  box-shadow: var(--sjs-shadow-small-reset, 0px 0px 0px 0px rgba(0, 0, 0, 0.15)), inset 0 0 0 2px var(--sjs-general-backcolor, var(--background, #fff));
+  box-shadow: var(--sjs-shadow-small-reset, 0px 0px 0px 0px rgba(0, 0, 0, 0.15)), inset 0 0 0 4px var(--sjs-general-backcolor, var(--background, #fff)), 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 
 .sd-rating__item-smiley {
@@ -4420,12 +4451,16 @@ legend + sv-ng-rating-item + .sd-rating__item {
   padding: calc(1.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   box-sizing: border-box;
   min-width: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  min-height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  display: flex;
+  justify-content: center;
+  align-items: center;
   text-align: center;
   border: 2px solid var(--sjs-border-default, var(--border, #d6d6d6));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   fill: var(--sjs-border-default, var(--border, #d6d6d6));
   box-shadow: var(--sjs-shadow-small-reset, 0px 0px 0px 0px rgba(0, 0, 0, 0.15)), inset 0 0 0 0px var(--sjs-general-backcolor, var(--background, #fff));
-  transition: border var(--sjs-transition-duration, 150ms), box-shadow var(--sjs-transition-duration, 150ms), background-color var(--sjs-transition-duration, 150ms);
+  transition: box-shadow var(--sjs-transition-duration, 150ms), background-color var(--sjs-transition-duration, 150ms);
 }
 .sd-rating__item-smiley svg {
   display: block;
@@ -4436,6 +4471,7 @@ legend + sv-ng-rating-item + .sd-rating__item {
 .sd-rating__item-smiley--small {
   padding: calc(0.625 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   min-width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  min-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   border-width: 1px;
 }
 .sd-rating__item-smiley--small svg {
@@ -4443,8 +4479,16 @@ legend + sv-ng-rating-item + .sd-rating__item {
   height: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
+.sd-rating__item-smiley--small:not(.sd-rating__item-smiley--selected):focus-within {
+  box-shadow: 0 0 0 1px var(--sjs-primary-backcolor, var(--primary, #19b394));
+}
+
+.sd-rating__item-smiley--colored.sd-rating__item-smiley--small:not(.sd-rating__item-smiley--selected):focus-within {
+  box-shadow: 0 0 0 1px var(--sd-rating-item-color, var(--sjs-primary-backcolor, var(--primary, #19b394)));
+}
+
 .sd-rating__item-smiley--small.sd-rating__item-smiley--selected:focus-within {
-  box-shadow: inset 0 0 0 1px var(--sjs-general-backcolor, var(--background, #fff));
+  box-shadow: inset 0 0 0 2px var(--sjs-general-backcolor, var(--background, #fff)), 0 0 0 1px var(--sd-rating-item-color, var(--sjs-primary-backcolor, var(--primary, #19b394)));
 }
 
 legend + .sd-rating__item-smiley,
@@ -4453,7 +4497,9 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-rating__item-smiley--scale-colored {
-  transition: border var(--sjs-transition-duration, 150ms), box-shadow var(--sjs-transition-duration, 150ms), opacity var(--sjs-transition-duration, 150ms), background-color var(--sjs-transition-duration, 150ms);
+  border-color: var(--sd-rating-item-color, var(--sjs-primary-backcolor, var(--primary, #19b394)));
+  fill: var(--sd-rating-item-color, var(--sjs-primary-backcolor, var(--primary, #19b394)));
+  transition: box-shadow var(--sjs-transition-duration, 150ms), opacity var(--sjs-transition-duration, 150ms), background-color var(--sjs-transition-duration, 150ms);
 }
 
 .sd-rating__item-smiley--error {
@@ -4461,6 +4507,9 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   border-color: transparent;
   fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
+.sd-rating__item-smiley--error.sd-rating__item-smiley--scale-colored:hover {
+  fill: var(--sd-rating-item-color, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
+}
 .sd-rating__item-smiley--error.sd-rating__item-smiley--scale-colored:not(.sd-rating__item-smiley--selected) {
   opacity: initial;
 }
@@ -4474,22 +4523,29 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   fill: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
 }
 
+.sd-rating__item-smiley.sd-rating__item-smiley--readonly {
+  fill: var(--sjs-border-default, var(--border, #d6d6d6));
+  border-color: var(--sjs-border-default, var(--border, #d6d6d6));
+}
+
 .sd-rating__item-smiley.sd-rating__item-smiley--selected.sd-rating__item-smiley--readonly {
   fill: var(--sjs-general-forecolor, var(--foreground, #161616));
   border-color: var(--sjs-general-forecolor, var(--foreground, #161616));
   background-color: unset;
 }
 
-.sd-rating__item-smiley.sd-rating__item-smiley--preview {
-  border-color: var(--sjs-general-forecolor, var(--foreground, #161616));
-  border-width: 1px;
+.sd-rating__item-smiley.sd-rating__item-smiley--preview.sd-rating__item-smiley--preview.sd-rating__item-smiley--preview {
+  border: 1px solid var(--sjs-general-forecolor, var(--foreground, #161616));
   fill: var(--sjs-general-forecolor, var(--foreground, #161616));
 }
-.sd-rating__item-smiley.sd-rating__item-smiley--preview svg {
+.sd-rating__item-smiley.sd-rating__item-smiley--preview.sd-rating__item-smiley--preview.sd-rating__item-smiley--preview:focus-within {
+  box-shadow: none;
+}
+.sd-rating__item-smiley.sd-rating__item-smiley--preview.sd-rating__item-smiley--preview.sd-rating__item-smiley--preview svg {
   margin: 1px;
 }
 
-.sd-rating__item-smiley.sd-rating__item-smiley--selected.sd-rating__item-smiley--preview {
+.sd-rating__item-smiley.sd-rating__item-smiley--selected.sd-rating__item-smiley--preview.sd-rating__item-smiley--preview {
   fill: var(--sjs-general-backcolor, var(--background, #fff));
   background-color: var(--sjs-general-forecolor, var(--foreground, #161616));
 }
@@ -4500,24 +4556,33 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-rating__item-smiley:focus-within {
-  border-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
+  border: none;
+  box-shadow: var(--sjs-shadow-small-reset, 0px 0px 0px 0px rgba(0, 0, 0, 0.15)), 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
+}
+
+.sd-rating__item-smiley:focus-within {
+  border: none;
+  box-shadow: var(--sjs-shadow-small-reset, 0px 0px 0px 0px rgba(0, 0, 0, 0.15)), 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 
 .sd-rating__item-smiley--selected {
-  background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
-  border-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
+  background-color: var(--sd-rating-item-color, var(--sjs-primary-backcolor, var(--primary, #19b394)));
+  border-color: var(--sd-rating-item-color, var(--sjs-primary-backcolor, var(--primary, #19b394)));
   fill: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
   font-weight: 600;
 }
 
 .sd-rating__item-smiley--selected:focus-within {
-  box-shadow: var(--sjs-shadow-small-reset, 0px 0px 0px 0px rgba(0, 0, 0, 0.15)), inset 0 0 0 2px var(--sjs-general-backcolor, var(--background, #fff));
+  border: 0px solid var(--sjs-general-backcolor, var(--background, #fff));
+  box-shadow: var(--sjs-shadow-small-reset, 0px 0px 0px 0px rgba(0, 0, 0, 0.15)), inset 0 0 0 4px var(--sjs-general-backcolor, var(--background, #fff)), 0 0 0 2px var(--sd-rating-item-color, var(--sjs-primary-backcolor, var(--primary, #19b394)));
 }
 
 .sd-rating__item-smiley--scale-colored:not(.sd-rating__item-smiley--selected) {
   opacity: 0.25;
 }
 .sd-rating__item-smiley--scale-colored:not(.sd-rating__item-smiley--selected).sd-rating__item-smiley--allowhover:hover {
+  background-color: var(--sd-rating-item-color-light, var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248))));
+  border-color: var(--sd-rating-item-color, var(--sjs-border-default, var(--border, #d6d6d6)));
   opacity: 0.5;
 }
 
@@ -4527,6 +4592,12 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 
 .sd-rating__item-smiley--scale-colored:not(.sd-rating__item-smiley--selected):focus-within {
   opacity: 1;
+  box-shadow: var(--sjs-shadow-small-reset, 0px 0px 0px 0px rgba(0, 0, 0, 0.15)), 0 0 0 2px var(--sd-rating-item-color, var(--sjs-primary-backcolor, var(--primary, #19b394)));
+}
+
+.sd-rating__item-smiley--scale-colored.sd-rating__item-smiley--small:not(.sd-rating__item-smiley--selected):focus-within {
+  opacity: 1;
+  box-shadow: var(--sjs-shadow-small-reset, 0px 0px 0px 0px rgba(0, 0, 0, 0.15)), 0 0 0 1px var(--sd-rating-item-color, var(--sjs-primary-backcolor, var(--primary, #19b394)));
 }
 
 .sd-rating__item-smiley--scale-colored.sd-rating__item-smiley--selected, .sd-rating__item-smiley--scale-colored.sd-rating__item-smiley--readonly, .sd-rating__item-smiley--scale-colored.sd-rating__item-smiley--preview {
@@ -4695,7 +4766,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   fill: var(--sjs-general-forecolor, var(--foreground, #161616));
 }
 
-.sd-rating__item-star:focus-within svg {
+.sd-rating__item-star:not(.sd-rating__item-star--preview):focus-within svg {
   stroke: var(--sjs-primary-backcolor, var(--primary, #19b394));
   fill: transparent;
 }
@@ -4710,19 +4781,19 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   fill: var(--sjs-questionpanel-hovercolor, var(--sjs-general-backcolor-dark, rgb(248, 248, 248)));
 }
 
-.sd-rating__item-star--selected.sd-rating__item-star--unhighlighted:focus-within svg {
+.sd-rating__item-star--selected:not(.sd-rating__item-star--preview).sd-rating__item-star--unhighlighted:focus-within svg {
   stroke: var(--sjs-border-default, var(--border, #d6d6d6));
   fill: var(--sjs-border-default, var(--border, #d6d6d6));
 }
 
-.sd-rating__item-star--selected:focus-within svg {
+.sd-rating__item-star--selected:not(.sd-rating__item-star--preview):focus-within svg {
   stroke: var(--sjs-primary-backcolor, var(--primary, #19b394));
   fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
-.sd-rating__item-star--selected:focus-within .sv-star {
+.sd-rating__item-star--selected:not(.sd-rating__item-star--preview):focus-within .sv-star {
   opacity: 0;
 }
-.sd-rating__item-star--selected:focus-within .sv-star-2 {
+.sd-rating__item-star--selected:not(.sd-rating__item-star--preview):focus-within .sv-star-2 {
   opacity: 1;
 }
 
@@ -4734,7 +4805,6 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   font-size: var(--sjs-internal-font-editorfont-size);
   line-height: calc(1.5 * (var(--sjs-internal-font-editorfont-size)));
   display: inline-block;
-  border: 2px solid transparent;
   box-sizing: border-box;
   transition: color var(--sjs-transition-duration, 150ms);
 }
@@ -4742,6 +4812,7 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   margin-top: calc(1.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   margin-bottom: calc(1.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   color: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
+  border: 2px solid rgba(0, 0, 0, 0);
 }
 .sd-rating__item-text.sd-rating__item-text.sd-rating__min-text {
   margin-right: var(--sjs-base-unit, var(--base-unit, 8px));
@@ -4757,6 +4828,15 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 .sd-rating__item-text.sd-rating__item-text.sd-rating__item--fixed-size {
   min-width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
+.sd-rating__item-text.sd-rating__item-text::after {
+  display: block;
+  content: attr(data-text);
+  font-weight: 600;
+  height: 0;
+  color: transparent;
+  overflow: hidden;
+  visibility: hidden;
+}
 
 .sd-rating--wrappable .sd-rating__item-text {
   max-width: 100%;
@@ -7382,12 +7462,12 @@ svg.sd-action--icon {
   padding: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   display: flex;
   flex-direction: column;
-  transition: 0.25s padding ease-out;
 }
 
 .sd-progress-buttons__list-container {
   display: flex;
   overflow: hidden;
+  margin: 0 calc(-0.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sd-progress-buttons__connector {
@@ -7443,14 +7523,12 @@ svg.sd-action--icon {
 }
 .sd-progress-buttons__list li .sd-progress-buttons__button .sd-progress-buttons__button-background {
   position: absolute;
-  width: 100%;
-  height: 100%;
+  width: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   top: calc(-0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  left: calc(-0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  left: calc(-1.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
   z-index: -2;
-  border: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
-  border-radius: 50%;
 }
 .sd-progress-buttons__list li .sd-progress-buttons__button .sd-progress-buttons__button-content {
   position: absolute;
@@ -7467,11 +7545,14 @@ svg.sd-action--icon {
 }
 .sd-progress-buttons__list li:hover .sd-progress-buttons__button {
   color: var(--sjs-primary-backcolor, var(--primary, #19b394));
-  padding: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   margin: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  border: calc(0.75 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid var(--sjs-primary-backcolor, var(--primary, #19b394));
+  border: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid var(--sjs-primary-backcolor, var(--primary, #19b394));
   background-color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
 }
+.sd-progress-buttons__list li:hover .sd-progress-buttons__button .sd-progress-buttons__button-background {
+  left: calc(-0.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
 .sd-progress-buttons__list li:hover .sd-progress-buttons__button .sd-progress-buttons__button-content {
   top: calc(-0.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   left: calc(-0.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -7498,8 +7579,11 @@ svg.sd-action--icon {
   border: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid var(--sjs-primary-backcolor, var(--primary, #19b394));
   background-color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
   color: var(--sjs-primary-backcolor, var(--primary, #19b394));
-  padding: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  margin: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.sd-progress-buttons__list .sd-progress-buttons__list-element--current .sd-progress-buttons__button .sd-progress-buttons__button-background {
+  left: calc(-0.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .sd-progress-buttons__list .sd-progress-buttons__list-element--current .sd-progress-buttons__button .sd-progress-buttons__button-content {
   border: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid var(--sjs-primary-backcolor, var(--primary, #19b394));
@@ -7555,6 +7639,9 @@ svg.sd-action--icon {
   margin-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 
+.sd-progress-buttons--numbered .sd-progress-buttons__list-container {
+  margin: 0 calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
 .sd-progress-buttons--numbered .sd-progress-buttons__list li:not(:first-child) > .sd-progress-buttons__connector {
   bottom: calc(2.175 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   right: calc(50% + 8px);
@@ -7564,8 +7651,16 @@ svg.sd-action--icon {
   width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
+.sd-progress-buttons--numbered .sd-progress-buttons__list li .sd-progress-buttons__button .sd-progress-buttons__button-background {
+  height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  width: calc(4.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
 .sd-progress-buttons--numbered .sd-progress-buttons__list li:hover .sd-progress-buttons__button {
-  padding: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
+.sd-progress-buttons--with-titles .sd-progress-buttons__list-container {
+  margin: 0;
 }
 
 .sd-root-modern--mobile .sd-progress-buttons__list,
@@ -7586,10 +7681,6 @@ svg.sd-action--icon {
   padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
-.sv-root--sticky-top .sd-progress-buttons {
-  padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-}
-
 .sd-progress-buttons--fit-survey-width {
   max-width: calc(90 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   box-sizing: border-box;