survey-creator-core 1.11.5 → 1.11.7

package/survey-creator-core.css

@@ -1,5 +1,5 @@
 /*!
- * SurveyJS Creator v1.11.5
+ * SurveyJS Creator v1.11.7
  * (c) 2015-2024 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
@@ -225,7 +225,7 @@
 }
 
 /*# sourceMappingURL=fonts.fontless.css.map*//*!
- * SurveyJS Creator v1.11.5
+ * SurveyJS Creator v1.11.7
  * (c) 2015-2024 Devsoft Baltic OÜ - http://surveyjs.io/
  * Github: https://github.com/surveyjs/survey-creator
  * License: https://surveyjs.io/Licenses#SurveyCreator
@@ -1445,6 +1445,9 @@ svc-tab-designer {
 .svc-tab-designer .sd-title {
   display: flex;
 }
+.svc-tab-designer .sd-title.sd-element__title--hidden {
+  display: none;
+}
 .svc-tab-designer .sd-container-modern {
   min-width: calc(70 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   width: 100%;
@@ -1521,6 +1524,9 @@ svc-tab-designer {
   width: calc(100% - 6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   margin: 0 calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
+.svc-creator--mobile .svc-question__drag-area {
+  height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
 .svc-creator--mobile .svc-question__content--selected .svc-rating-question-controls {
   bottom: calc(10 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
@@ -1892,8 +1898,7 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
 }
 
 .svc-item__banner {
-  position: absolute;
-  top: 0;
+  position: relative;
   max-width: 0;
   overflow: hidden;
   height: 100%;
@@ -2337,6 +2342,13 @@ svc-page-navigator-item,
   padding: 0;
   opacity: 0;
   z-index: 20;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  background-color: var(--sjs-general-backcolor, var(--background, #fff));
+  border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
+  transition: max-width 0.1s ease-in-out, padding 0.2s ease-in-out;
 }
 .svc-page-navigator-item__banner .svc-page-navigator-item__dot {
   position: absolute;
@@ -2507,6 +2519,30 @@ svc-page {
   padding: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   height: auto;
 }
+
+.svc-page__add-new-question .sv-list__item.sv-list__item--disabled,
+.svc-question__adorner .sv-list__item.sv-list__item--disabled {
+  opacity: 0.25;
+  pointer-events: none;
+}
+.svc-page__add-new-question .sv-popup--overlay .sv-list-item__marker-icon,
+.svc-question__adorner .sv-popup--overlay .sv-list-item__marker-icon {
+  display: none;
+}
+.svc-page__add-new-question .sv-popup--overlay .sv-list__item-body,
+.svc-question__adorner .sv-popup--overlay .sv-list__item-body {
+  pointer-events: none;
+}
+.svc-page__add-new-question .sv-popup--overlay .sv-list__item.sv-list__item--selected.sv-list__item--group > .sv-list__item-body,
+.svc-question__adorner .sv-popup--overlay .sv-list__item.sv-list__item--selected.sv-list__item--group > .sv-list__item-body {
+  background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
+  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
+  font-weight: 600;
+}
+.svc-page__add-new-question .sv-popup--overlay .sv-list__item.sv-list__item--selected.sv-list__item--group > .sv-list__item-body use,
+.svc-question__adorner .sv-popup--overlay .sv-list__item.sv-list__item--selected.sv-list__item--group > .sv-list__item-body use {
+  fill: var(--sjs-general-backcolor, var(--background, #fff));
+}
 .svc-row {
   width: 100%;
   position: relative;
@@ -2733,7 +2769,8 @@ svc-question {
   pointer-events: all;
 }
 
-.svc-question__content > div {
+.svc-question__content > div,
+.svc-question__placeholders > div {
   overflow: visible;
 }
 
@@ -2772,11 +2809,11 @@ svc-question {
   padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svc-question__content-actions .sv-action--convertTo .sv-action-bar-item__title {
+  display: inline-block;
+  justify-content: left;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  display: inline-block;
-  justify-content: left;
 }
 .svc-question__content-actions .sv-action--convertTo .sv-action-bar-item__title::after {
   content: " ";
@@ -2855,12 +2892,11 @@ svc-question {
 }
 
 .svc-dragged-element-shortcut {
-  height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: auto;
   border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   background-color: var(--sjs-general-backcolor, var(--background, #fff));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
-  padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  padding-right: calc(3.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   cursor: grabbing;
   position: absolute;
   z-index: 1000;
@@ -2890,8 +2926,16 @@ svc-question {
   font-weight: 600;
   font-size: calc(0.75 * var(--small-bold-font-size));
   line-height: var(--sjs-font-size, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
-  margin-left: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  line-height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
+.svc-dragged-element-shortcut--has-icon {
+  padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-right: calc(3.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.svc-dragged-element-shortcut--has-icon .svc-dragged-element-shortcut__text {
   line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-inline-start: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .svc-dragged-element-shortcut__icon {
@@ -3030,21 +3074,60 @@ svc-question .sv-action-bar,
   box-shadow: none;
 }
 
-.svc-hovered > .svc-question__content > .svc-question__drag-area {
+.svc-hovered > .svc-question__content > .svc-question__drag-area > .svc-question__drag-element {
   visibility: visible;
 }
 
-.svc-question__content.svc-question__content--selected > .svc-question__drag-area {
+.svc-question__content.svc-question__content--selected > .svc-question__drag-area > .svc-question__drag-element {
   visibility: visible;
   z-index: 1;
 }
 
+.svc-question__adorner--collapsed .svc-question__content > * {
+  display: none;
+}
+.svc-question__adorner--collapsed .svc-question__content .svc-question__drag-area {
+  display: flex;
+}
+.svc-question__adorner--collapsed .svc-question__content .sd-element {
+  display: block;
+}
+.svc-question__adorner--collapsed .svc-question__content .sd-element > *:not(.sd-element__header) {
+  display: none;
+}
+.svc-question__adorner--collapsed .svc-question__content .sd-element .sd-element__header > *:not(.sd-element__title) {
+  display: none;
+}
+.svc-question__adorner--collapsed .svc-question__content .sd-element .sd-element__header .sd-element__title,
+.svc-question__adorner--collapsed .svc-question__content .sd-element .sd-element__header .sd-title.sd-element__title.sd-element__title--hidden {
+  display: block;
+}
+
+.svc-question__adorner--collapsed .svc-question__content {
+  flex-grow: 0;
+  padding-bottom: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.svc-question__adorner--collapsed .svc-question__content .sd-element__header,
+.svc-question__adorner--collapsed .svc-question__content .sd-element--complex > .sd-element__header {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.svc-creator--mobile .svc-question__top-actions {
+  padding: 0;
+}
+.svc-creator--mobile .svc-question__adorner--collapsed .svc-question__content {
+  padding-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.svc-creator--mobile .svc-question__adorner--collapsed .svc-question__content--selected {
+  padding-bottom: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+
 .svc-question__drag-area {
   position: absolute;
   cursor: move;
   top: 0;
   left: 0;
-  visibility: hidden;
   height: calc(3.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   width: 100%;
   display: flex;
@@ -3056,6 +3139,7 @@ svc-question .sv-action-bar,
   width: 100%;
   height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   opacity: 0.5;
+  visibility: hidden;
 }
 .svc-question__drag-element use {
   fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
@@ -3367,6 +3451,31 @@ svc-question .sv-action-bar,
 .svc-question__adorner .sv-ranking--select-to-rank-vertical .sv-ranking__container--from .sv-ranking__container-placeholder {
   padding-bottom: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
+
+.svc-question__top-actions {
+  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  position: absolute;
+  top: 0;
+  right: 0;
+  visibility: hidden;
+}
+.svc-question__top-actions .sv-action-bar-item {
+  margin: 0;
+  padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  opacity: 0.5;
+  height: 24px;
+}
+.svc-question__top-actions .sv-action-bar-item:hover, .svc-question__top-actions .sv-action-bar-item:focus {
+  opacity: initial;
+}
+.svc-question__top-actions .sv-action-bar-item use {
+  fill: var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45));
+}
+
+.svc-question__adorner--collapse-onhover.svc-hovered .svc-question__top-actions,
+.svc-question__adorner--collapse-always .svc-question__top-actions {
+  visibility: visible;
+}
 .svc-question__dropdown-choices {
   margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
@@ -4292,7 +4401,7 @@ svc-question .sv-action-bar,
   align-items: center;
   z-index: 20;
   outline: none;
-  padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding: 0 calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svc-toolbox__item sv-svg-icon,
 .svc-toolbox__item .sv-svg-icon {
@@ -4300,8 +4409,14 @@ svc-question .sv-action-bar,
   height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
+.svc-toolbox__tool sv-svg-icon,
+.svc-toolbox__tool .sv-svg-icon {
+  pointer-events: none;
+}
+
 .svc-toolbox__item-container {
   outline: none;
+  padding: var(--sjs-base-unit, var(--base-unit, 8px)) 0;
 }
 .svc-toolbox__item-container .sv-svg-icon use {
   fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
@@ -4313,7 +4428,8 @@ svc-question .sv-action-bar,
   box-sizing: border-box;
   align-items: center;
   margin-right: 0;
-  margin-left: calc(-1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-left: calc(-4.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .svc-toolbox__item-banner .svc-toolbox__item-icon {
   position: absolute;
@@ -4328,31 +4444,46 @@ svc-question .sv-action-bar,
   fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 
-.svc-creator__toolbox--right .svc-toolbox__item:hover .svc-toolbox__item-banner,
+.svc-creator__toolbox--right .svc-toolbox__tool:hover .svc-toolbox__item-banner,
+.svc-creator__toolbox--right .svc-toolbox__tool--hovered .svc-toolbox__item-banner,
 .svc-creator__toolbox--right .svc-toolbox__item:focus .svc-toolbox__item-banner,
-[dir=rtl] .svc-toolbox__item:hover .svc-toolbox__item-banner,
+[dir=rtl] .svc-toolbox__tool:hover .svc-toolbox__item-banner,
+[dir=rtl] .svc-toolbox__tool--hovered .svc-toolbox__item-banner,
 [dir=rtl] .svc-toolbox__item:focus .svc-toolbox__item-banner,
-[style*="direction:rtl"] .svc-toolbox__item:hover .svc-toolbox__item-banner,
+[style*="direction:rtl"] .svc-toolbox__tool:hover .svc-toolbox__item-banner,
+[style*="direction:rtl"] .svc-toolbox__tool--hovered .svc-toolbox__item-banner,
 [style*="direction:rtl"] .svc-toolbox__item:focus .svc-toolbox__item-banner,
-[style*="direction: rtl"] .svc-toolbox__item:hover .svc-toolbox__item-banner,
+[style*="direction: rtl"] .svc-toolbox__tool:hover .svc-toolbox__item-banner,
+[style*="direction: rtl"] .svc-toolbox__tool--hovered .svc-toolbox__item-banner,
 [style*="direction: rtl"] .svc-toolbox__item:focus .svc-toolbox__item-banner {
-  flex-direction: row-reverse;
   padding-right: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   padding-left: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
-  margin-left: 0;
-  margin-right: 0;
+  margin-left: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-right: calc(-3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  flex-direction: row-reverse;
   transform: translateX(calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))));
 }
-.svc-creator__toolbox--right .svc-toolbox__item:hover .svc-toolbox__item-banner .svc-toolbox__item-title,
+.svc-creator__toolbox--right .svc-toolbox__tool:hover .svc-toolbox__item-banner .svc-toolbox__item-title,
+.svc-creator__toolbox--right .svc-toolbox__tool--hovered .svc-toolbox__item-banner .svc-toolbox__item-title,
 .svc-creator__toolbox--right .svc-toolbox__item:focus .svc-toolbox__item-banner .svc-toolbox__item-title,
-[dir=rtl] .svc-toolbox__item:hover .svc-toolbox__item-banner .svc-toolbox__item-title,
+[dir=rtl] .svc-toolbox__tool:hover .svc-toolbox__item-banner .svc-toolbox__item-title,
+[dir=rtl] .svc-toolbox__tool--hovered .svc-toolbox__item-banner .svc-toolbox__item-title,
 [dir=rtl] .svc-toolbox__item:focus .svc-toolbox__item-banner .svc-toolbox__item-title,
-[style*="direction:rtl"] .svc-toolbox__item:hover .svc-toolbox__item-banner .svc-toolbox__item-title,
+[style*="direction:rtl"] .svc-toolbox__tool:hover .svc-toolbox__item-banner .svc-toolbox__item-title,
+[style*="direction:rtl"] .svc-toolbox__tool--hovered .svc-toolbox__item-banner .svc-toolbox__item-title,
 [style*="direction:rtl"] .svc-toolbox__item:focus .svc-toolbox__item-banner .svc-toolbox__item-title,
-[style*="direction: rtl"] .svc-toolbox__item:hover .svc-toolbox__item-banner .svc-toolbox__item-title,
+[style*="direction: rtl"] .svc-toolbox__tool:hover .svc-toolbox__item-banner .svc-toolbox__item-title,
+[style*="direction: rtl"] .svc-toolbox__tool--hovered .svc-toolbox__item-banner .svc-toolbox__item-title,
 [style*="direction: rtl"] .svc-toolbox__item:focus .svc-toolbox__item-banner .svc-toolbox__item-title {
-  padding-left: var(--sjs-base-unit, var(--base-unit, 8px));
   padding-right: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-left: var(--sjs-base-unit, var(--base-unit, 8px));
+}
+.svc-creator__toolbox--right .svc-toolbox__item-banner,
+[dir=rtl] .svc-toolbox__item-banner,
+[style*="direction:rtl"] .svc-toolbox__item-banner,
+[style*="direction: rtl"] .svc-toolbox__item-banner {
+  margin-right: calc(-4.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-left: 0;
 }
 .svc-creator__toolbox--right .svc-toolbox__item,
 [dir=rtl] .svc-toolbox__item,
@@ -4372,6 +4503,12 @@ svc-question .sv-action-bar,
 [style*="direction: rtl"] .svc-toolbox__category {
   align-items: flex-end;
 }
+.svc-creator__toolbox--right .svc-toolbox__tool,
+[dir=rtl] .svc-toolbox__tool,
+[style*="direction:rtl"] .svc-toolbox__tool,
+[style*="direction: rtl"] .svc-toolbox__tool {
+  align-items: flex-end;
+}
 .svc-creator__toolbox--right .svc-toolbox__item-banner .svc-toolbox__item-icon,
 [dir=rtl] .svc-toolbox__item-banner .svc-toolbox__item-icon,
 [style*="direction:rtl"] .svc-toolbox__item-banner .svc-toolbox__item-icon,
@@ -4394,19 +4531,36 @@ svc-question .sv-action-bar,
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 
-.svc-toolbox__item:hover .svc-toolbox__item-banner,
+.svc-toolbox__tool:hover .svc-toolbox__item-banner,
+.svc-toolbox__tool--hovered .svc-toolbox__item-banner,
 .svc-toolbox__item:focus .svc-toolbox__item-banner {
   max-width: calc(100 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   padding-left: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   padding-right: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin-right: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   opacity: 1;
 }
-.svc-toolbox__item:hover .svc-toolbox__item-banner .svc-toolbox__item-title,
+.svc-toolbox__tool:hover .svc-toolbox__item-banner .svc-toolbox__item-title,
+.svc-toolbox__tool--hovered .svc-toolbox__item-banner .svc-toolbox__item-title,
 .svc-toolbox__item:focus .svc-toolbox__item-banner .svc-toolbox__item-title {
   padding-left: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
+.svc-toolbox__tool--disabled {
+  pointer-events: none;
+}
+.svc-toolbox__tool--disabled .sv-svg-icon {
+  opacity: var(--ctr-toolbox-item-icon-opacity-disabled, 0.15);
+}
+.svc-toolbox__tool--disabled .sv-svg-icon use {
+  fill: var(--ctr-toolbox-item-icon-color-disabled, rgba(0, 0, 0, 0.91));
+}
+.svc-toolbox__tool--disabled .svc-toolbox__item-title {
+  opacity: var(--ctr-toolbox-item-text-opacity-disabled, 0.25);
+}
+
 .svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__item:not(.sv-dots):focus,
+.svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__tool--hovered > .sv-action__content > .svc-toolbox__item:not(.sv-dots),
 .svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__item:not(.sv-dots):hover {
   overflow: hidden;
   border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -4415,10 +4569,12 @@ svc-question .sv-action-bar,
   transition: 0.1s ease-in-out;
 }
 .svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__item:not(.sv-dots):focus .svc-toolbox__item-title,
+.svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__tool--hovered > .sv-action__content > .svc-toolbox__item:not(.sv-dots) .svc-toolbox__item-title,
 .svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__item:not(.sv-dots):hover .svc-toolbox__item-title {
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
 }
 .svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__item:not(.sv-dots):focus .sv-svg-icon use,
+.svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__tool--hovered > .sv-action__content > .svc-toolbox__item:not(.sv-dots) .sv-svg-icon use,
 .svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__item:not(.sv-dots):hover .sv-svg-icon use {
   fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
@@ -4452,19 +4608,69 @@ svc-question .sv-action-bar,
 }
 
 .svc-toolbox .svc-toolbox__tool--pressed .svc-toolbox__item:not(.sv-dots),
-.svc-toolbox .svc-toolbox__tool--pressed .svc-toolbox__item:not(.sv-dots):hover,
-.svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__tool--pressed .svc-toolbox__item:not(.sv-dots),
-.svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__tool--pressed .svc-toolbox__item:not(.sv-dots):hover {
+.svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__tool--pressed .svc-toolbox__item:not(.sv-dots) {
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
   opacity: 0.5;
 }
 .svc-toolbox .svc-toolbox__tool--pressed .svc-toolbox__item:not(.sv-dots) .sv-svg-icon use,
-.svc-toolbox .svc-toolbox__tool--pressed .svc-toolbox__item:not(.sv-dots):hover .sv-svg-icon use,
-.svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__tool--pressed .svc-toolbox__item:not(.sv-dots) .sv-svg-icon use,
-.svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__tool--pressed .svc-toolbox__item:not(.sv-dots):hover .sv-svg-icon use {
+.svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__tool--pressed .svc-toolbox__item:not(.sv-dots) .sv-svg-icon use {
   fill: var(--sjs-general-forecolor, var(--foreground, #161616));
   opacity: 0.5;
 }
+.svc-toolbox .svc-toolbox__tool--pressed .svc-toolbox__item.svc-toolbox__item-subtype,
+.svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__tool--pressed .svc-toolbox__item.svc-toolbox__item-subtype {
+  opacity: unset;
+}
+
+.toolbox-subtypes .sv-popup__container {
+  box-shadow: unset;
+  background: unset;
+}
+.toolbox-subtypes .sv-list__container {
+  flex-wrap: wrap;
+  column-gap: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.toolbox-subtypes .sv-popup__shadow {
+  box-shadow: unset;
+}
+.toolbox-subtypes .sv-popup__body-content {
+  background: unset;
+  padding: 0;
+}
+.toolbox-subtypes .sv-popup__scrolling-content {
+  padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  overflow: visible;
+}
+.toolbox-subtypes .sv-list__item:hover > .sv-list__item-body,
+.toolbox-subtypes .sv-list__item:focus > .sv-list__item-body {
+  background-color: unset;
+}
+.toolbox-subtypes .svc-toolbox__item.svc-toolbox__item-subtype {
+  opacity: var(--ctr-toolbox-item-opacity-submenu, 0.85);
+  overflow: hidden;
+  border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  background: var(--ctr-toolbox-item-background-color-submenu, var(--sjs-layer-2-background-500, var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9))));
+  box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15)), var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
+  transition: 0.1s ease-in-out;
+  padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+}
+.toolbox-subtypes .svc-toolbox__item.svc-toolbox__item-subtype .svc-toolbox__item-title {
+  color: var(--ctr-toolbox-item-text-color-submenu, var(--sjs-layer-2-foreground-100, rgba(0, 0, 0, 0.9098039216)));
+}
+.toolbox-subtypes .svc-toolbox__tool:hover .svc-toolbox__item-subtype,
+.toolbox-subtypes .svc-toolbox__tool--hovered .svc-toolbox__item-subtype,
+.toolbox-subtypes .svc-toolbox__item:focus .svc-toolbox__item-subtype {
+  background: var(--ctr-toolbox-item-background-color-hovered, var(--sjs-layer-1-background-500, var(--sjs-general-backcolor, var(--background, #fff))));
+  opacity: unset;
+}
+.toolbox-subtypes .svc-toolbox__tool:hover .svc-toolbox__item-subtype .svc-toolbox__item-title,
+.toolbox-subtypes .svc-toolbox__tool--hovered .svc-toolbox__item-subtype .svc-toolbox__item-title,
+.toolbox-subtypes .svc-toolbox__item:focus .svc-toolbox__item-subtype .svc-toolbox__item-title {
+  color: var(--ctr-toolbox-item-text-color-hovered, var(--sjs-layer-1-foreground-100, var(--sjs-general-forecolor, var(--foreground, #161616))));
+}
+.toolbox-subtypes .svc-toolbox__item-title {
+  padding: 0;
+}
 svc-toolbox {
   display: flex;
   flex-direction: column;
@@ -4531,6 +4737,7 @@ svc-toolbox {
 .svc-toolbox__tool.svc-toolbox__search-button {
   z-index: 20;
   justify-content: center;
+  align-items: center;
 }
 .svc-toolbox__tool.svc-toolbox__search-button .sv-dots__item {
   margin-top: 0;
@@ -4665,6 +4872,7 @@ svc-toolbox {
 
 .svc-toolbox__tool:not(.sv-dots) {
   display: flex;
+  flex-direction: column;
   width: auto;
 }
 
@@ -4677,7 +4885,7 @@ svc-toolbox {
   height: 1px;
   width: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   background-color: var(--sjs-border-default, var(--border, #d6d6d6));
-  margin: var(--sjs-base-unit, var(--base-unit, 8px)) calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  margin: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px));
 }
 
 .svc-toolbox--filtering .svc-toolbox__category-separator {
@@ -4729,7 +4937,7 @@ svc-toolbox {
 }
 .svc-toolbox__tool .sv-action__content {
   display: flex;
-  padding-top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  padding-block-start: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
   flex-direction: column;
   align-items: flex-start;
 }
@@ -5249,7 +5457,7 @@ input.spg-input:read-only::placeholder {
   height: auto;
 }
 .spg-input-container--multiline sv-ng-question-comment {
-  height: calc(9 * (var(--sjs-base-unit, var(--base-unit, 8px))));
+  display: flex;
 }
 .spg-input-container--multiline .spg-input-container__input {
   box-sizing: border-box;