PR: Creator V2. Mobile toolbar - 2

packages/survey-creator-core/src/components/tabs/designer.scss

@@ -202,7 +202,6 @@ svc-tab-designer {
   flex-direction: column;
 
   .sv-action-bar-separator {
-    background: var(--ctr-separator-color, $border);
     height: var(--ctr-separator-width, 1px);
     width: var(--ctr-page-navigator-button-icon-width, calcSize(1));
     padding: 0px var(--ctr-separator-margin-vertical-small, calcSize(1));
@@ -213,4 +212,8 @@ svc-tab-designer {
   .sv-action__content {
     flex-direction: column;
   }
+}
+
+.sv-action-bar-separator {
+  background: var(--ctr-separator-color, $border);
 }

packages/survey-creator-core/src/utils/layout.scss

@@ -150,6 +150,7 @@
   //pressed state
   .sv-action-bar-item:not(.sv-action-bar-item--pressed):active:enabled {
     opacity: var(--ctr-menu-toolbar-button-opacity-pressed, 0.5);
+    background-color: var(--ctr-menu-toolbar-button-background-color-pressed, $background-dim);
   }
 
   //disabled state
@@ -185,14 +186,41 @@
       width: 100%;
 
       height: calc(6 * #{$base-unit});
-      background: $background;
-      border-top: 1px solid $border;
+      background:  var(--ctr-menu-background-color, $background);
+      border-top: var(--ctr-menu-border-width, 1px) solid var(--ctr-menu-border-color, $border);
       box-sizing: border-box;
     }
 
+    .sv-action-bar-item {
+      border-radius: var(--ctr-menu-toolbar-button-corner-radius, calcSize(0.25));
+      padding: var(--ctr-menu-toolbar-button-padding-top, calcSize(1)) var(--ctr-menu-toolbar-button-padding-right, calcSize(1)) var(--ctr-menu-toolbar-button-padding-bottom, calcSize(1)) var(--ctr-menu-toolbar-button-padding-left, calcSize(1));
+    }
+
+    .sv-action-bar-item:not(.sv-action-bar-item--pressed):hover:enabled,
+    .sv-action-bar-item:not(.sv-action-bar-item--pressed):focus:enabled {
+      background-color: var(--ctr-menu-toolbar-button-background-color-hovered, $background-dim);
+    }
+
+    .sv-action-bar-item--active {
+      background-color: var(--ctr-menu-toolbar-button-background-color-selected, $primary-light);
+
+      &.sv-action-bar-item:not(.sv-action-bar-item--pressed):hover:enabled,
+      &.sv-action-bar-item:not(.sv-action-bar-item--pressed):focus:enabled {
+        background-color: var(--ctr-menu-toolbar-button-background-color-selected, $primary-light);
+      }
+
+      .sv-action-bar-item__icon use {
+        fill: var(--ctr-menu-toolbar-button-icon-color-selected, $primary);
+      }
+    }
+
     .sv-action-bar-item__icon {
       width: var(--ctr-menu-toolbar-button-icon-width, calcSize(3));
       height: var(--ctr-menu-toolbar-button-icon-height, calcSize(3));
+
+      use {
+        fill: var(--ctr-menu-toolbar-button-icon-color, $foreground-light);
+      }
     }
   }
 }