Issue #3381318: Adjust UI of Frontend Editing links

css/frontend_editing.css

 /* Styles for editing container */
+body.path-frontend-editing {
+  --gin-toolbar-x-offset: 0;
+  --gin-toolbar-y-offset: 0;
+}
+
 .editing-container {
   height: 100%;
   position: fixed;
@@ -6,7 +11,7 @@
   right: 0;
   z-index: 1000;
   background-color: #f5f7fb;
-  padding: 2rem 1rem 0;
+  padding: 2.5rem 1rem 0;
   box-shadow: -0.2rem 0 1rem rgb(116 116 116 / 40%);
   width: 30%;
   min-width: 300px;
@@ -20,12 +25,12 @@
   animation-duration: 1.8s;
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
-  animation-name: placeHolderShimmer;
+  animation-name: placeholder-shimmer;
   animation-timing-function: linear;
   background: linear-gradient(to right, #f5f7fb 8%, #e7e7e7 38%, #f5f7fb 54%);
   background-size: 1000px 640px;
 }
-@keyframes placeHolderShimmer {
+@keyframes placeholder-shimmer {
   0% {
     background-position: -468px 0;
   }
@@ -43,7 +48,7 @@ button.editing-container__close {
   height: 24px;
   opacity: 0.3;
   cursor: pointer;
-  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>');
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iIzIzMjIyMiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS4yOTMgNS4yOTNhMSAxIDAgMCAxIDEuNDE0IDBMMTIgMTAuNTg2bDUuMjkzLTUuMjkzYTEgMSAwIDEgMSAxLjQxNCAxLjQxNEwxMy40MTQgMTJsNS4yOTMgNS4yOTNhMSAxIDAgMCAxLTEuNDE0IDEuNDE0TDEyIDEzLjQxNGwtNS4yOTMgNS4yOTNhMSAxIDAgMCAxLTEuNDE0LTEuNDE0TDEwLjU4NiAxMiA1LjI5MyA2LjcwN2ExIDEgMCAwIDEgMC0xLjQxNFoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==");
 }
 
 /* Styles for width button */
@@ -80,6 +85,7 @@ button.editing-container__toggle {
   width: 32px;
   height: 32px;
   visibility: hidden;
+  order: 100;
 }
 
 /* Style container of editable elements */
@@ -88,62 +94,121 @@ button.editing-container__toggle {
 }
 
 /* Styled for editing action */
-.frontend-editing--outline {
-  outline: 2px solid #d6d6d6;
-  z-index: 1;
-}
-
 .frontend-editing-actions {
+  display: flex;
   position: absolute;
   top: 0;
   left: 0;
 }
 
+.frontend-editing--enabled .frontend-editing:hover {
+  outline: 4px solid #dddcdc;
+  z-index: 1;
+}
+
+.frontend-editing:hover .frontend-editing__action {
+  opacity: 1;
+}
+
+.frontend-editing-actions .ajax-progress {
+  display: inline-flex;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  /* Ensure AJAX throbber is always last item */
+  order: 6;
+  opacity: 1;
+  background: #e8e8e8;
+  border-left: 1px solid #dddcdc;
+}
+
+.frontend-editing-actions .ajax-progress .throbber {
+  display: block;
+  width: 100%;
+  padding: 0;
+  opacity: 0.4;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 24 24'%3E%3Cstyle%3E@keyframes spinner%7Bto%7Btransform:rotate(360deg)%7D%7D%3C/style%3E%3Cpath d='M12 4a8 8 0 0 1 7.89 6.7 1.53 1.53 0 0 0 1.49 1.3 1.5 1.5 0 0 0 1.48-1.75 11 11 0 0 0-21.72 0A1.5 1.5 0 0 0 2.62 12a1.53 1.53 0 0 0 1.49-1.3A8 8 0 0 1 12 4Z' style='transform-origin:center;animation:spinner .75s infinite linear'/%3E%3C/svg%3E");
+  background-size: 18px;
+  background-position: center;
+}
+
 /* Style editing icon */
 .frontend-editing__action {
   display: inline-block;
-  width: 24px;
-  height: 24px;
-  opacity: 0.4;
+  width: 32px;
+  height: 32px;
+  z-index: 1;
+  opacity: 0;
   transition-duration: 0s;
   background-position: center;
-  background-repeat: no-repeat;
-  background-color: #d6d6d6;
-  background-size: 14px auto;
-  z-index: 1;
   overflow: hidden;
   text-indent: -9999rem;
+  background-color: #e8e8e8;
+  border-right: 1px solid #dddcdc;
+}
+
+.frontend-editing__action:before {
+  display: block;
+  content: '';
+  width: 100%;
+  height: 100%;
+  background-size: 16px;
+  background-repeat: no-repeat;
+  background-position: center;
+  opacity: 0.5;
+}
+
+.frontend-editing-actions .frontend-editing__action:hover,
+.frontend-editing-actions .frontend-editing__action:focus {
+  opacity: 1;
 }
+
 .frontend-editing__action:last-child {
   border-bottom-right-radius: 8px;
 }
+
 .frontend-editing__action:hover {
+  background-color: #dddcdc;
+}
+
+.frontend-editing__action:last-child {
+  border-right-width: 0;
+}
+
+.frontend-editing__action:hover:before {
   opacity: 1;
 }
+
 .frontend-editing__action--hidden {
   display: none;
 }
-.frontend-editing__action--edit {
-  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3IDIuOTk5ODFDMTcuMjYyNiAyLjczNzE3IDE3LjU3NDQgMi41Mjg4MyAxNy45MTc2IDIuMzg2NjlDMTguMjYwOCAyLjI0NDU1IDE4LjYyODYgMi4xNzEzOSAxOSAyLjE3MTM5QzE5LjM3MTQgMi4xNzEzOSAxOS43MzkyIDIuMjQ0NTUgMjAuMDgyNCAyLjM4NjY5QzIwLjQyNTYgMi41Mjg4MyAyMC43Mzc0IDIuNzM3MTcgMjEgMi45OTk4MUMyMS4yNjI2IDMuMjYyNDYgMjEuNDcxIDMuNTc0MjYgMjEuNjEzMSAzLjkxNzQyQzIxLjc1NTMgNC4yNjA1OCAyMS44Mjg0IDQuNjI4MzggMjEuODI4NCA0Ljk5OTgxQzIxLjgyODQgNS4zNzEyNSAyMS43NTUzIDUuNzM5MDUgMjEuNjEzMSA2LjA4MjIxQzIxLjQ3MSA2LjQyNTM3IDIxLjI2MjYgNi43MzcxNyAyMSA2Ljk5OTgxTDcuNSAyMC40OTk4TDIgMjEuOTk5OEwzLjUgMTYuNDk5OEwxNyAyLjk5OTgxWiIgc3Ryb2tlPSIjMjMyMjIyIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=");
+
+.frontend-editing__action--before:before {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iIzIzMjIyMiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMi45OTUgMjJjLS41NSAwLTEtLjQ1LTEtMVYxMWMwLS41NS40NS0xIDEtMWg4VjUuNDFMOC43MDUgNy43YS45OTYuOTk2IDAgMSAxLTEuNDEtMS40MWw0LTRjLjA5LS4wOS4yLS4xNi4zMS0uMjFhLjk5Ljk5IDAgMCAxIDEuMDkuMjFsNC4wMSA0YS45OTYuOTk2IDAgMSAxLTEuNDEgMS40MWwtMi4yOS0yLjI5VjEwaDhjLjU1IDAgMSAuNDUgMSAxdjEwYzAgLjU1LS40NSAxLTEgMUgyLjk5NVptMTctMmgtMTZ2LThoMTZ2OFptLTctMmMwIC41NS0uNDUgMS0xIDFzLTEtLjQ1LTEtMXYtMWgtMWMtLjU1IDAtMS0uNDUtMS0xcy40NS0xIDEtMWgxdi0xYzAtLjU1LjQ1LTEgMS0xczEgLjQ1IDEgMXYxaDFjLjU1IDAgMSAuNDUgMSAxcy0uNDUgMS0xIDFoLTF2MVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==");
 }
-.frontend-editing__action--before {
-  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTIgMTguNzVDMTIuNDE0MiAxOC43NSAxMi43NSAxOC40MTQyIDEyLjc1IDE4VjE2Ljc1SDE0QzE0LjQxNDIgMTYuNzUgMTQuNzUgMTYuNDE0MiAxNC43NSAxNkMxNC43NSAxNS41ODU4IDE0LjQxNDIgMTUuMjUgMTQgMTUuMjVIMTIuNzVWMTRDMTIuNzUgMTMuNTg1OCAxMi40MTQyIDEzLjI1IDEyIDEzLjI1QzExLjU4NTggMTMuMjUgMTEuMjUgMTMuNTg1OCAxMS4yNSAxNFYxNS4yNUgxMEM5LjU4NTc5IDE1LjI1IDkuMjUgMTUuNTg1OCA5LjI1IDE2QzkuMjUgMTYuNDE0MiA5LjU4NTc5IDE2Ljc1IDEwIDE2Ljc1SDExLjI1VjE4QzExLjI1IDE4LjQxNDIgMTEuNTg1OCAxOC43NSAxMiAxOC43NVoiIGZpbGw9IiMyMzIyMjIiLz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTIuMjUgMjFDMi4yNSAyMS40MTQyIDIuNTg1NzkgMjEuNzUgMyAyMS43NUgyMUMyMS40MTQyIDIxLjc1IDIxLjc1IDIxLjQxNDIgMjEuNzUgMjFWMTFDMjEuNzUgMTAuNTg1OCAyMS40MTQyIDEwLjI1IDIxIDEwLjI1SDEyLjc1VjQuODEwNjZMMTUuNDY5NyA3LjUzMDMzQzE1Ljc2MjYgNy44MjMyMiAxNi4yMzc0IDcuODIzMjIgMTYuNTMwMyA3LjUzMDMzQzE2LjgyMzIgNy4yMzc0NCAxNi44MjMyIDYuNzYyNTYgMTYuNTMwMyA2LjQ2OTY3TDEyLjUzMTMgMi40NzA2OUwxMi41MjIxIDIuNDYxNTNDMTIuMzg3IDIuMzMwNiAxMi4yMDI5IDIuMjUgMTIgMi4yNUMxMS44OTc1IDIuMjUgMTEuNzk5OCAyLjI3MDU2IDExLjcxMDggMi4zMDc3OUMxMS42MjY1IDIuMzQyOTcgMTEuNTQ3MyAyLjM5NDIyIDExLjQ3NzkgMi40NjE1M0wxMS40Njg4IDIuNDcwNTdMNy40Njk2NyA2LjQ2OTY3QzcuMTc2NzggNi43NjI1NiA3LjE3Njc4IDcuMjM3NDQgNy40Njk2NyA3LjUzMDMzQzcuNzYyNTYgNy44MjMyMiA4LjIzNzQ0IDcuODIzMjIgOC41MzAzMyA3LjUzMDMzTDExLjI1IDQuODEwNjZWMTAuMjVIM0MyLjU4NTc5IDEwLjI1IDIuMjUgMTAuNTg1OCAyLjI1IDExVjIxWk0yMC4yNSAxMS43NUgzLjc1VjIwLjI1SDIwLjI1VjExLjc1WiIgZmlsbD0iIzIzMjIyMiIvPjwvc3ZnPgo=");
+
+.frontend-editing__action--after:before {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iIzIzMjIyMiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMi45OTUgMmMtLjU1IDAtMSAuNDUtMSAxdjEwYzAgLjU1LjQ1IDEgMSAxaDh2NC41OWwtMi4yOS0yLjI5YS45OTYuOTk2IDAgMSAwLTEuNDEgMS40MWw0IDRjLjA5LjA5LjIuMTYuMzEuMjFhLjk5Ljk5IDAgMCAwIDEuMDktLjIxbDQuMDEtNGEuOTk2Ljk5NiAwIDEgMC0xLjQxLTEuNDFsLTIuMjkgMi4yOVYxNGg4Yy41NSAwIDEtLjQ1IDEtMVYzYzAtLjU1LS40NS0xLTEtMUgyLjk5NVptMTcgMmgtMTZ2OGgxNlY0Wm0tNyAyYzAtLjU1LS40NS0xLTEtMXMtMSAuNDUtMSAxdjFoLTFjLS41NSAwLTEgLjQ1LTEgMXMuNDUgMSAxIDFoMXYxYzAgLjU1LjQ1IDEgMSAxczEtLjQ1IDEtMVY5aDFjLjU1IDAgMS0uNDUgMS0xcy0uNDUtMS0xLTFoLTFWNloiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==");
 }
-.frontend-editing__action--after {
-  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDUuMjVDMTIuNDE0MiA1LjI1IDEyLjc1IDUuNTg1NzkgMTIuNzUgNlY3LjI1SDE0QzE0LjQxNDIgNy4yNSAxNC43NSA3LjU4NTc5IDE0Ljc1IDhDMTQuNzUgOC40MTQyMSAxNC40MTQyIDguNzUgMTQgOC43NUgxMi43NVYxMEMxMi43NSAxMC40MTQyIDEyLjQxNDIgMTAuNzUgMTIgMTAuNzVDMTEuNTg1OCAxMC43NSAxMS4yNSAxMC40MTQyIDExLjI1IDEwVjguNzVIMTBDOS41ODU3OSA4Ljc1IDkuMjUgOC40MTQyMSA5LjI1IDhDOS4yNSA3LjU4NTc5IDkuNTg1NzkgNy4yNSAxMCA3LjI1SDExLjI1VjZDMTEuMjUgNS41ODU3OSAxMS41ODU4IDUuMjUgMTIgNS4yNVoiIGZpbGw9IiMyMzIyMjIiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yLjI1IDNDMi4yNSAyLjU4NTc5IDIuNTg1NzkgMi4yNSAzIDIuMjVIMjFDMjEuNDE0MiAyLjI1IDIxLjc1IDIuNTg1NzkgMjEuNzUgM1YxM0MyMS43NSAxMy40MTQyIDIxLjQxNDIgMTMuNzUgMjEgMTMuNzVIMTIuNzVWMTkuMTg5M0wxNS40Njk3IDE2LjQ2OTdDMTUuNzYyNiAxNi4xNzY4IDE2LjIzNzQgMTYuMTc2OCAxNi41MzAzIDE2LjQ2OTdDMTYuODIzMiAxNi43NjI2IDE2LjgyMzIgMTcuMjM3NCAxNi41MzAzIDE3LjUzMDNMMTIuNTMxMyAyMS41MjkzTDEyLjUyMjEgMjEuNTM4NUMxMi4zODcgMjEuNjY5NCAxMi4yMDI5IDIxLjc1IDEyIDIxLjc1QzExLjg5NzUgMjEuNzUgMTEuNzk5OCAyMS43Mjk0IDExLjcxMDggMjEuNjkyMkMxMS42MjY1IDIxLjY1NyAxMS41NDczIDIxLjYwNTggMTEuNDc3OSAyMS41Mzg1TDExLjQ2ODggMjEuNTI5NEw3LjQ2OTY3IDE3LjUzMDNDNy4xNzY3OCAxNy4yMzc0IDcuMTc2NzggMTYuNzYyNiA3LjQ2OTY3IDE2LjQ2OTdDNy43NjI1NiAxNi4xNzY4IDguMjM3NDQgMTYuMTc2OCA4LjUzMDMzIDE2LjQ2OTdMMTEuMjUgMTkuMTg5M1YxMy43NUgzQzIuNTg1NzkgMTMuNzUgMi4yNSAxMy40MTQyIDIuMjUgMTNWM1pNMjAuMjUgMTIuMjVIMy43NVYzLjc1SDIwLjI1VjEyLjI1WiIgZmlsbD0iIzIzMjIyMiIvPgo8L3N2Zz4K");
+
+.frontend-editing__action--up:before {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iIzIzMjIyMiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTIgNGExIDEgMCAwIDEgLjcwNy4yOTNsNyA3YTEgMSAwIDAgMS0xLjQxNCAxLjQxNEwxMyA3LjQxNFYxOWExIDEgMCAxIDEtMiAwVjcuNDE0bC01LjI5MyA1LjI5M2ExIDEgMCAwIDEtMS40MTQtMS40MTRsNy03QTEgMSAwIDAgMSAxMiA0WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+");
+  background-size: 20px;
 }
 
-.frontend-editing__action--up {
-  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDE5VjUiIHN0cm9rZT0iIzIzMjIyMiIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNNSAxMkwxMiA1TDE5IDEyIiBzdHJva2U9IiMyMzIyMjIiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==");
+.frontend-editing__action--down:before {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iIzIzMjIyMiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTMgNWExIDEgMCAxIDAtMiAwdjExLjU4NmwtNS4yOTMtNS4yOTNhMSAxIDAgMSAwLTEuNDE0IDEuNDE0bDYuOTk1IDYuOTk1QS45OTMuOTkzIDAgMCAwIDEyIDIwYS45OTcuOTk3IDAgMCAwIC43MTItLjI5OGw2Ljk5NS02Ljk5NWExIDEgMCAwIDAtMS40MTQtMS40MTRMMTMgMTYuNTg2VjVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=");
+  background-size: 20px;
 }
 
-.frontend-editing__action--down {
-  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDVWMTkiIHN0cm9rZT0iIzIzMjIyMiIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTkgMTJMMTIgMTlMNSAxMiIgc3Ryb2tlPSIjMjMyMjIyIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=");
+.frontend-editing__action--edit:before,
+.frontent_editing_toggle {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iIzIzMjIyMiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTkgMy4xNzFhMS44MjkgMS44MjkgMCAwIDAtMS4yOTMuNTM2TDQuMzk1IDE3LjAxOWwtLjk3IDMuNTU2IDMuNTU2LS45N0wyMC4yOTMgNi4yOTNBMS44MjkgMS44MjkgMCAwIDAgMTkgMy4xN1ptLTEuNDY1LTEuNzA4YTMuODI5IDMuODI5IDAgMCAxIDQuMTcyIDYuMjQ0bC0xMy41IDEzLjVhMSAxIDAgMCAxLS40NDQuMjU4bC01LjUgMS41YTEgMSAwIDAgMS0xLjIyOC0xLjIyOGwxLjUtNS41YTEgMSAwIDAgMSAuMjU4LS40NDRsMTMuNS0xMy41YTMuODI5IDMuODI5IDAgMCAxIDEuMjQyLS44M1oiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==");
 }
 
 /* Style toggle */
 .frontent_editing_toggle {
-  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-2"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg>');
   background-repeat: no-repeat;
   background-position: center;
   cursor: pointer;
@@ -152,7 +217,8 @@ button.editing-container__toggle {
   opacity: 0.4;
 }
 .frontent_editing_toggle--gin {
-  height: 3em;
+  height: 4em;
+  background-size: 22px;
 }
 .frontent_editing_toggle--seven {
   height: 3em;