decap-cms-core 3.6.3 → 3.7.1

package/src/components/Editor/__tests__/__snapshots__/EditorToolbar.spec.js.snap

@@ -22,18 +22,39 @@ exports[`EditorToolbar should render normal save button 1`] = `
 }
 
 .emotion-2 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  border-right-width: 1px;
+  font-weight: normal;
+  padding: 0 20px;
+}
+
+.emotion-2:hover,
+.emotion-2:focus {
+  background-color: #f1f2f4;
+}
+
+.emotion-4 {
   color: #313d3e;
   font-size: 21px;
   font-weight: 600;
   margin-right: 16px;
 }
 
-.emotion-4 {
+.emotion-6 {
   color: #313d3e;
   font-size: 14px;
 }
 
-.emotion-6 {
+.emotion-8 {
   margin-top: 6px;
   font-size: 13px;
   line-height: 1;
@@ -43,7 +64,7 @@ exports[`EditorToolbar should render normal save button 1`] = `
   color: #ff003b;
 }
 
-.emotion-8 {
+.emotion-10 {
   height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -67,7 +88,7 @@ exports[`EditorToolbar should render normal save button 1`] = `
   padding: 0 10px;
 }
 
-.emotion-10 {
+.emotion-12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -78,7 +99,7 @@ exports[`EditorToolbar should render normal save button 1`] = `
   align-items: center;
 }
 
-.emotion-13 {
+.emotion-15 {
   position: relative;
   font-size: 14px;
   -webkit-user-select: none;
@@ -88,11 +109,11 @@ exports[`EditorToolbar should render normal save button 1`] = `
   margin: 0 10px;
 }
 
-.emotion-13 .e1jeq5dr0 {
+.emotion-15 .e1jeq5dr0 {
   color: #17a2b8;
 }
 
-.emotion-15 {
+.emotion-17 {
   border: 0;
   border-radius: 5px;
   cursor: pointer;
@@ -112,7 +133,7 @@ exports[`EditorToolbar should render normal save button 1`] = `
   background-color: #17a2b8;
 }
 
-.emotion-15:after {
+.emotion-17:after {
   color: #fff;
   width: 0;
   height: 0;
@@ -129,12 +150,12 @@ exports[`EditorToolbar should render normal save button 1`] = `
 }
 
 @media (max-width: 1200px) {
-  .emotion-15 {
+  .emotion-17 {
     padding-left: 10px;
   }
 }
 
-.emotion-17 {
+.emotion-19 {
   border: 0;
   border-radius: 5px;
   cursor: pointer;
@@ -154,12 +175,12 @@ exports[`EditorToolbar should render normal save button 1`] = `
 }
 
 @media (max-width: 1200px) {
-  .emotion-17 {
+  .emotion-19 {
     padding: 0 10px;
   }
 }
 
-.emotion-19 {
+.emotion-21 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -174,7 +195,7 @@ exports[`EditorToolbar should render normal save button 1`] = `
   justify-content: flex-end;
 }
 
-.emotion-21 {
+.emotion-23 {
   height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -193,41 +214,41 @@ exports[`EditorToolbar should render normal save button 1`] = `
     class="emotion-0 emotion-1"
   >
     <mock-link
-      classname="css-abwcjt-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
+      class="emotion-2 emotion-3"
       to=""
     >
       <div
-        class="emotion-2 emotion-3"
+        class="emotion-4 emotion-5"
       >
         ←
       </div>
       <div>
         <div
-          class="emotion-4 emotion-5"
+          class="emotion-6 emotion-7"
         >
           editor.editorToolbar.backCollection
         </div>
         <div
-          class="emotion-6 emotion-7"
+          class="emotion-8 emotion-9"
         >
           editor.editorToolbar.unsavedChanges
         </div>
       </div>
     </mock-link>
     <div
-      class="emotion-8 emotion-9"
+      class="emotion-10 emotion-11"
     >
       <div
-        class="emotion-10 emotion-11"
+        class="emotion-12 emotion-13"
       >
         <div>
           <div
-            class="emotion-12 emotion-13 emotion-14"
+            class="emotion-14 emotion-15 emotion-16"
           >
             <span
               aria-expanded="false"
               aria-haspopup="true"
-              class="emotion-15 emotion-16"
+              class="emotion-17 emotion-18"
               role="button"
               tabindex="0"
             >
@@ -237,18 +258,18 @@ exports[`EditorToolbar should render normal save button 1`] = `
         </div>
         <div>
           <button
-            class="emotion-17 emotion-18"
+            class="emotion-19 emotion-20"
           >
             editor.editorToolbar.deleteEntry
           </button>
         </div>
       </div>
       <div
-        class="emotion-19 emotion-20"
+        class="emotion-21 emotion-22"
       />
     </div>
     <div
-      class="emotion-21 emotion-22"
+      class="emotion-23 emotion-24"
     >
       <mock-settings-dropdown />
     </div>
@@ -278,18 +299,39 @@ exports[`EditorToolbar should render normal save button 2`] = `
 }
 
 .emotion-2 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  border-right-width: 1px;
+  font-weight: normal;
+  padding: 0 20px;
+}
+
+.emotion-2:hover,
+.emotion-2:focus {
+  background-color: #f1f2f4;
+}
+
+.emotion-4 {
   color: #313d3e;
   font-size: 21px;
   font-weight: 600;
   margin-right: 16px;
 }
 
-.emotion-4 {
+.emotion-6 {
   color: #313d3e;
   font-size: 14px;
 }
 
-.emotion-6 {
+.emotion-8 {
   margin-top: 6px;
   font-size: 13px;
   line-height: 1;
@@ -299,7 +341,7 @@ exports[`EditorToolbar should render normal save button 2`] = `
   color: #ff003b;
 }
 
-.emotion-8 {
+.emotion-10 {
   height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -323,7 +365,7 @@ exports[`EditorToolbar should render normal save button 2`] = `
   padding: 0 10px;
 }
 
-.emotion-10 {
+.emotion-12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -334,7 +376,7 @@ exports[`EditorToolbar should render normal save button 2`] = `
   align-items: center;
 }
 
-.emotion-13 {
+.emotion-15 {
   position: relative;
   font-size: 14px;
   -webkit-user-select: none;
@@ -344,11 +386,11 @@ exports[`EditorToolbar should render normal save button 2`] = `
   margin: 0 10px;
 }
 
-.emotion-13 .e1jeq5dr0 {
+.emotion-15 .e1jeq5dr0 {
   color: #17a2b8;
 }
 
-.emotion-15 {
+.emotion-17 {
   border: 0;
   border-radius: 5px;
   cursor: pointer;
@@ -368,7 +410,7 @@ exports[`EditorToolbar should render normal save button 2`] = `
   background-color: #17a2b8;
 }
 
-.emotion-15:after {
+.emotion-17:after {
   color: #fff;
   width: 0;
   height: 0;
@@ -385,12 +427,12 @@ exports[`EditorToolbar should render normal save button 2`] = `
 }
 
 @media (max-width: 1200px) {
-  .emotion-15 {
+  .emotion-17 {
     padding-left: 10px;
   }
 }
 
-.emotion-17 {
+.emotion-19 {
   border: 0;
   border-radius: 5px;
   cursor: pointer;
@@ -410,12 +452,12 @@ exports[`EditorToolbar should render normal save button 2`] = `
 }
 
 @media (max-width: 1200px) {
-  .emotion-17 {
+  .emotion-19 {
     padding: 0 10px;
   }
 }
 
-.emotion-19 {
+.emotion-21 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -430,7 +472,7 @@ exports[`EditorToolbar should render normal save button 2`] = `
   justify-content: flex-end;
 }
 
-.emotion-21 {
+.emotion-23 {
   height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -449,41 +491,41 @@ exports[`EditorToolbar should render normal save button 2`] = `
     class="emotion-0 emotion-1"
   >
     <mock-link
-      classname="css-abwcjt-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
+      class="emotion-2 emotion-3"
       to=""
     >
       <div
-        class="emotion-2 emotion-3"
+        class="emotion-4 emotion-5"
       >
         ←
       </div>
       <div>
         <div
-          class="emotion-4 emotion-5"
+          class="emotion-6 emotion-7"
         >
           editor.editorToolbar.backCollection
         </div>
         <div
-          class="emotion-6 emotion-7"
+          class="emotion-8 emotion-9"
         >
           editor.editorToolbar.unsavedChanges
         </div>
       </div>
     </mock-link>
     <div
-      class="emotion-8 emotion-9"
+      class="emotion-10 emotion-11"
     >
       <div
-        class="emotion-10 emotion-11"
+        class="emotion-12 emotion-13"
       >
         <div>
           <div
-            class="emotion-12 emotion-13 emotion-14"
+            class="emotion-14 emotion-15 emotion-16"
           >
             <span
               aria-expanded="false"
               aria-haspopup="true"
-              class="emotion-15 emotion-16"
+              class="emotion-17 emotion-18"
               role="button"
               tabindex="0"
             >
@@ -493,18 +535,18 @@ exports[`EditorToolbar should render normal save button 2`] = `
         </div>
         <div>
           <button
-            class="emotion-17 emotion-18"
+            class="emotion-19 emotion-20"
           >
             editor.editorToolbar.deleteEntry
           </button>
         </div>
       </div>
       <div
-        class="emotion-19 emotion-20"
+        class="emotion-21 emotion-22"
       />
     </div>
     <div
-      class="emotion-21 emotion-22"
+      class="emotion-23 emotion-24"
     >
       <mock-settings-dropdown />
     </div>
@@ -534,18 +576,39 @@ exports[`EditorToolbar should render with default props 1`] = `
 }
 
 .emotion-2 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  border-right-width: 1px;
+  font-weight: normal;
+  padding: 0 20px;
+}
+
+.emotion-2:hover,
+.emotion-2:focus {
+  background-color: #f1f2f4;
+}
+
+.emotion-4 {
   color: #313d3e;
   font-size: 21px;
   font-weight: 600;
   margin-right: 16px;
 }
 
-.emotion-4 {
+.emotion-6 {
   color: #313d3e;
   font-size: 14px;
 }
 
-.emotion-6 {
+.emotion-8 {
   margin-top: 6px;
   font-size: 13px;
   line-height: 1;
@@ -555,7 +618,7 @@ exports[`EditorToolbar should render with default props 1`] = `
   color: #005614;
 }
 
-.emotion-8 {
+.emotion-10 {
   height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -579,7 +642,7 @@ exports[`EditorToolbar should render with default props 1`] = `
   padding: 0 10px;
 }
 
-.emotion-10 {
+.emotion-12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -590,7 +653,7 @@ exports[`EditorToolbar should render with default props 1`] = `
   align-items: center;
 }
 
-.emotion-12 {
+.emotion-14 {
   border: 0;
   border-radius: 5px;
   cursor: pointer;
@@ -610,12 +673,12 @@ exports[`EditorToolbar should render with default props 1`] = `
 }
 
 @media (max-width: 1200px) {
-  .emotion-12 {
+  .emotion-14 {
     padding: 0 10px;
   }
 }
 
-.emotion-14 {
+.emotion-16 {
   border: 0;
   border-radius: 5px;
   cursor: pointer;
@@ -635,12 +698,12 @@ exports[`EditorToolbar should render with default props 1`] = `
 }
 
 @media (max-width: 1200px) {
-  .emotion-14 {
+  .emotion-16 {
     padding: 0 10px;
   }
 }
 
-.emotion-16 {
+.emotion-18 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -655,7 +718,7 @@ exports[`EditorToolbar should render with default props 1`] = `
   justify-content: flex-end;
 }
 
-.emotion-18 {
+.emotion-20 {
   height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -674,52 +737,52 @@ exports[`EditorToolbar should render with default props 1`] = `
     class="emotion-0 emotion-1"
   >
     <mock-link
-      classname="css-abwcjt-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
+      class="emotion-2 emotion-3"
       to=""
     >
       <div
-        class="emotion-2 emotion-3"
+        class="emotion-4 emotion-5"
       >
         ←
       </div>
       <div>
         <div
-          class="emotion-4 emotion-5"
+          class="emotion-6 emotion-7"
         >
           editor.editorToolbar.backCollection
         </div>
         <div
-          class="emotion-6 emotion-7"
+          class="emotion-8 emotion-9"
         >
           editor.editorToolbar.changesSaved
         </div>
       </div>
     </mock-link>
     <div
-      class="emotion-8 emotion-9"
+      class="emotion-10 emotion-11"
     >
       <div
-        class="emotion-10 emotion-11"
+        class="emotion-12 emotion-13"
       >
         <button
-          class="emotion-12 emotion-13"
+          class="emotion-14 emotion-15"
         >
           editor.editorToolbar.published
         </button>
         <div>
           <button
-            class="emotion-14 emotion-15"
+            class="emotion-16 emotion-17"
           >
             editor.editorToolbar.deleteEntry
           </button>
         </div>
       </div>
       <div
-        class="emotion-16 emotion-17"
+        class="emotion-18 emotion-19"
       />
     </div>
     <div
-      class="emotion-18 emotion-19"
+      class="emotion-20 emotion-21"
     >
       <mock-settings-dropdown />
     </div>
@@ -749,18 +812,39 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=false 1`
 }
 
 .emotion-2 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  border-right-width: 1px;
+  font-weight: normal;
+  padding: 0 20px;
+}
+
+.emotion-2:hover,
+.emotion-2:focus {
+  background-color: #f1f2f4;
+}
+
+.emotion-4 {
   color: #313d3e;
   font-size: 21px;
   font-weight: 600;
   margin-right: 16px;
 }
 
-.emotion-4 {
+.emotion-6 {
   color: #313d3e;
   font-size: 14px;
 }
 
-.emotion-6 {
+.emotion-8 {
   margin-top: 6px;
   font-size: 13px;
   line-height: 1;
@@ -770,7 +854,7 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=false 1`
   color: #005614;
 }
 
-.emotion-8 {
+.emotion-10 {
   height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -794,7 +878,7 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=false 1`
   padding: 0 10px;
 }
 
-.emotion-10 {
+.emotion-12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -805,7 +889,7 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=false 1`
   align-items: center;
 }
 
-.emotion-12 {
+.emotion-14 {
   border: 0;
   border-radius: 5px;
   cursor: pointer;
@@ -825,18 +909,18 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=false 1`
 }
 
 @media (max-width: 1200px) {
-  .emotion-12 {
+  .emotion-14 {
     padding: 0 10px;
   }
 }
 
-.emotion-12[disabled] {
+.emotion-14[disabled] {
   background-color: #eff0f4;
   color: #798291;
   cursor: default;
 }
 
-.emotion-15 {
+.emotion-17 {
   position: relative;
   font-size: 14px;
   -webkit-user-select: none;
@@ -846,11 +930,11 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=false 1`
   margin: 0 10px;
 }
 
-.emotion-15 .e1jeq5dr0 {
+.emotion-17 .e1jeq5dr0 {
   color: #17a2b8;
 }
 
-.emotion-17 {
+.emotion-19 {
   border: 0;
   border-radius: 5px;
   cursor: pointer;
@@ -871,7 +955,7 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=false 1`
   color: #17a2b8;
 }
 
-.emotion-17:after {
+.emotion-19:after {
   color: #fff;
   width: 0;
   height: 0;
@@ -888,12 +972,12 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=false 1`
 }
 
 @media (max-width: 1200px) {
-  .emotion-17 {
+  .emotion-19 {
     padding-left: 10px;
   }
 }
 
-.emotion-19 {
+.emotion-21 {
   border: 0;
   border-radius: 5px;
   cursor: pointer;
@@ -913,12 +997,12 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=false 1`
 }
 
 @media (max-width: 1200px) {
-  .emotion-19 {
+  .emotion-21 {
     padding: 0 10px;
   }
 }
 
-.emotion-21 {
+.emotion-23 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -933,7 +1017,7 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=false 1`
   justify-content: flex-end;
 }
 
-.emotion-23 {
+.emotion-25 {
   height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -952,46 +1036,46 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=false 1`
     class="emotion-0 emotion-1"
   >
     <mock-link
-      classname="css-abwcjt-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
+      class="emotion-2 emotion-3"
       to=""
     >
       <div
-        class="emotion-2 emotion-3"
+        class="emotion-4 emotion-5"
       >
         ←
       </div>
       <div>
         <div
-          class="emotion-4 emotion-5"
+          class="emotion-6 emotion-7"
         >
           editor.editorToolbar.backCollection
         </div>
         <div
-          class="emotion-6 emotion-7"
+          class="emotion-8 emotion-9"
         >
           editor.editorToolbar.changesSaved
         </div>
       </div>
     </mock-link>
     <div
-      class="emotion-8 emotion-9"
+      class="emotion-10 emotion-11"
     >
       <div
-        class="emotion-10 emotion-11"
+        class="emotion-12 emotion-13"
       >
         <button
-          class="emotion-12 emotion-13"
+          class="emotion-14 emotion-15"
           disabled=""
         >
           editor.editorToolbar.save
         </button>
         <div
-          class="emotion-14 emotion-15 emotion-16"
+          class="emotion-16 emotion-17 emotion-18"
         >
           <span
             aria-expanded="false"
             aria-haspopup="true"
-            class="emotion-17 emotion-18"
+            class="emotion-19 emotion-20"
             role="button"
             tabindex="0"
           >
@@ -999,17 +1083,17 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=false 1`
           </span>
         </div>
         <button
-          class="emotion-19 emotion-20"
+          class="emotion-21 emotion-22"
         >
           editor.editorToolbar.deletePublishedEntry
         </button>
       </div>
       <div
-        class="emotion-21 emotion-22"
+        class="emotion-23 emotion-24"
       />
     </div>
     <div
-      class="emotion-23 emotion-24"
+      class="emotion-25 emotion-26"
     >
       <mock-settings-dropdown />
     </div>
@@ -1039,18 +1123,39 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=true 1`]
 }
 
 .emotion-2 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  border-right-width: 1px;
+  font-weight: normal;
+  padding: 0 20px;
+}
+
+.emotion-2:hover,
+.emotion-2:focus {
+  background-color: #f1f2f4;
+}
+
+.emotion-4 {
   color: #313d3e;
   font-size: 21px;
   font-weight: 600;
   margin-right: 16px;
 }
 
-.emotion-4 {
+.emotion-6 {
   color: #313d3e;
   font-size: 14px;
 }
 
-.emotion-6 {
+.emotion-8 {
   margin-top: 6px;
   font-size: 13px;
   line-height: 1;
@@ -1060,7 +1165,7 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=true 1`]
   color: #005614;
 }
 
-.emotion-8 {
+.emotion-10 {
   height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1084,7 +1189,7 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=true 1`]
   padding: 0 10px;
 }
 
-.emotion-10 {
+.emotion-12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1095,7 +1200,7 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=true 1`]
   align-items: center;
 }
 
-.emotion-12 {
+.emotion-14 {
   border: 0;
   border-radius: 5px;
   cursor: pointer;
@@ -1115,18 +1220,18 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=true 1`]
 }
 
 @media (max-width: 1200px) {
-  .emotion-12 {
+  .emotion-14 {
     padding: 0 10px;
   }
 }
 
-.emotion-12[disabled] {
+.emotion-14[disabled] {
   background-color: #eff0f4;
   color: #798291;
   cursor: default;
 }
 
-.emotion-15 {
+.emotion-17 {
   position: relative;
   font-size: 14px;
   -webkit-user-select: none;
@@ -1136,11 +1241,11 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=true 1`]
   margin: 0 10px;
 }
 
-.emotion-15 .emotion-23 {
+.emotion-17 .emotion-25 {
   color: #17a2b8;
 }
 
-.emotion-17 {
+.emotion-19 {
   border: 0;
   border-radius: 5px;
   cursor: pointer;
@@ -1161,7 +1266,7 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=true 1`]
   color: #17a2b8;
 }
 
-.emotion-17:after {
+.emotion-19:after {
   color: #fff;
   width: 0;
   height: 0;
@@ -1178,26 +1283,26 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=true 1`]
 }
 
 @media (max-width: 1200px) {
-  .emotion-17 {
+  .emotion-19 {
     padding-left: 10px;
   }
 }
 
-.emotion-19 {
+.emotion-21 {
   position: relative;
 }
 
-.emotion-21 {
+.emotion-23 {
   position: relative;
   display: inline-block;
 }
 
-.emotion-21:hover+.emotion-27 {
+.emotion-23:hover+.emotion-29 {
   visibility: visible;
   opacity: 0.9;
 }
 
-.emotion-24 {
+.emotion-26 {
   display: inline-block;
   line-height: 0;
   width: 18px;
@@ -1208,23 +1313,23 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=true 1`]
   transform: rotate(0deg);
 }
 
-.emotion-24 path:not(.no-fill),
-.emotion-24 circle:not(.no-fill),
-.emotion-24 polygon:not(.no-fill),
-.emotion-24 rect:not(.no-fill) {
+.emotion-26 path:not(.no-fill),
+.emotion-26 circle:not(.no-fill),
+.emotion-26 polygon:not(.no-fill),
+.emotion-26 rect:not(.no-fill) {
   fill: currentColor;
 }
 
-.emotion-24 path.clipped {
+.emotion-26 path.clipped {
   fill: transparent;
 }
 
-.emotion-24 svg {
+.emotion-26 svg {
   width: 100%;
   height: 100%;
 }
 
-.emotion-26 {
+.emotion-28 {
   visibility: hidden;
   width: 321px;
   background-color: #555;
@@ -1242,7 +1347,7 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=true 1`]
   transition: opacity 0.3s;
 }
 
-.emotion-28 {
+.emotion-30 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1257,7 +1362,7 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=true 1`]
   justify-content: flex-end;
 }
 
-.emotion-30 {
+.emotion-32 {
   height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1276,46 +1381,46 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=true 1`]
     class="emotion-0 emotion-1"
   >
     <mock-link
-      classname="css-abwcjt-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
+      class="emotion-2 emotion-3"
       to=""
     >
       <div
-        class="emotion-2 emotion-3"
+        class="emotion-4 emotion-5"
       >
         ←
       </div>
       <div>
         <div
-          class="emotion-4 emotion-5"
+          class="emotion-6 emotion-7"
         >
           editor.editorToolbar.backCollection
         </div>
         <div
-          class="emotion-6 emotion-7"
+          class="emotion-8 emotion-9"
         >
           editor.editorToolbar.changesSaved
         </div>
       </div>
     </mock-link>
     <div
-      class="emotion-8 emotion-9"
+      class="emotion-10 emotion-11"
     >
       <div
-        class="emotion-10 emotion-11"
+        class="emotion-12 emotion-13"
       >
         <button
-          class="emotion-12 emotion-13"
+          class="emotion-14 emotion-15"
           disabled=""
         >
           editor.editorToolbar.save
         </button>
         <div
-          class="emotion-14 emotion-15 emotion-16"
+          class="emotion-16 emotion-17 emotion-18"
         >
           <span
             aria-expanded="false"
             aria-haspopup="true"
-            class="emotion-17 emotion-18"
+            class="emotion-19 emotion-20"
             role="button"
             tabindex="0"
           >
@@ -1323,13 +1428,13 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=true 1`]
           </span>
         </div>
         <div
-          class="emotion-19 emotion-20"
+          class="emotion-21 emotion-22"
         >
           <div
-            class="emotion-21 emotion-22"
+            class="emotion-23 emotion-24"
           >
             <span
-              class="tooltip emotion-23 emotion-24 emotion-25"
+              class="tooltip emotion-25 emotion-26 emotion-27"
             >
               <svg
                 class="bi bi-info-circle"
@@ -1349,18 +1454,18 @@ exports[`EditorToolbar should render with status=draft,useOpenAuthoring=true 1`]
             </span>
           </div>
           <div
-            class="emotion-26 emotion-27"
+            class="emotion-28 emotion-29"
           >
             editor.editorToolbar.statusInfoTooltipDraft
           </div>
         </div>
       </div>
       <div
-        class="emotion-28 emotion-29"
+        class="emotion-30 emotion-31"
       />
     </div>
     <div
-      class="emotion-30 emotion-31"
+      class="emotion-32 emotion-33"
     >
       <mock-settings-dropdown />
     </div>
@@ -1390,18 +1495,39 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
 }
 
 .emotion-2 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  border-right-width: 1px;
+  font-weight: normal;
+  padding: 0 20px;
+}
+
+.emotion-2:hover,
+.emotion-2:focus {
+  background-color: #f1f2f4;
+}
+
+.emotion-4 {
   color: #313d3e;
   font-size: 21px;
   font-weight: 600;
   margin-right: 16px;
 }
 
-.emotion-4 {
+.emotion-6 {
   color: #313d3e;
   font-size: 14px;
 }
 
-.emotion-6 {
+.emotion-8 {
   margin-top: 6px;
   font-size: 13px;
   line-height: 1;
@@ -1411,7 +1537,7 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
   color: #005614;
 }
 
-.emotion-8 {
+.emotion-10 {
   height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1435,7 +1561,7 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
   padding: 0 10px;
 }
 
-.emotion-10 {
+.emotion-12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1446,7 +1572,7 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
   align-items: center;
 }
 
-.emotion-12 {
+.emotion-14 {
   border: 0;
   border-radius: 5px;
   cursor: pointer;
@@ -1466,18 +1592,18 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
 }
 
 @media (max-width: 1200px) {
-  .emotion-12 {
+  .emotion-14 {
     padding: 0 10px;
   }
 }
 
-.emotion-12[disabled] {
+.emotion-14[disabled] {
   background-color: #eff0f4;
   color: #798291;
   cursor: default;
 }
 
-.emotion-15 {
+.emotion-17 {
   position: relative;
   font-size: 14px;
   -webkit-user-select: none;
@@ -1487,11 +1613,11 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
   margin: 0 10px;
 }
 
-.emotion-15 .e1jeq5dr0 {
+.emotion-17 .e1jeq5dr0 {
   color: #17a2b8;
 }
 
-.emotion-17 {
+.emotion-19 {
   border: 0;
   border-radius: 5px;
   cursor: pointer;
@@ -1512,7 +1638,7 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
   color: #17a2b8;
 }
 
-.emotion-17:after {
+.emotion-19:after {
   color: #fff;
   width: 0;
   height: 0;
@@ -1529,12 +1655,12 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
 }
 
 @media (max-width: 1200px) {
-  .emotion-17 {
+  .emotion-19 {
     padding-left: 10px;
   }
 }
 
-.emotion-19 {
+.emotion-21 {
   border: 0;
   border-radius: 5px;
   cursor: pointer;
@@ -1554,12 +1680,12 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
 }
 
 @media (max-width: 1200px) {
-  .emotion-19 {
+  .emotion-21 {
     padding: 0 10px;
   }
 }
 
-.emotion-21 {
+.emotion-23 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1574,7 +1700,7 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
   justify-content: flex-end;
 }
 
-.emotion-23 {
+.emotion-25 {
   height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1593,46 +1719,46 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
     class="emotion-0 emotion-1"
   >
     <mock-link
-      classname="css-abwcjt-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
+      class="emotion-2 emotion-3"
       to=""
     >
       <div
-        class="emotion-2 emotion-3"
+        class="emotion-4 emotion-5"
       >
         ←
       </div>
       <div>
         <div
-          class="emotion-4 emotion-5"
+          class="emotion-6 emotion-7"
         >
           editor.editorToolbar.backCollection
         </div>
         <div
-          class="emotion-6 emotion-7"
+          class="emotion-8 emotion-9"
         >
           editor.editorToolbar.changesSaved
         </div>
       </div>
     </mock-link>
     <div
-      class="emotion-8 emotion-9"
+      class="emotion-10 emotion-11"
     >
       <div
-        class="emotion-10 emotion-11"
+        class="emotion-12 emotion-13"
       >
         <button
-          class="emotion-12 emotion-13"
+          class="emotion-14 emotion-15"
           disabled=""
         >
           editor.editorToolbar.save
         </button>
         <div
-          class="emotion-14 emotion-15 emotion-16"
+          class="emotion-16 emotion-17 emotion-18"
         >
           <span
             aria-expanded="false"
             aria-haspopup="true"
-            class="emotion-17 emotion-18"
+            class="emotion-19 emotion-20"
             role="button"
             tabindex="0"
           >
@@ -1640,17 +1766,17 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
           </span>
         </div>
         <button
-          class="emotion-19 emotion-20"
+          class="emotion-21 emotion-22"
         >
           editor.editorToolbar.deletePublishedEntry
         </button>
       </div>
       <div
-        class="emotion-21 emotion-22"
+        class="emotion-23 emotion-24"
       />
     </div>
     <div
-      class="emotion-23 emotion-24"
+      class="emotion-25 emotion-26"
     >
       <mock-settings-dropdown />
     </div>
@@ -1680,18 +1806,39 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
 }
 
 .emotion-2 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  border-right-width: 1px;
+  font-weight: normal;
+  padding: 0 20px;
+}
+
+.emotion-2:hover,
+.emotion-2:focus {
+  background-color: #f1f2f4;
+}
+
+.emotion-4 {
   color: #313d3e;
   font-size: 21px;
   font-weight: 600;
   margin-right: 16px;
 }
 
-.emotion-4 {
+.emotion-6 {
   color: #313d3e;
   font-size: 14px;
 }
 
-.emotion-6 {
+.emotion-8 {
   margin-top: 6px;
   font-size: 13px;
   line-height: 1;
@@ -1701,7 +1848,7 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
   color: #005614;
 }
 
-.emotion-8 {
+.emotion-10 {
   height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1725,7 +1872,7 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
   padding: 0 10px;
 }
 
-.emotion-10 {
+.emotion-12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1736,7 +1883,7 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
   align-items: center;
 }
 
-.emotion-12 {
+.emotion-14 {
   border: 0;
   border-radius: 5px;
   cursor: pointer;
@@ -1756,18 +1903,18 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
 }
 
 @media (max-width: 1200px) {
-  .emotion-12 {
+  .emotion-14 {
     padding: 0 10px;
   }
 }
 
-.emotion-12[disabled] {
+.emotion-14[disabled] {
   background-color: #eff0f4;
   color: #798291;
   cursor: default;
 }
 
-.emotion-15 {
+.emotion-17 {
   position: relative;
   font-size: 14px;
   -webkit-user-select: none;
@@ -1777,11 +1924,11 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
   margin: 0 10px;
 }
 
-.emotion-15 .emotion-23 {
+.emotion-17 .emotion-25 {
   color: #17a2b8;
 }
 
-.emotion-17 {
+.emotion-19 {
   border: 0;
   border-radius: 5px;
   cursor: pointer;
@@ -1802,7 +1949,7 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
   color: #17a2b8;
 }
 
-.emotion-17:after {
+.emotion-19:after {
   color: #fff;
   width: 0;
   height: 0;
@@ -1819,26 +1966,26 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
 }
 
 @media (max-width: 1200px) {
-  .emotion-17 {
+  .emotion-19 {
     padding-left: 10px;
   }
 }
 
-.emotion-19 {
+.emotion-21 {
   position: relative;
 }
 
-.emotion-21 {
+.emotion-23 {
   position: relative;
   display: inline-block;
 }
 
-.emotion-21:hover+.e1d2l9mo26 {
+.emotion-23:hover+.e1d2l9mo26 {
   visibility: visible;
   opacity: 0.9;
 }
 
-.emotion-24 {
+.emotion-26 {
   display: inline-block;
   line-height: 0;
   width: 18px;
@@ -1849,23 +1996,23 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
   transform: rotate(0deg);
 }
 
-.emotion-24 path:not(.no-fill),
-.emotion-24 circle:not(.no-fill),
-.emotion-24 polygon:not(.no-fill),
-.emotion-24 rect:not(.no-fill) {
+.emotion-26 path:not(.no-fill),
+.emotion-26 circle:not(.no-fill),
+.emotion-26 polygon:not(.no-fill),
+.emotion-26 rect:not(.no-fill) {
   fill: currentColor;
 }
 
-.emotion-24 path.clipped {
+.emotion-26 path.clipped {
   fill: transparent;
 }
 
-.emotion-24 svg {
+.emotion-26 svg {
   width: 100%;
   height: 100%;
 }
 
-.emotion-26 {
+.emotion-28 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1880,7 +2027,7 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
   justify-content: flex-end;
 }
 
-.emotion-28 {
+.emotion-30 {
   height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1899,46 +2046,46 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
     class="emotion-0 emotion-1"
   >
     <mock-link
-      classname="css-abwcjt-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
+      class="emotion-2 emotion-3"
       to=""
     >
       <div
-        class="emotion-2 emotion-3"
+        class="emotion-4 emotion-5"
       >
         ←
       </div>
       <div>
         <div
-          class="emotion-4 emotion-5"
+          class="emotion-6 emotion-7"
         >
           editor.editorToolbar.backCollection
         </div>
         <div
-          class="emotion-6 emotion-7"
+          class="emotion-8 emotion-9"
         >
           editor.editorToolbar.changesSaved
         </div>
       </div>
     </mock-link>
     <div
-      class="emotion-8 emotion-9"
+      class="emotion-10 emotion-11"
     >
       <div
-        class="emotion-10 emotion-11"
+        class="emotion-12 emotion-13"
       >
         <button
-          class="emotion-12 emotion-13"
+          class="emotion-14 emotion-15"
           disabled=""
         >
           editor.editorToolbar.save
         </button>
         <div
-          class="emotion-14 emotion-15 emotion-16"
+          class="emotion-16 emotion-17 emotion-18"
         >
           <span
             aria-expanded="false"
             aria-haspopup="true"
-            class="emotion-17 emotion-18"
+            class="emotion-19 emotion-20"
             role="button"
             tabindex="0"
           >
@@ -1946,13 +2093,13 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
           </span>
         </div>
         <div
-          class="emotion-19 emotion-20"
+          class="emotion-21 emotion-22"
         >
           <div
-            class="emotion-21 emotion-22"
+            class="emotion-23 emotion-24"
           >
             <span
-              class="tooltip emotion-23 emotion-24 emotion-25"
+              class="tooltip emotion-25 emotion-26 emotion-27"
             >
               <svg
                 class="bi bi-info-circle"
@@ -1974,11 +2121,11 @@ exports[`EditorToolbar should render with status=pending_publish,useOpenAuthorin
         </div>
       </div>
       <div
-        class="emotion-26 emotion-27"
+        class="emotion-28 emotion-29"
       />
     </div>
     <div
-      class="emotion-28 emotion-29"
+      class="emotion-30 emotion-31"
     >
       <mock-settings-dropdown />
     </div>
@@ -2008,18 +2155,39 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
 }
 
 .emotion-2 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  border-right-width: 1px;
+  font-weight: normal;
+  padding: 0 20px;
+}
+
+.emotion-2:hover,
+.emotion-2:focus {
+  background-color: #f1f2f4;
+}
+
+.emotion-4 {
   color: #313d3e;
   font-size: 21px;
   font-weight: 600;
   margin-right: 16px;
 }
 
-.emotion-4 {
+.emotion-6 {
   color: #313d3e;
   font-size: 14px;
 }
 
-.emotion-6 {
+.emotion-8 {
   margin-top: 6px;
   font-size: 13px;
   line-height: 1;
@@ -2029,7 +2197,7 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
   color: #005614;
 }
 
-.emotion-8 {
+.emotion-10 {
   height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2053,7 +2221,7 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
   padding: 0 10px;
 }
 
-.emotion-10 {
+.emotion-12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2064,7 +2232,7 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
   align-items: center;
 }
 
-.emotion-12 {
+.emotion-14 {
   border: 0;
   border-radius: 5px;
   cursor: pointer;
@@ -2084,18 +2252,18 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
 }
 
 @media (max-width: 1200px) {
-  .emotion-12 {
+  .emotion-14 {
     padding: 0 10px;
   }
 }
 
-.emotion-12[disabled] {
+.emotion-14[disabled] {
   background-color: #eff0f4;
   color: #798291;
   cursor: default;
 }
 
-.emotion-15 {
+.emotion-17 {
   position: relative;
   font-size: 14px;
   -webkit-user-select: none;
@@ -2105,11 +2273,11 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
   margin: 0 10px;
 }
 
-.emotion-15 .e1jeq5dr0 {
+.emotion-17 .e1jeq5dr0 {
   color: #17a2b8;
 }
 
-.emotion-17 {
+.emotion-19 {
   border: 0;
   border-radius: 5px;
   cursor: pointer;
@@ -2130,7 +2298,7 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
   color: #17a2b8;
 }
 
-.emotion-17:after {
+.emotion-19:after {
   color: #fff;
   width: 0;
   height: 0;
@@ -2147,12 +2315,12 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
 }
 
 @media (max-width: 1200px) {
-  .emotion-17 {
+  .emotion-19 {
     padding-left: 10px;
   }
 }
 
-.emotion-19 {
+.emotion-21 {
   border: 0;
   border-radius: 5px;
   cursor: pointer;
@@ -2172,12 +2340,12 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
 }
 
 @media (max-width: 1200px) {
-  .emotion-19 {
+  .emotion-21 {
     padding: 0 10px;
   }
 }
 
-.emotion-21 {
+.emotion-23 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2192,7 +2360,7 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
   justify-content: flex-end;
 }
 
-.emotion-23 {
+.emotion-25 {
   height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2211,46 +2379,46 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
     class="emotion-0 emotion-1"
   >
     <mock-link
-      classname="css-abwcjt-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
+      class="emotion-2 emotion-3"
       to=""
     >
       <div
-        class="emotion-2 emotion-3"
+        class="emotion-4 emotion-5"
       >
         ←
       </div>
       <div>
         <div
-          class="emotion-4 emotion-5"
+          class="emotion-6 emotion-7"
         >
           editor.editorToolbar.backCollection
         </div>
         <div
-          class="emotion-6 emotion-7"
+          class="emotion-8 emotion-9"
         >
           editor.editorToolbar.changesSaved
         </div>
       </div>
     </mock-link>
     <div
-      class="emotion-8 emotion-9"
+      class="emotion-10 emotion-11"
     >
       <div
-        class="emotion-10 emotion-11"
+        class="emotion-12 emotion-13"
       >
         <button
-          class="emotion-12 emotion-13"
+          class="emotion-14 emotion-15"
           disabled=""
         >
           editor.editorToolbar.save
         </button>
         <div
-          class="emotion-14 emotion-15 emotion-16"
+          class="emotion-16 emotion-17 emotion-18"
         >
           <span
             aria-expanded="false"
             aria-haspopup="true"
-            class="emotion-17 emotion-18"
+            class="emotion-19 emotion-20"
             role="button"
             tabindex="0"
           >
@@ -2258,17 +2426,17 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
           </span>
         </div>
         <button
-          class="emotion-19 emotion-20"
+          class="emotion-21 emotion-22"
         >
           editor.editorToolbar.deletePublishedEntry
         </button>
       </div>
       <div
-        class="emotion-21 emotion-22"
+        class="emotion-23 emotion-24"
       />
     </div>
     <div
-      class="emotion-23 emotion-24"
+      class="emotion-25 emotion-26"
     >
       <mock-settings-dropdown />
     </div>
@@ -2298,18 +2466,39 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
 }
 
 .emotion-2 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  border-right-width: 1px;
+  font-weight: normal;
+  padding: 0 20px;
+}
+
+.emotion-2:hover,
+.emotion-2:focus {
+  background-color: #f1f2f4;
+}
+
+.emotion-4 {
   color: #313d3e;
   font-size: 21px;
   font-weight: 600;
   margin-right: 16px;
 }
 
-.emotion-4 {
+.emotion-6 {
   color: #313d3e;
   font-size: 14px;
 }
 
-.emotion-6 {
+.emotion-8 {
   margin-top: 6px;
   font-size: 13px;
   line-height: 1;
@@ -2319,7 +2508,7 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
   color: #005614;
 }
 
-.emotion-8 {
+.emotion-10 {
   height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2343,7 +2532,7 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
   padding: 0 10px;
 }
 
-.emotion-10 {
+.emotion-12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2354,7 +2543,7 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
   align-items: center;
 }
 
-.emotion-12 {
+.emotion-14 {
   border: 0;
   border-radius: 5px;
   cursor: pointer;
@@ -2374,18 +2563,18 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
 }
 
 @media (max-width: 1200px) {
-  .emotion-12 {
+  .emotion-14 {
     padding: 0 10px;
   }
 }
 
-.emotion-12[disabled] {
+.emotion-14[disabled] {
   background-color: #eff0f4;
   color: #798291;
   cursor: default;
 }
 
-.emotion-15 {
+.emotion-17 {
   position: relative;
   font-size: 14px;
   -webkit-user-select: none;
@@ -2395,11 +2584,11 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
   margin: 0 10px;
 }
 
-.emotion-15 .emotion-23 {
+.emotion-17 .emotion-25 {
   color: #17a2b8;
 }
 
-.emotion-17 {
+.emotion-19 {
   border: 0;
   border-radius: 5px;
   cursor: pointer;
@@ -2420,7 +2609,7 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
   color: #17a2b8;
 }
 
-.emotion-17:after {
+.emotion-19:after {
   color: #fff;
   width: 0;
   height: 0;
@@ -2437,26 +2626,26 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
 }
 
 @media (max-width: 1200px) {
-  .emotion-17 {
+  .emotion-19 {
     padding-left: 10px;
   }
 }
 
-.emotion-19 {
+.emotion-21 {
   position: relative;
 }
 
-.emotion-21 {
+.emotion-23 {
   position: relative;
   display: inline-block;
 }
 
-.emotion-21:hover+.emotion-27 {
+.emotion-23:hover+.emotion-29 {
   visibility: visible;
   opacity: 0.9;
 }
 
-.emotion-24 {
+.emotion-26 {
   display: inline-block;
   line-height: 0;
   width: 18px;
@@ -2467,23 +2656,23 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
   transform: rotate(0deg);
 }
 
-.emotion-24 path:not(.no-fill),
-.emotion-24 circle:not(.no-fill),
-.emotion-24 polygon:not(.no-fill),
-.emotion-24 rect:not(.no-fill) {
+.emotion-26 path:not(.no-fill),
+.emotion-26 circle:not(.no-fill),
+.emotion-26 polygon:not(.no-fill),
+.emotion-26 rect:not(.no-fill) {
   fill: currentColor;
 }
 
-.emotion-24 path.clipped {
+.emotion-26 path.clipped {
   fill: transparent;
 }
 
-.emotion-24 svg {
+.emotion-26 svg {
   width: 100%;
   height: 100%;
 }
 
-.emotion-26 {
+.emotion-28 {
   visibility: hidden;
   width: 321px;
   background-color: #555;
@@ -2501,7 +2690,7 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
   transition: opacity 0.3s;
 }
 
-.emotion-28 {
+.emotion-30 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2516,7 +2705,7 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
   justify-content: flex-end;
 }
 
-.emotion-30 {
+.emotion-32 {
   height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2535,46 +2724,46 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
     class="emotion-0 emotion-1"
   >
     <mock-link
-      classname="css-abwcjt-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
+      class="emotion-2 emotion-3"
       to=""
     >
       <div
-        class="emotion-2 emotion-3"
+        class="emotion-4 emotion-5"
       >
         ←
       </div>
       <div>
         <div
-          class="emotion-4 emotion-5"
+          class="emotion-6 emotion-7"
         >
           editor.editorToolbar.backCollection
         </div>
         <div
-          class="emotion-6 emotion-7"
+          class="emotion-8 emotion-9"
         >
           editor.editorToolbar.changesSaved
         </div>
       </div>
     </mock-link>
     <div
-      class="emotion-8 emotion-9"
+      class="emotion-10 emotion-11"
     >
       <div
-        class="emotion-10 emotion-11"
+        class="emotion-12 emotion-13"
       >
         <button
-          class="emotion-12 emotion-13"
+          class="emotion-14 emotion-15"
           disabled=""
         >
           editor.editorToolbar.save
         </button>
         <div
-          class="emotion-14 emotion-15 emotion-16"
+          class="emotion-16 emotion-17 emotion-18"
         >
           <span
             aria-expanded="false"
             aria-haspopup="true"
-            class="emotion-17 emotion-18"
+            class="emotion-19 emotion-20"
             role="button"
             tabindex="0"
           >
@@ -2582,13 +2771,13 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
           </span>
         </div>
         <div
-          class="emotion-19 emotion-20"
+          class="emotion-21 emotion-22"
         >
           <div
-            class="emotion-21 emotion-22"
+            class="emotion-23 emotion-24"
           >
             <span
-              class="tooltip emotion-23 emotion-24 emotion-25"
+              class="tooltip emotion-25 emotion-26 emotion-27"
             >
               <svg
                 class="bi bi-info-circle"
@@ -2608,18 +2797,18 @@ exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring
             </span>
           </div>
           <div
-            class="emotion-26 emotion-27"
+            class="emotion-28 emotion-29"
           >
             editor.editorToolbar.statusInfoTooltipInReview
           </div>
         </div>
       </div>
       <div
-        class="emotion-28 emotion-29"
+        class="emotion-30 emotion-31"
       />
     </div>
     <div
-      class="emotion-30 emotion-31"
+      class="emotion-32 emotion-33"
     >
       <mock-settings-dropdown />
     </div>
@@ -2649,18 +2838,39 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 }
 
 .emotion-2 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  border-right-width: 1px;
+  font-weight: normal;
+  padding: 0 20px;
+}
+
+.emotion-2:hover,
+.emotion-2:focus {
+  background-color: #f1f2f4;
+}
+
+.emotion-4 {
   color: #313d3e;
   font-size: 21px;
   font-weight: 600;
   margin-right: 16px;
 }
 
-.emotion-4 {
+.emotion-6 {
   color: #313d3e;
   font-size: 14px;
 }
 
-.emotion-6 {
+.emotion-8 {
   margin-top: 6px;
   font-size: 13px;
   line-height: 1;
@@ -2670,7 +2880,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   color: #005614;
 }
 
-.emotion-8 {
+.emotion-10 {
   height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2694,7 +2904,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   padding: 0 10px;
 }
 
-.emotion-10 {
+.emotion-12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2705,7 +2915,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   align-items: center;
 }
 
-.emotion-12 {
+.emotion-14 {
   border: 0;
   border-radius: 5px;
   cursor: pointer;
@@ -2725,18 +2935,18 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 }
 
 @media (max-width: 1200px) {
-  .emotion-12 {
+  .emotion-14 {
     padding: 0 10px;
   }
 }
 
-.emotion-12[disabled] {
+.emotion-14[disabled] {
   background-color: #eff0f4;
   color: #798291;
   cursor: default;
 }
 
-.emotion-14 {
+.emotion-16 {
   border: 0;
   border-radius: 5px;
   cursor: pointer;
@@ -2756,12 +2966,12 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 }
 
 @media (max-width: 1200px) {
-  .emotion-14 {
+  .emotion-16 {
     padding: 0 10px;
   }
 }
 
-.emotion-16 {
+.emotion-18 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2776,7 +2986,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   justify-content: flex-end;
 }
 
-.emotion-18 {
+.emotion-20 {
   height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2795,51 +3005,51 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
     class="emotion-0 emotion-1"
   >
     <mock-link
-      classname="css-abwcjt-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
+      class="emotion-2 emotion-3"
       to=""
     >
       <div
-        class="emotion-2 emotion-3"
+        class="emotion-4 emotion-5"
       >
         ←
       </div>
       <div>
         <div
-          class="emotion-4 emotion-5"
+          class="emotion-6 emotion-7"
         >
           editor.editorToolbar.backCollection
         </div>
         <div
-          class="emotion-6 emotion-7"
+          class="emotion-8 emotion-9"
         >
           editor.editorToolbar.changesSaved
         </div>
       </div>
     </mock-link>
     <div
-      class="emotion-8 emotion-9"
+      class="emotion-10 emotion-11"
     >
       <div
-        class="emotion-10 emotion-11"
+        class="emotion-12 emotion-13"
       >
         <button
-          class="emotion-12 emotion-13"
+          class="emotion-14 emotion-15"
           disabled=""
         >
           editor.editorToolbar.save
         </button>
         <button
-          class="emotion-14 emotion-15"
+          class="emotion-16 emotion-17"
         >
           editor.editorToolbar.deletePublishedEntry
         </button>
       </div>
       <div
-        class="emotion-16 emotion-17"
+        class="emotion-18 emotion-19"
       />
     </div>
     <div
-      class="emotion-18 emotion-19"
+      class="emotion-20 emotion-21"
     >
       <mock-settings-dropdown />
     </div>
@@ -2869,18 +3079,39 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 }
 
 .emotion-2 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  border-right-width: 1px;
+  font-weight: normal;
+  padding: 0 20px;
+}
+
+.emotion-2:hover,
+.emotion-2:focus {
+  background-color: #f1f2f4;
+}
+
+.emotion-4 {
   color: #313d3e;
   font-size: 21px;
   font-weight: 600;
   margin-right: 16px;
 }
 
-.emotion-4 {
+.emotion-6 {
   color: #313d3e;
   font-size: 14px;
 }
 
-.emotion-6 {
+.emotion-8 {
   margin-top: 6px;
   font-size: 13px;
   line-height: 1;
@@ -2890,7 +3121,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   color: #005614;
 }
 
-.emotion-8 {
+.emotion-10 {
   height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2914,7 +3145,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   padding: 0 10px;
 }
 
-.emotion-10 {
+.emotion-12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2925,7 +3156,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   align-items: center;
 }
 
-.emotion-12 {
+.emotion-14 {
   border: 0;
   border-radius: 5px;
   cursor: pointer;
@@ -2945,18 +3176,18 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 }
 
 @media (max-width: 1200px) {
-  .emotion-12 {
+  .emotion-14 {
     padding: 0 10px;
   }
 }
 
-.emotion-12[disabled] {
+.emotion-14[disabled] {
   background-color: #eff0f4;
   color: #798291;
   cursor: default;
 }
 
-.emotion-14 {
+.emotion-16 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2971,7 +3202,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   justify-content: flex-end;
 }
 
-.emotion-16 {
+.emotion-18 {
   height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2990,46 +3221,46 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
     class="emotion-0 emotion-1"
   >
     <mock-link
-      classname="css-abwcjt-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
+      class="emotion-2 emotion-3"
       to=""
     >
       <div
-        class="emotion-2 emotion-3"
+        class="emotion-4 emotion-5"
       >
         ←
       </div>
       <div>
         <div
-          class="emotion-4 emotion-5"
+          class="emotion-6 emotion-7"
         >
           editor.editorToolbar.backCollection
         </div>
         <div
-          class="emotion-6 emotion-7"
+          class="emotion-8 emotion-9"
         >
           editor.editorToolbar.changesSaved
         </div>
       </div>
     </mock-link>
     <div
-      class="emotion-8 emotion-9"
+      class="emotion-10 emotion-11"
     >
       <div
-        class="emotion-10 emotion-11"
+        class="emotion-12 emotion-13"
       >
         <button
-          class="emotion-12 emotion-13"
+          class="emotion-14 emotion-15"
           disabled=""
         >
           editor.editorToolbar.save
         </button>
       </div>
       <div
-        class="emotion-14 emotion-15"
+        class="emotion-16 emotion-17"
       />
     </div>
     <div
-      class="emotion-16 emotion-17"
+      class="emotion-18 emotion-19"
     >
       <mock-settings-dropdown />
     </div>
@@ -3059,18 +3290,39 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 }
 
 .emotion-2 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  border-right-width: 1px;
+  font-weight: normal;
+  padding: 0 20px;
+}
+
+.emotion-2:hover,
+.emotion-2:focus {
+  background-color: #f1f2f4;
+}
+
+.emotion-4 {
   color: #313d3e;
   font-size: 21px;
   font-weight: 600;
   margin-right: 16px;
 }
 
-.emotion-4 {
+.emotion-6 {
   color: #313d3e;
   font-size: 14px;
 }
 
-.emotion-6 {
+.emotion-8 {
   margin-top: 6px;
   font-size: 13px;
   line-height: 1;
@@ -3080,7 +3332,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   color: #005614;
 }
 
-.emotion-8 {
+.emotion-10 {
   height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3104,7 +3356,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   padding: 0 10px;
 }
 
-.emotion-10 {
+.emotion-12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3115,7 +3367,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   align-items: center;
 }
 
-.emotion-12 {
+.emotion-14 {
   border: 0;
   border-radius: 5px;
   cursor: pointer;
@@ -3135,18 +3387,18 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 }
 
 @media (max-width: 1200px) {
-  .emotion-12 {
+  .emotion-14 {
     padding: 0 10px;
   }
 }
 
-.emotion-12[disabled] {
+.emotion-14[disabled] {
   background-color: #eff0f4;
   color: #798291;
   cursor: default;
 }
 
-.emotion-14 {
+.emotion-16 {
   border: 0;
   border-radius: 5px;
   cursor: pointer;
@@ -3166,12 +3418,12 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 }
 
 @media (max-width: 1200px) {
-  .emotion-14 {
+  .emotion-16 {
     padding: 0 10px;
   }
 }
 
-.emotion-16 {
+.emotion-18 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3186,7 +3438,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   justify-content: flex-end;
 }
 
-.emotion-18 {
+.emotion-20 {
   height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3205,51 +3457,51 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
     class="emotion-0 emotion-1"
   >
     <mock-link
-      classname="css-abwcjt-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
+      class="emotion-2 emotion-3"
       to=""
     >
       <div
-        class="emotion-2 emotion-3"
+        class="emotion-4 emotion-5"
       >
         ←
       </div>
       <div>
         <div
-          class="emotion-4 emotion-5"
+          class="emotion-6 emotion-7"
         >
           editor.editorToolbar.backCollection
         </div>
         <div
-          class="emotion-6 emotion-7"
+          class="emotion-8 emotion-9"
         >
           editor.editorToolbar.changesSaved
         </div>
       </div>
     </mock-link>
     <div
-      class="emotion-8 emotion-9"
+      class="emotion-10 emotion-11"
     >
       <div
-        class="emotion-10 emotion-11"
+        class="emotion-12 emotion-13"
       >
         <button
-          class="emotion-12 emotion-13"
+          class="emotion-14 emotion-15"
           disabled=""
         >
           editor.editorToolbar.save
         </button>
         <button
-          class="emotion-14 emotion-15"
+          class="emotion-16 emotion-17"
         >
           editor.editorToolbar.deleteUnpublishedEntry
         </button>
       </div>
       <div
-        class="emotion-16 emotion-17"
+        class="emotion-18 emotion-19"
       />
     </div>
     <div
-      class="emotion-18 emotion-19"
+      class="emotion-20 emotion-21"
     >
       <mock-settings-dropdown />
     </div>
@@ -3279,18 +3531,39 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 }
 
 .emotion-2 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  border-right-width: 1px;
+  font-weight: normal;
+  padding: 0 20px;
+}
+
+.emotion-2:hover,
+.emotion-2:focus {
+  background-color: #f1f2f4;
+}
+
+.emotion-4 {
   color: #313d3e;
   font-size: 21px;
   font-weight: 600;
   margin-right: 16px;
 }
 
-.emotion-4 {
+.emotion-6 {
   color: #313d3e;
   font-size: 14px;
 }
 
-.emotion-6 {
+.emotion-8 {
   margin-top: 6px;
   font-size: 13px;
   line-height: 1;
@@ -3300,7 +3573,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   color: #005614;
 }
 
-.emotion-8 {
+.emotion-10 {
   height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3324,7 +3597,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   padding: 0 10px;
 }
 
-.emotion-10 {
+.emotion-12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3335,7 +3608,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   align-items: center;
 }
 
-.emotion-12 {
+.emotion-14 {
   border: 0;
   border-radius: 5px;
   cursor: pointer;
@@ -3355,18 +3628,18 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 }
 
 @media (max-width: 1200px) {
-  .emotion-12 {
+  .emotion-14 {
     padding: 0 10px;
   }
 }
 
-.emotion-12[disabled] {
+.emotion-14[disabled] {
   background-color: #eff0f4;
   color: #798291;
   cursor: default;
 }
 
-.emotion-14 {
+.emotion-16 {
   border: 0;
   border-radius: 5px;
   cursor: pointer;
@@ -3386,12 +3659,12 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 }
 
 @media (max-width: 1200px) {
-  .emotion-14 {
+  .emotion-16 {
     padding: 0 10px;
   }
 }
 
-.emotion-16 {
+.emotion-18 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3406,7 +3679,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   justify-content: flex-end;
 }
 
-.emotion-18 {
+.emotion-20 {
   height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3425,51 +3698,51 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
     class="emotion-0 emotion-1"
   >
     <mock-link
-      classname="css-abwcjt-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
+      class="emotion-2 emotion-3"
       to=""
     >
       <div
-        class="emotion-2 emotion-3"
+        class="emotion-4 emotion-5"
       >
         ←
       </div>
       <div>
         <div
-          class="emotion-4 emotion-5"
+          class="emotion-6 emotion-7"
         >
           editor.editorToolbar.backCollection
         </div>
         <div
-          class="emotion-6 emotion-7"
+          class="emotion-8 emotion-9"
         >
           editor.editorToolbar.changesSaved
         </div>
       </div>
     </mock-link>
     <div
-      class="emotion-8 emotion-9"
+      class="emotion-10 emotion-11"
     >
       <div
-        class="emotion-10 emotion-11"
+        class="emotion-12 emotion-13"
       >
         <button
-          class="emotion-12 emotion-13"
+          class="emotion-14 emotion-15"
           disabled=""
         >
           editor.editorToolbar.save
         </button>
         <button
-          class="emotion-14 emotion-15"
+          class="emotion-16 emotion-17"
         >
           editor.editorToolbar.deleteUnpublishedEntry
         </button>
       </div>
       <div
-        class="emotion-16 emotion-17"
+        class="emotion-18 emotion-19"
       />
     </div>
     <div
-      class="emotion-18 emotion-19"
+      class="emotion-20 emotion-21"
     >
       <mock-settings-dropdown />
     </div>
@@ -3499,18 +3772,39 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 }
 
 .emotion-2 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  border-right-width: 1px;
+  font-weight: normal;
+  padding: 0 20px;
+}
+
+.emotion-2:hover,
+.emotion-2:focus {
+  background-color: #f1f2f4;
+}
+
+.emotion-4 {
   color: #313d3e;
   font-size: 21px;
   font-weight: 600;
   margin-right: 16px;
 }
 
-.emotion-4 {
+.emotion-6 {
   color: #313d3e;
   font-size: 14px;
 }
 
-.emotion-6 {
+.emotion-8 {
   margin-top: 6px;
   font-size: 13px;
   line-height: 1;
@@ -3520,7 +3814,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   color: #005614;
 }
 
-.emotion-8 {
+.emotion-10 {
   height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3544,7 +3838,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   padding: 0 10px;
 }
 
-.emotion-10 {
+.emotion-12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3555,7 +3849,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   align-items: center;
 }
 
-.emotion-12 {
+.emotion-14 {
   border: 0;
   border-radius: 5px;
   cursor: pointer;
@@ -3575,18 +3869,18 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 }
 
 @media (max-width: 1200px) {
-  .emotion-12 {
+  .emotion-14 {
     padding: 0 10px;
   }
 }
 
-.emotion-12[disabled] {
+.emotion-14[disabled] {
   background-color: #eff0f4;
   color: #798291;
   cursor: default;
 }
 
-.emotion-14 {
+.emotion-16 {
   border: 0;
   border-radius: 5px;
   cursor: pointer;
@@ -3606,12 +3900,12 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 }
 
 @media (max-width: 1200px) {
-  .emotion-14 {
+  .emotion-16 {
     padding: 0 10px;
   }
 }
 
-.emotion-16 {
+.emotion-18 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3626,7 +3920,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   justify-content: flex-end;
 }
 
-.emotion-18 {
+.emotion-20 {
   height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3645,51 +3939,51 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
     class="emotion-0 emotion-1"
   >
     <mock-link
-      classname="css-abwcjt-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
+      class="emotion-2 emotion-3"
       to=""
     >
       <div
-        class="emotion-2 emotion-3"
+        class="emotion-4 emotion-5"
       >
         ←
       </div>
       <div>
         <div
-          class="emotion-4 emotion-5"
+          class="emotion-6 emotion-7"
         >
           editor.editorToolbar.backCollection
         </div>
         <div
-          class="emotion-6 emotion-7"
+          class="emotion-8 emotion-9"
         >
           editor.editorToolbar.changesSaved
         </div>
       </div>
     </mock-link>
     <div
-      class="emotion-8 emotion-9"
+      class="emotion-10 emotion-11"
     >
       <div
-        class="emotion-10 emotion-11"
+        class="emotion-12 emotion-13"
       >
         <button
-          class="emotion-12 emotion-13"
+          class="emotion-14 emotion-15"
           disabled=""
         >
           editor.editorToolbar.save
         </button>
         <button
-          class="emotion-14 emotion-15"
+          class="emotion-16 emotion-17"
         >
           editor.editorToolbar.deleteUnpublishedChanges
         </button>
       </div>
       <div
-        class="emotion-16 emotion-17"
+        class="emotion-18 emotion-19"
       />
     </div>
     <div
-      class="emotion-18 emotion-19"
+      class="emotion-20 emotion-21"
     >
       <mock-settings-dropdown />
     </div>
@@ -3719,18 +4013,39 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 }
 
 .emotion-2 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: 0 solid #dfdfe3;
+  border-right-width: 1px;
+  font-weight: normal;
+  padding: 0 20px;
+}
+
+.emotion-2:hover,
+.emotion-2:focus {
+  background-color: #f1f2f4;
+}
+
+.emotion-4 {
   color: #313d3e;
   font-size: 21px;
   font-weight: 600;
   margin-right: 16px;
 }
 
-.emotion-4 {
+.emotion-6 {
   color: #313d3e;
   font-size: 14px;
 }
 
-.emotion-6 {
+.emotion-8 {
   margin-top: 6px;
   font-size: 13px;
   line-height: 1;
@@ -3740,7 +4055,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   color: #005614;
 }
 
-.emotion-8 {
+.emotion-10 {
   height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3764,7 +4079,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   padding: 0 10px;
 }
 
-.emotion-10 {
+.emotion-12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3775,7 +4090,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   align-items: center;
 }
 
-.emotion-12 {
+.emotion-14 {
   border: 0;
   border-radius: 5px;
   cursor: pointer;
@@ -3795,18 +4110,18 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 }
 
 @media (max-width: 1200px) {
-  .emotion-12 {
+  .emotion-14 {
     padding: 0 10px;
   }
 }
 
-.emotion-12[disabled] {
+.emotion-14[disabled] {
   background-color: #eff0f4;
   color: #798291;
   cursor: default;
 }
 
-.emotion-14 {
+.emotion-16 {
   border: 0;
   border-radius: 5px;
   cursor: pointer;
@@ -3826,12 +4141,12 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 }
 
 @media (max-width: 1200px) {
-  .emotion-14 {
+  .emotion-16 {
     padding: 0 10px;
   }
 }
 
-.emotion-16 {
+.emotion-18 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3846,7 +4161,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   justify-content: flex-end;
 }
 
-.emotion-18 {
+.emotion-20 {
   height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3865,51 +4180,51 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
     class="emotion-0 emotion-1"
   >
     <mock-link
-      classname="css-abwcjt-ToolbarSectionBackLink-toolbarSection e1d2l9mo18"
+      class="emotion-2 emotion-3"
       to=""
     >
       <div
-        class="emotion-2 emotion-3"
+        class="emotion-4 emotion-5"
       >
         ←
       </div>
       <div>
         <div
-          class="emotion-4 emotion-5"
+          class="emotion-6 emotion-7"
         >
           editor.editorToolbar.backCollection
         </div>
         <div
-          class="emotion-6 emotion-7"
+          class="emotion-8 emotion-9"
         >
           editor.editorToolbar.changesSaved
         </div>
       </div>
     </mock-link>
     <div
-      class="emotion-8 emotion-9"
+      class="emotion-10 emotion-11"
     >
       <div
-        class="emotion-10 emotion-11"
+        class="emotion-12 emotion-13"
       >
         <button
-          class="emotion-12 emotion-13"
+          class="emotion-14 emotion-15"
           disabled=""
         >
           editor.editorToolbar.save
         </button>
         <button
-          class="emotion-14 emotion-15"
+          class="emotion-16 emotion-17"
         >
           editor.editorToolbar.deleteUnpublishedChanges
         </button>
       </div>
       <div
-        class="emotion-16 emotion-17"
+        class="emotion-18 emotion-19"
       />
     </div>
     <div
-      class="emotion-18 emotion-19"
+      class="emotion-20 emotion-21"
     >
       <mock-settings-dropdown />
     </div>