survey-react 1.9.135 → 1.9.137

package/defaultV2.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.135
+ * surveyjs - Survey JavaScript library v1.9.137
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -905,6 +905,67 @@ sv-popup {
   flex-grow: 1;
 }
 
+.sv-popup--visible {
+  opacity: 1;
+}
+
+.sv-popup--hidden {
+  opacity: 0;
+}
+
+.sv-popup--animate-enter {
+  animation-name: fadeIn;
+  animation-fill-mode: forwards;
+  animation-duration: 0.15s;
+}
+
+.sv-popup--modal.sv-popup--animate-enter {
+  animation-duration: 0.25s;
+}
+
+.sv-popup--animate-leave {
+  animation-direction: reverse;
+  animation-name: fadeIn;
+  animation-fill-mode: forwards;
+  animation-duration: 0.15s;
+}
+
+.sv-popup--modal.sv-popup--animate-leave {
+  animation-duration: 0.25s;
+}
+
+.sv-popup--hidden {
+  opacity: 0;
+}
+
+@keyframes modalMoveDown {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(64px);
+  }
+}
+@keyframes modalMoveUp {
+  from {
+    transform: translateY(64px);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+.sv-popup--modal.sv-popup--animate-leave .sv-popup__container {
+  animation-name: modalMoveDown;
+  animation-fill-mode: forwards;
+  animation-duration: 0.25s;
+}
+
+.sv-popup--modal.sv-popup--animate-enter .sv-popup__container {
+  animation-name: modalMoveUp;
+  animation-fill-mode: forwards;
+  animation-duration: 0.25s;
+}
+
 :root {
   --sjs-transition-duration: 150ms;
 }
@@ -1259,6 +1320,8 @@ sv-brand-info, .sv-brand-info {
 .sv-ranking-item {
   cursor: pointer;
   position: relative;
+  height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  opacity: 1;
 }
 
 .sv-ranking-item:focus .sv-ranking-item__icon--hover {
@@ -1484,6 +1547,60 @@ sv-brand-info, .sv-brand-info {
   align-items: center;
 }
 
+.sv-ranking-item--animate-item-removing {
+  --animation-height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  animation-name: moveIn, fadeIn;
+  animation-direction: reverse;
+  animation-fill-mode: forwards;
+  animation-timing-function: linear;
+  animation-duration: var(--sjs-ranking-move-out-duration, 150ms), var(--sjs-ranking-fade-out-duration, 100ms);
+  animation-delay: var(--sjs-ranking-move-out-delay, 0ms), 0s;
+}
+
+.sv-ranking-item--animate-item-adding {
+  --animation-height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  animation-name: moveIn, fadeIn;
+  opacity: 0;
+  animation-fill-mode: forwards;
+  animation-timing-function: linear;
+  animation-duration: var(--sjs-ranking-move-in-duration, 150ms), var(--sjs-ranking-fade-in-duration, 100ms);
+  animation-delay: 0s, var(--sjs-ranking-fade-in-delay, 150ms);
+}
+
+.sv-ranking-item--animate-item-adding-empty {
+  --animation-height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  animation-name: fadeIn;
+  opacity: 0;
+  animation-timing-function: linear;
+  animation-duration: var(--sjs-ranking-fade-in-duration, 100ms);
+  animation-delay: 0;
+}
+
+.sv-ranking-item--animate-item-removing-empty {
+  --animation-height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  animation-name: fadeIn;
+  animation-direction: reverse;
+  animation-timing-function: linear;
+  animation-duration: var(--sjs-ranking-fade-out-duration, 100ms);
+  animation-delay: 0;
+}
+
+@keyframes sv-animate-item-opacity-reverse-keyframes {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes sv-animate-item-opacity-keyframes {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
 .sv-ranking--select-to-rank-horizontal .sv-ranking__container {
   max-width: calc(50% - 1px);
 }
@@ -1536,6 +1653,14 @@ sv-brand-info, .sv-brand-info {
   display: none;
 }
 
+.sv-ranking--select-to-rank-horizontal .sv-ranking__container--to .sv-ranking-item {
+  left: 0 !important;
+  padding-left: 16px;
+}
+.sv-ranking--select-to-rank-horizontal .sv-ranking__container--to .sv-ranking-item .sv-ranking-item__ghost {
+  left: initial;
+}
+
 :root {
   --sjs-transition-duration: 150ms;
 }
@@ -1855,6 +1980,22 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   white-space: pre-wrap;
 }
 
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes moveIn {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--animation-height);
+  }
+}
 .sd-element {
   padding-left: var(--sv-element-add-padding-left, 0px);
   padding-right: var(--sv-element-add-padding-right, 0px);
@@ -1968,6 +2109,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   position: absolute;
   left: calc(-3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  transition-property: transform;
 }
 
 .sd-element__title--expandable.sd-element__title--expanded:before {
@@ -1983,8 +2125,6 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   padding-bottom: var(--sd-base-padding);
   background: var(--sjs-questionpanel-backcolor, var(--sjs-question-background, var(--sjs-general-backcolor, var(--background, #fff))));
   box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
-  display: flex;
-  flex-direction: column;
 }
 
 .sd-element--with-frame.sd-element--compact {
@@ -1994,6 +2134,121 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   background-color: transparent;
 }
 
+@keyframes elementMoveIn {
+  from {
+    flex-basis: 0;
+    flex-grow: 0;
+    max-width: 0;
+    min-width: 0;
+    width: 0;
+    height: 0;
+    padding-left: 0;
+    overflow: hidden;
+  }
+  to {
+    height: var(--animation-height);
+    flex-basis: var(--animation-width);
+    width: var(--animation-width);
+    min-width: var(--animation-width);
+    padding-left: var(--animation-padding-left);
+    overflow: visible;
+  }
+}
+.sd-element-wrapper--fade-in {
+  animation-name: elementMoveIn, fadeIn;
+  animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
+  animation-fill-mode: forwards;
+  animation-duration: var(--sjs-element-move-in-duration, 250ms), var(--sjs-element-fade-in-duration, 250ms);
+  animation-delay: 0s, var(--sjs-element-fade-in-delay, 0ms);
+  opacity: 0;
+}
+
+.sd-element-wrapper--fade-out {
+  animation-name: elementMoveIn, fadeIn;
+  animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
+  animation-fill-mode: forwards;
+  animation-direction: reverse;
+  animation-duration: var(--sjs-element-move-out-duration, 250ms), var(--sjs-element-fade-out-duration, 100ms);
+  animation-delay: var(--sjs-element-move-out-delay, 0ms), 0s;
+}
+
+@keyframes paddingFadeIn {
+  from {
+    padding-top: 0;
+  }
+  to {
+    padding-top: var(--animation-padding-top);
+  }
+}
+.sd-element__content {
+  box-sizing: border-box;
+}
+
+.sd-element__content--fade-in {
+  animation-name: fadeIn, moveIn, paddingFadeIn;
+  min-height: 0 !important;
+  opacity: 0;
+  animation-fill-mode: forwards;
+  animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
+  animation-duration: var(--sjs-expand-fade-in-duration, 100ms), var(--sjs-expand-move-in-duration, 200ms), var(--sjs-expand-move-in-duration, 200ms);
+  animation-delay: var(--sjs-collapse-fade-in-delay, 150ms), 0s, 0s;
+}
+
+.sd-element__content--fade-out {
+  animation-name: fadeIn, moveIn, paddingFadeIn;
+  min-height: 0 !important;
+  animation-direction: reverse;
+  animation-fill-mode: forwards;
+  animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
+  animation-duration: var(--sjs-collapse-fade-out-duration, 100ms), var(--sjs-collapse-move-out-duration, 250ms), var(--sjs-collapse-move-out-duration, 250ms);
+  animation-delay: 0s, var(--sjs-collapse-move-out-delay, 0ms), var(--sjs-collapse-move-out-delay, 0ms);
+}
+
+.sd-element--expandable.sd-elemenet--expandable--animating > .sd-element__header:focus-within, .sd-element--expandable.sd-elemenet--expandable--animating > .sd-element__header:hover {
+  background-color: transparent;
+}
+
+.sd-elemenet--expandable--animating.sd-element--expandable {
+  transition-property: padding-top, padding-bottom;
+}
+.sd-elemenet--expandable--animating.sd-element--expandable > .sd-element__header {
+  transition-property: padding-top, padding-bottom;
+}
+.sd-elemenet--expandable--animating.sd-element--expandable.sd-element--expanded {
+  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
+  transition-duration: var(--sjs-expand-move-in-duration, 200ms);
+}
+.sd-elemenet--expandable--animating.sd-element--expandable.sd-element--expanded > .sd-element__header {
+  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
+  transition-duration: var(--sjs-expand-move-in-duration, 200ms);
+}
+.sd-elemenet--expandable--animating.sd-element--expandable.sd-element--expanded > .sd-element__header .sd-element__title:before {
+  transition-duration: var(--sjs-expand-move-in-duration, 200ms);
+}
+.sd-elemenet--expandable--animating.sd-element--expandable.sd-element--collapsed {
+  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
+  transition-duration: var(--sjs-collapse-move-out-duration, 250ms);
+  transition-delay: var(--sjs-collapse-move-out-delay, 0ms);
+}
+.sd-elemenet--expandable--animating.sd-element--expandable.sd-element--collapsed > .sd-element__header {
+  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
+  transition-duration: var(--sjs-collapse-move-out-duration, 250ms);
+  transition-delay: var(--sjs-collapse-move-out-delay, 0ms);
+}
+.sd-elemenet--expandable--animating.sd-element--expandable.sd-element--collapsed > .sd-element__header .sd-element__title:before {
+  transition-duration: var(--sjs-collapse-move-out-duration, 250ms);
+  transition-delay: var(--sjs-collapse-move-out-delay, 0ms);
+}
+.sd-elemenet--expandable--animating.sd-element--expandable.sd-element--complex > .sd-element__header--location-top:after {
+  display: block;
+  animation-name: fadeIn;
+  animation-fill-mode: forwards;
+  animation-duration: var(--sjs-transition-duration, 150ms);
+}
+.sd-elemenet--expandable--animating.sd-element--expandable.sd-element--complex.sd-element--collapsed .sd-element__header--location-top:after {
+  animation-direction: reverse;
+}
+
 .sd-question {
   position: relative;
 }
@@ -2066,6 +2321,8 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 .sd-element--with-frame.sd-question--error-bottom {
   padding-bottom: 0;
+  display: flex;
+  flex-direction: column;
 }
 .sd-element--with-frame.sd-question--error-bottom > .sd-question__content {
   margin-bottom: var(--sd-base-padding);
@@ -2205,8 +2462,8 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 .sd-element--complex > .sd-element__header:after {
   content: " ";
   display: block;
-  position: relative;
   height: 1px;
+  position: relative;
   background: var(--sjs-border-light, var(--border-light, #eaeaea));
   bottom: 0;
 }
@@ -2513,6 +2770,13 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   padding-top: calc(0.5 * var(--sd-base-vertical-padding));
 }
 
+.sd-panel--as-page .sd-panel__footer {
+  padding: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 0;
+  margin: 0;
+  border: none;
+  width: initial;
+}
+
 .sd-panel__content {
   padding-top: var(--sd-base-padding);
 }
@@ -2521,6 +2785,10 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   padding-bottom: var(--sd-base-padding);
 }
 
+.sd-panel__content {
+  --animation-padding-top: var(--sd-base-padding);
+}
+
 .sjs_sp_placeholder {
   --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px)));
   color: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
@@ -3122,32 +3390,39 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   flex-direction: row;
   width: 100%;
   box-sizing: border-box;
+  --animate-margin: var(--sd-base-vertical-padding);
   margin-top: var(--sd-base-vertical-padding);
 }
 
 .sd-row.sd-page__row {
   margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  --animate-margin: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sd-page__row.sd-row--compact {
   margin-top: var(--sd-base-vertical-padding);
+  --animate-margin: var(--sd-base-vertical-padding);
 }
 
 .sd-row:first-of-type {
   margin-top: 0;
+  --animate-margin: 0;
 }
 
 .sd-page__title ~ .sd-row.sd-page__row:not(.sd-row--compact),
 .sd-page__description ~ .sd-row.sd-page__row:not(.sd-row--compact) {
   margin-top: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  --animate-margin: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .sd-page__title ~ .sd-page__row.sd-row--compact,
 .sd-page__description ~ .sd-page__row.sd-row--compact {
   margin-top: var(--sd-base-vertical-padding);
+  --animate-margin: var(--sd-base-vertical-padding);
 }
 
 .sd-row.sd-page__row:not(.sd-row--compact) ~ .sd-row.sd-page__row:not(.sd-row--compact) {
   margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  --animate-margin: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sd-row--multiple {
@@ -3158,6 +3433,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
 }
 .sd-row--multiple > div {
   box-sizing: border-box;
+  --animation-padding-left: calcSize(2);
   padding-left: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   display: flex;
   align-items: stretch;
@@ -3167,10 +3443,12 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   row-gap: var(--sd-base-vertical-padding);
 }
 .sd-panel:not(.sd-panel--as-page) .sd-row--multiple > div {
+  --animation-padding-left: var(--sd-base-padding);
   padding-left: var(--sd-base-padding);
 }
 
 .sd-row--multiple.sd-row--compact > div {
+  --animation-padding-left: var(--sd-base-padding);
   padding-left: var(--sd-base-padding);
 }
 
@@ -3196,6 +3474,42 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
   white-space: nowrap;
 }
 
+@keyframes marginFadeIn {
+  from {
+    margin-top: 0;
+  }
+  to {
+    margin-top: var(--animate-margin);
+  }
+}
+.sd-row--fade-in {
+  animation-fill-mode: forwards;
+  animation-name: fadeIn, moveIn, marginFadeIn;
+  min-height: 0 !important;
+  opacity: 0;
+  animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
+  animation-delay: var(--sjs-row-fade-in-delay, 150ms), 0s, 0s;
+  animation-duration: var(--sjs-row-fade-in-duration, 100ms), var(--sjs-row-move-in-duration, 200ms), var(--sjs-row-move-in-duration, 200ms);
+}
+
+.sd-row--fade-out {
+  animation-name: fadeIn, moveIn, marginFadeIn;
+  animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
+  animation-fill-mode: forwards;
+  animation-direction: reverse;
+  min-height: 0 !important;
+  animation-delay: 0s, var(--sjs-row-move-out-delay, 0ms), var(--sjs-row-move-out-delay, 0ms);
+  animation-duration: var(--sjs-row-fade-out-duration, 100ms), var(--sjs-row-move-out-duration, 250ms), var(--sjs-row-move-out-duration, 250ms);
+}
+
+.sd-row--fade-in .sd-element-wrapper--fade-in {
+  animation: none;
+}
+
+.sd-row--fade-out .sd-element-wrapper--fade-out {
+  animation: none;
+}
+
 .sd-title {
   display: block;
   font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
@@ -4221,6 +4535,20 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   margin-inline-start: calc(-0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
+.sv-dropdown-popup.sv-single-select-list.sv-popup--animate-leave .sd-list__item.sv-list__item--selected .sv-list__item-body {
+  font-weight: normal;
+  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
+  background-color: transparent;
+}
+
+.sv-dropdown-popup.sv-popup--dropdown.sv-popup--top .sv-popup__container {
+  transform: translateY(-2px);
+}
+
+.sv-dropdown-popup.sv-popup--dropdown.sv-popup--bottom .sv-popup__container {
+  transform: translateY(2px);
+}
+
 [dir=rtl] .sd-dropdown,
 [style*="direction:rtl"] .sd-dropdown,
 [style*="direction: rtl"] .sd-dropdown {
@@ -4776,12 +5104,11 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
   box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
   border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   transition-duration: 0.2s;
-  transition-property: margin-left, transform;
+  transition-property: margin-left;
   transition-timing-function: linear;
   color: var(--sjs-primary-backcolor, var(--primary, #19b394));
   font-weight: 600;
   margin-left: 0%;
-  transform: translateX(0);
   z-index: 2;
 }
 .sd-boolean__thumb .sv-string-viewer.sv-string-viewer--multiline {
@@ -4789,17 +5116,14 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
 }
 
 .sd-boolean--checked .sd-boolean__thumb {
-  margin-left: 100%;
-  transform: translateX(-100%);
+  margin-left: 50%;
 }
 
 .sd-boolean--exchanged .sd-boolean__thumb {
-  margin-left: 100%;
-  transform: translateX(-100%);
+  margin-left: calc(50% + 0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .sd-boolean--exchanged.sd-boolean--checked .sd-boolean__thumb {
   margin-left: 0%;
-  transform: translateX(0);
 }
 .sd-boolean--exchanged.sd-boolean:not(.sd-boolean--checked):not(sd-boolean--indeterminate) .sd-boolean__label--false, .sd-boolean--exchanged.sd-boolean.sd-boolean--checked .sd-boolean__label--true {
   color: var(--sjs-font-editorfont-placeholdercolor, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
@@ -6244,21 +6568,22 @@ svg.sd-action--icon {
   display: block;
   content: "";
   height: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  background-color: var(--sjs-navigation-default, #bcbcbc);
+  background-color: var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45));
+  opacity: 0.5;
   position: absolute;
   bottom: calc(1.125 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   right: calc(50% + 4px);
   width: calc(100% - 4px);
   pointer-events: none;
 }
-.sd-progress-buttons__list li:after {
+.sd-progress-buttons__list li .sd-progress-buttons__button {
+  position: relative;
   display: flex;
   content: attr(data-page-number);
   width: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   height: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   margin: calc(0.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   border: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid transparent;
-  background-color: var(--sjs-navigation-default, #bcbcbc);
   border-radius: 50%;
   align-self: center;
   z-index: 1;
@@ -6268,29 +6593,70 @@ svg.sd-action--icon {
   justify-content: center;
   color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
 }
-.sd-progress-buttons__list li:hover:after {
+.sd-progress-buttons__list li .sd-progress-buttons__button .sd-progress-buttons__button-background {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: calc(-0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  left: calc(-0.5 * (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;
+  width: 100%;
+  height: 100%;
+  top: calc(-0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  left: calc(-0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  background-color: var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45));
+  opacity: 0.5;
+  z-index: -1;
+  border: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid transparent;
+  border-radius: 50%;
+}
+.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))));
   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));
   background-color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
 }
+.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))));
+  border: calc(0.75 * (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));
+  opacity: 1;
+}
 .sd-progress-buttons__list .sd-progress-buttons__list-element--passed:not(:first-child) > .sd-progress-buttons__connector {
   background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
+  opacity: 1;
 }
-.sd-progress-buttons__list .sd-progress-buttons__list-element--passed:after {
+.sd-progress-buttons__list .sd-progress-buttons__list-element--passed .sd-progress-buttons__button {
   background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
+.sd-progress-buttons__list .sd-progress-buttons__list-element--passed .sd-progress-buttons__button .sd-progress-buttons__button-content {
+  background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
+  opacity: 1;
+}
 .sd-progress-buttons__list .sd-progress-buttons__list-element--current:not(:first-child) > .sd-progress-buttons__connector {
   background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
+  opacity: 1;
 }
-.sd-progress-buttons__list .sd-progress-buttons__list-element--current:after {
+.sd-progress-buttons__list .sd-progress-buttons__list-element--current .sd-progress-buttons__button {
   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))));
 }
+.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));
+  background-color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
+  opacity: 1;
+}
 
 .sd-progress-buttons__page-title {
   display: flex;
@@ -6345,11 +6711,11 @@ svg.sd-action--icon {
   right: calc(50% + 8px);
   width: calc(100% - 8px);
 }
-.sd-progress-buttons--numbered .sd-progress-buttons__list li:after {
+.sd-progress-buttons--numbered .sd-progress-buttons__list li .sd-progress-buttons__button {
   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:hover:after {
+.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))));
 }