diff --git a/packages/netlify-cms-core/src/components/Editor/EditorToolbar.js b/packages/netlify-cms-core/src/components/Editor/EditorToolbar.js
index 82eacedf..8609af58 100644
--- a/packages/netlify-cms-core/src/components/Editor/EditorToolbar.js
+++ b/packages/netlify-cms-core/src/components/Editor/EditorToolbar.js
@@ -41,6 +41,40 @@ const styles = {
   `,
 };
 
+const TooltipText = styled.div`
+  visibility: hidden;
+  width: 321px;
+  background-color: #555;
+  color: #fff;
+  text-align: unset;
+  border-radius: 6px;
+  padding: 5px;
+
+  /* Position the tooltip text */
+  position: absolute;
+  z-index: 1;
+  top: 145%;
+  left: 50%;
+  margin-left: -320px;
+
+  /* Fade in tooltip */
+  opacity: 0;
+  transition: opacity 0.3s;
+`;
+
+const Tooltip = styled.div`
+  position: relative;
+  display: inline-block;
+  &:hover + ${TooltipText} {
+    visibility: visible;
+    opacity: 0.9;
+  }
+`;
+
+const TooltipContainer = styled.div`
+  position: relative;
+`;
+
 const DropdownButton = styled(StyledDropdownButton)`
   ${styles.noOverflow}
   @media (max-width: 1200px) {
@@ -301,40 +335,64 @@ export class EditorToolbar extends React.Component {
     );
   };
 
+  renderStatusInfoTooltip = () => {
+    const { t, currentStatus } = this.props;
+
+    const statusToLocaleKey = {
+      [status.get('DRAFT')]: 'statusInfoTooltipDraft',
+      [status.get('PENDING_REVIEW')]: 'statusInfoTooltipInReview',
+    };
+
+    const statusKey = Object.keys(statusToLocaleKey).find(key => key === currentStatus);
+    return (
+      <TooltipContainer>
+        <Tooltip>
+          <Icon type="info-circle" size="small" className="tooltip" />
+        </Tooltip>
+        {statusKey && (
+          <TooltipText>{t(`editor.editorToolbar.${statusToLocaleKey[statusKey]}`)}</TooltipText>
+        )}
+      </TooltipContainer>
+    );
+  };
+
   renderWorkflowStatusControls = () => {
     const { isUpdatingStatus, onChangeStatus, currentStatus, t, useOpenAuthoring } = this.props;
     return (
-      <ToolbarDropdown
-        dropdownTopOverlap="40px"
-        dropdownWidth="120px"
-        renderButton={() => (
-          <StatusButton>
-            {isUpdatingStatus
-              ? t('editor.editorToolbar.updating')
-              : t('editor.editorToolbar.setStatus')}
-          </StatusButton>
-        )}
-      >
-        <StatusDropdownItem
-          label={t('editor.editorToolbar.draft')}
-          onClick={() => onChangeStatus('DRAFT')}
-          icon={currentStatus === status.get('DRAFT') ? 'check' : null}
-        />
-        <StatusDropdownItem
-          label={t('editor.editorToolbar.inReview')}
-          onClick={() => onChangeStatus('PENDING_REVIEW')}
-          icon={currentStatus === status.get('PENDING_REVIEW') ? 'check' : null}
-        />
-        {useOpenAuthoring ? (
-          ''
-        ) : (
+      <>
+        <ToolbarDropdown
+          dropdownTopOverlap="40px"
+          dropdownWidth="120px"
+          renderButton={() => (
+            <StatusButton>
+              {isUpdatingStatus
+                ? t('editor.editorToolbar.updating')
+                : t('editor.editorToolbar.setStatus')}
+            </StatusButton>
+          )}
+        >
           <StatusDropdownItem
-            label={t('editor.editorToolbar.ready')}
-            onClick={() => onChangeStatus('PENDING_PUBLISH')}
-            icon={currentStatus === status.get('PENDING_PUBLISH') ? 'check' : null}
+            label={t('editor.editorToolbar.draft')}
+            onClick={() => onChangeStatus('DRAFT')}
+            icon={currentStatus === status.get('DRAFT') ? 'check' : null}
           />
-        )}
-      </ToolbarDropdown>
+          <StatusDropdownItem
+            label={t('editor.editorToolbar.inReview')}
+            onClick={() => onChangeStatus('PENDING_REVIEW')}
+            icon={currentStatus === status.get('PENDING_REVIEW') ? 'check' : null}
+          />
+          {useOpenAuthoring ? (
+            ''
+          ) : (
+            <StatusDropdownItem
+              label={t('editor.editorToolbar.ready')}
+              onClick={() => onChangeStatus('PENDING_PUBLISH')}
+              icon={currentStatus === status.get('PENDING_PUBLISH') ? 'check' : null}
+            />
+          )}
+        </ToolbarDropdown>
+        {useOpenAuthoring && this.renderStatusInfoTooltip()}
+      </>
     );
   };
 
diff --git a/packages/netlify-cms-core/src/components/Editor/__tests__/EditorToolbar.spec.js b/packages/netlify-cms-core/src/components/Editor/__tests__/EditorToolbar.spec.js
index 1225d423..9891c045 100644
--- a/packages/netlify-cms-core/src/components/Editor/__tests__/EditorToolbar.spec.js
+++ b/packages/netlify-cms-core/src/components/Editor/__tests__/EditorToolbar.spec.js
@@ -4,21 +4,6 @@ import { fromJS } from 'immutable';
 
 import { EditorToolbar } from '../EditorToolbar';
 
-jest.mock('netlify-cms-ui-default', () => ({
-  // eslint-disable-next-line react/display-name
-  Icon: props => <mock-icon {...props} />,
-  // eslint-disable-next-line react/display-name
-  Dropdown: props => <mock-dropdown {...props} />,
-  // eslint-disable-next-line react/display-name
-  DropdownItem: props => <mock-dropdown-item {...props} />,
-  // eslint-disable-next-line react/display-name
-  StyledDropdownButton: props => <mock-dropdown-button {...props} />,
-  colorsRaw: {},
-  colors: {},
-  components: {},
-  buttons: {},
-  zIndex: {},
-}));
 jest.mock('../../UI', () => ({
   // eslint-disable-next-line react/display-name
   SettingsDropdown: props => <mock-settings-dropdown {...props} />,
@@ -112,5 +97,19 @@ describe('EditorToolbar', () => {
       );
       expect(asFragment()).toMatchSnapshot();
     });
+
+    ['draft', 'pending_review', 'pending_publish'].forEach(status => {
+      it(`should render with status=${status},useOpenAuthoring=${useOpenAuthoring}`, () => {
+        const { asFragment } = render(
+          <EditorToolbar
+            {...props}
+            hasWorkflow={true}
+            currentStatus={status}
+            useOpenAuthoring={useOpenAuthoring}
+          />,
+        );
+        expect(asFragment()).toMatchSnapshot();
+      });
+    });
   });
 });
diff --git a/packages/netlify-cms-core/src/components/Editor/__tests__/__snapshots__/EditorToolbar.spec.js.snap b/packages/netlify-cms-core/src/components/Editor/__tests__/__snapshots__/EditorToolbar.spec.js.snap
index 486f765f..480ff697 100644
--- a/packages/netlify-cms-core/src/components/Editor/__tests__/__snapshots__/EditorToolbar.spec.js.snap
+++ b/packages/netlify-cms-core/src/components/Editor/__tests__/__snapshots__/EditorToolbar.spec.js.snap
@@ -9,6 +9,7 @@ exports[`EditorToolbar should render with default props 1`] = `
   left: 0;
   width: 100%;
   min-width: 800px;
+  z-index: 300;
   background-color: #fff;
   height: 66px;
   display: -webkit-box;
@@ -22,26 +23,36 @@ exports[`EditorToolbar should render with default props 1`] = `
 }
 
 .emotion-0 {
+  color: #313d3e;
   font-size: 21px;
   font-weight: 600;
   margin-right: 16px;
 }
 
 .emotion-2 {
+  color: #313d3e;
   font-size: 14px;
 }
 
 .emotion-2 {
+  color: #313d3e;
   font-size: 14px;
 }
 
 .emotion-4 {
   margin-top: 6px;
+  font-size: 13px;
+  line-height: 1;
+  display: inline-block;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: #005614;
 }
 
 .emotion-4::after {
   height: 12px;
   width: 15.5px;
+  color: #005614;
   margin-left: 5px;
   position: relative;
   top: 1px;
@@ -58,7 +69,7 @@ exports[`EditorToolbar should render with default props 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  border: 0 solid;
+  border: 0 solid #dfdfe3;
   -webkit-flex: 10;
   -ms-flex: 10;
   flex: 10;
@@ -85,11 +96,22 @@ exports[`EditorToolbar should render with default props 1`] = `
 }
 
 .emotion-6 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
   margin: 0 10px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   display: block;
+  background-color: #fcefea;
+  color: #ff003b;
 }
 
 @media (max-width:1200px) {
@@ -114,11 +136,22 @@ exports[`EditorToolbar should render with default props 1`] = `
 }
 
 .emotion-10 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
   margin: 0 10px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   display: block;
+  background-color: #ddf5f9;
+  color: #17a2b8;
 }
 
 @media (max-width:1200px) {
@@ -137,7 +170,7 @@ exports[`EditorToolbar should render with default props 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  border: 0 solid;
+  border: 0 solid #dfdfe3;
   border-left-width: 1px;
   padding: 0 7px;
 }
@@ -146,7 +179,7 @@ exports[`EditorToolbar should render with default props 1`] = `
     class="emotion-18 emotion-19"
   >
     <mock-link
-      classname="css-1rp52h5-ToolbarSectionBackLink-toolbarSection evqrzhe5"
+      classname="css-1e27f5b-ToolbarSectionBackLink-toolbarSection evqrzhe8"
       to=""
     >
       <div
@@ -200,15 +233,16 @@ exports[`EditorToolbar should render with default props 1`] = `
 </DocumentFragment>
 `;
 
-exports[`EditorToolbar should render with workflow controls hasUnpublishedChanges=false,isNewEntry=false,isModification=false,useOpenAuthoring=false 1`] = `
+exports[`EditorToolbar should render with status=draft,useOpenAuthoring=false 1`] = `
 <DocumentFragment>
-  .emotion-18 {
+  .emotion-23 {
   box-shadow: 0 2px 6px 0 rgba(68,74,87,0.05),0 1px 3px 0 rgba(68,74,87,0.1),0 2px 54px rgba(0,0,0,0.1);
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   min-width: 800px;
+  z-index: 300;
   background-color: #fff;
   height: 66px;
   display: -webkit-box;
@@ -222,33 +256,43 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 }
 
 .emotion-0 {
+  color: #313d3e;
   font-size: 21px;
   font-weight: 600;
   margin-right: 16px;
 }
 
 .emotion-2 {
+  color: #313d3e;
   font-size: 14px;
 }
 
 .emotion-2 {
+  color: #313d3e;
   font-size: 14px;
 }
 
 .emotion-4 {
   margin-top: 6px;
+  font-size: 13px;
+  line-height: 1;
+  display: inline-block;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: #005614;
 }
 
 .emotion-4::after {
   height: 12px;
   width: 15.5px;
+  color: #005614;
   margin-left: 5px;
   position: relative;
   top: 1px;
   content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' width='15' height='11'><path fill='#005614' fill-rule='nonzero' d='M4.016 11l-.648-.946a6.202 6.202 0 0 0-.157-.22 9.526 9.526 0 0 1-.096-.133l-.511-.7a7.413 7.413 0 0 0-.162-.214l-.102-.134-.265-.346a26.903 26.903 0 0 0-.543-.687l-.11-.136c-.143-.179-.291-.363-.442-.54l-.278-.332a8.854 8.854 0 0 0-.192-.225L.417 6.28l-.283-.324L0 5.805l1.376-1.602c.04.027.186.132.186.132l.377.272.129.095c.08.058.16.115.237.175l.37.28c.192.142.382.292.565.436l.162.126c.27.21.503.398.714.574l.477.393c.078.064.156.127.23.194l.433.375.171-.205A50.865 50.865 0 0 1 8.18 4.023a35.163 35.163 0 0 1 2.382-2.213c.207-.174.42-.349.635-.518l.328-.255.333-.245c.072-.055.146-.107.221-.159l.117-.083c.11-.077.225-.155.341-.23.163-.11.334-.217.503-.32l1.158 1.74a11.908 11.908 0 0 0-.64.55l-.065.06c-.07.062-.139.125-.207.192l-.258.249-.26.265c-.173.176-.345.357-.512.539a32.626 32.626 0 0 0-1.915 2.313 52.115 52.115 0 0 0-2.572 3.746l-.392.642-.19.322-.233.382H4.016z'/></svg>");
 }
 
-.emotion-14 {
+.emotion-19 {
   height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -258,7 +302,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  border: 0 solid;
+  border: 0 solid #dfdfe3;
   -webkit-flex: 10;
   -ms-flex: 10;
   flex: 10;
@@ -285,11 +329,1985 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 }
 
 .emotion-8 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
   margin: 0 10px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   display: block;
+  background-color: #fcefea;
+  color: #ff003b;
+}
+
+@media (max-width:1200px) {
+  .emotion-8 {
+    padding: 0 10px;
+  }
+}
+
+.emotion-17 {
+  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;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+}
+
+.emotion-21 {
+  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-left-width: 1px;
+  padding: 0 7px;
+}
+
+.emotion-6 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
+  margin: 0 10px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+  background-color: #e8f5fe;
+  color: #3a69c7;
+}
+
+@media (max-width:1200px) {
+  .emotion-6 {
+    padding: 0 10px;
+  }
+}
+
+.emotion-15 {
+  position: relative;
+  font-size: 14px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  margin: 0 10px;
+}
+
+.emotion-15 .ei6fm2r1 {
+  color: #17a2b8;
+}
+
+.emotion-12 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
+  display: block;
+  padding-left: 20px;
+  padding-right: 40px;
+  position: relative;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  background-color: #ddf5f9;
+  color: #17a2b8;
+}
+
+.emotion-12:after {
+  color: #fff;
+  width: 0;
+  height: 0;
+  border: 5px solid transparent;
+  border-radius: 2px;
+  border-top: 6px solid currentColor;
+  border-bottom: 0;
+  content: '';
+  display: block;
+  position: absolute;
+  top: 16px;
+  right: 10px;
+  color: currentColor;
+}
+
+@media (max-width:1200px) {
+  .emotion-12 {
+    padding-left: 10px;
+  }
+}
+
+<div
+    class="emotion-23 emotion-24"
+  >
+    <mock-link
+      classname="css-1e27f5b-ToolbarSectionBackLink-toolbarSection evqrzhe8"
+      to=""
+    >
+      <div
+        class="emotion-0 emotion-1"
+      >
+        ←
+      </div>
+      <div>
+        <div
+          class="emotion-2 emotion-3"
+        >
+          editor.editorToolbar.backCollection
+        </div>
+        <div
+          class="emotion-4 emotion-5"
+        >
+          editor.editorToolbar.changesSaved
+        </div>
+      </div>
+    </mock-link>
+    <div
+      class="emotion-19 emotion-20"
+    >
+      <div
+        class="emotion-10 emotion-11"
+      >
+        <button
+          class="emotion-6 emotion-7"
+        >
+          editor.editorToolbar.save
+        </button>
+        <button
+          class="emotion-8 emotion-9"
+        >
+          editor.editorToolbar.deletePublishedEntry
+        </button>
+      </div>
+      <div
+        class="emotion-17 emotion-18"
+      >
+        <div
+          class="emotion-14 emotion-15 emotion-16"
+        >
+          <span
+            aria-expanded="false"
+            aria-haspopup="true"
+            class="emotion-12 emotion-13"
+            role="button"
+            tabindex="0"
+          >
+            editor.editorToolbar.setStatus
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="emotion-21 emotion-22"
+    >
+      <mock-settings-dropdown />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`EditorToolbar should render with status=draft,useOpenAuthoring=true 1`] = `
+<DocumentFragment>
+  .emotion-30 {
+  box-shadow: 0 2px 6px 0 rgba(68,74,87,0.05),0 1px 3px 0 rgba(68,74,87,0.1),0 2px 54px rgba(0,0,0,0.1);
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  min-width: 800px;
+  z-index: 300;
+  background-color: #fff;
+  height: 66px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+
+.emotion-0 {
+  color: #313d3e;
+  font-size: 21px;
+  font-weight: 600;
+  margin-right: 16px;
+}
+
+.emotion-2 {
+  color: #313d3e;
+  font-size: 14px;
+}
+
+.emotion-2 {
+  color: #313d3e;
+  font-size: 14px;
+}
+
+.emotion-4 {
+  margin-top: 6px;
+  font-size: 13px;
+  line-height: 1;
+  display: inline-block;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: #005614;
+}
+
+.emotion-4::after {
+  height: 12px;
+  width: 15.5px;
+  color: #005614;
+  margin-left: 5px;
+  position: relative;
+  top: 1px;
+  content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' width='15' height='11'><path fill='#005614' fill-rule='nonzero' d='M4.016 11l-.648-.946a6.202 6.202 0 0 0-.157-.22 9.526 9.526 0 0 1-.096-.133l-.511-.7a7.413 7.413 0 0 0-.162-.214l-.102-.134-.265-.346a26.903 26.903 0 0 0-.543-.687l-.11-.136c-.143-.179-.291-.363-.442-.54l-.278-.332a8.854 8.854 0 0 0-.192-.225L.417 6.28l-.283-.324L0 5.805l1.376-1.602c.04.027.186.132.186.132l.377.272.129.095c.08.058.16.115.237.175l.37.28c.192.142.382.292.565.436l.162.126c.27.21.503.398.714.574l.477.393c.078.064.156.127.23.194l.433.375.171-.205A50.865 50.865 0 0 1 8.18 4.023a35.163 35.163 0 0 1 2.382-2.213c.207-.174.42-.349.635-.518l.328-.255.333-.245c.072-.055.146-.107.221-.159l.117-.083c.11-.077.225-.155.341-.23.163-.11.334-.217.503-.32l1.158 1.74a11.908 11.908 0 0 0-.64.55l-.065.06c-.07.062-.139.125-.207.192l-.258.249-.26.265c-.173.176-.345.357-.512.539a32.626 32.626 0 0 0-1.915 2.313 52.115 52.115 0 0 0-2.572 3.746l-.392.642-.19.322-.233.382H4.016z'/></svg>");
+}
+
+.emotion-26 {
+  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;
+  -webkit-flex: 10;
+  -ms-flex: 10;
+  flex: 10;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  padding: 0 10px;
+}
+
+.emotion-8 {
+  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;
+}
+
+.emotion-24 {
+  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;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+}
+
+.emotion-28 {
+  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-left-width: 1px;
+  padding: 0 7px;
+}
+
+.emotion-6 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
+  margin: 0 10px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+  background-color: #e8f5fe;
+  color: #3a69c7;
+}
+
+@media (max-width:1200px) {
+  .emotion-6 {
+    padding: 0 10px;
+  }
+}
+
+.emotion-13 {
+  position: relative;
+  font-size: 14px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  margin: 0 10px;
+}
+
+.emotion-13 .emotion-15 {
+  color: #17a2b8;
+}
+
+.emotion-10 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
+  display: block;
+  padding-left: 20px;
+  padding-right: 40px;
+  position: relative;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  background-color: #ddf5f9;
+  color: #17a2b8;
+}
+
+.emotion-10:after {
+  color: #fff;
+  width: 0;
+  height: 0;
+  border: 5px solid transparent;
+  border-radius: 2px;
+  border-top: 6px solid currentColor;
+  border-bottom: 0;
+  content: '';
+  display: block;
+  position: absolute;
+  top: 16px;
+  right: 10px;
+  color: currentColor;
+}
+
+@media (max-width:1200px) {
+  .emotion-10 {
+    padding-left: 10px;
+  }
+}
+
+.emotion-22 {
+  position: relative;
+}
+
+.emotion-18 {
+  position: relative;
+  display: inline-block;
+}
+
+.emotion-18:hover + .emotion-21 {
+  visibility: visible;
+  opacity: 0.9;
+}
+
+.emotion-16 {
+  display: inline-block;
+  line-height: 0;
+  width: 18px;
+  height: 18px;
+  -webkit-transform: rotate(0deg);
+  -ms-transform: rotate(0deg);
+  transform: rotate(0deg);
+}
+
+.emotion-16 path:not(.no-fill),
+.emotion-16 circle:not(.no-fill),
+.emotion-16 polygon:not(.no-fill),
+.emotion-16 rect:not(.no-fill) {
+  fill: currentColor;
+}
+
+.emotion-16 path.clipped {
+  fill: transparent;
+}
+
+.emotion-16 svg {
+  width: 100%;
+  height: 100%;
+}
+
+.emotion-20 {
+  visibility: hidden;
+  width: 321px;
+  background-color: #555;
+  color: #fff;
+  text-align: unset;
+  border-radius: 6px;
+  padding: 5px;
+  position: absolute;
+  z-index: 1;
+  top: 145%;
+  left: 50%;
+  margin-left: -320px;
+  opacity: 0;
+  -webkit-transition: opacity 0.3s;
+  transition: opacity 0.3s;
+}
+
+<div
+    class="emotion-30 emotion-31"
+  >
+    <mock-link
+      classname="css-1e27f5b-ToolbarSectionBackLink-toolbarSection evqrzhe8"
+      to=""
+    >
+      <div
+        class="emotion-0 emotion-1"
+      >
+        ←
+      </div>
+      <div>
+        <div
+          class="emotion-2 emotion-3"
+        >
+          editor.editorToolbar.backCollection
+        </div>
+        <div
+          class="emotion-4 emotion-5"
+        >
+          editor.editorToolbar.changesSaved
+        </div>
+      </div>
+    </mock-link>
+    <div
+      class="emotion-26 emotion-27"
+    >
+      <div
+        class="emotion-8 emotion-9"
+      >
+        <button
+          class="emotion-6 emotion-7"
+        >
+          editor.editorToolbar.save
+        </button>
+      </div>
+      <div
+        class="emotion-24 emotion-25"
+      >
+        <div
+          class="emotion-12 emotion-13 emotion-14"
+        >
+          <span
+            aria-expanded="false"
+            aria-haspopup="true"
+            class="emotion-10 emotion-11"
+            role="button"
+            tabindex="0"
+          >
+            editor.editorToolbar.setStatus
+          </span>
+        </div>
+        <div
+          class="emotion-22 emotion-23"
+        >
+          <div
+            class="emotion-18 emotion-19"
+          >
+            <span
+              class="tooltip emotion-15 emotion-16 emotion-17"
+            >
+              <svg
+                class="bi bi-info-circle"
+                fill="currentColor"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"
+                />
+                <path
+                  d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"
+                />
+              </svg>
+            </span>
+          </div>
+          <div
+            class="emotion-20 emotion-21"
+          >
+            editor.editorToolbar.statusInfoTooltipDraft
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="emotion-28 emotion-29"
+    >
+      <mock-settings-dropdown />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`EditorToolbar should render with status=pending_publish,useOpenAuthoring=false 1`] = `
+<DocumentFragment>
+  .emotion-23 {
+  box-shadow: 0 2px 6px 0 rgba(68,74,87,0.05),0 1px 3px 0 rgba(68,74,87,0.1),0 2px 54px rgba(0,0,0,0.1);
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  min-width: 800px;
+  z-index: 300;
+  background-color: #fff;
+  height: 66px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+
+.emotion-0 {
+  color: #313d3e;
+  font-size: 21px;
+  font-weight: 600;
+  margin-right: 16px;
+}
+
+.emotion-2 {
+  color: #313d3e;
+  font-size: 14px;
+}
+
+.emotion-2 {
+  color: #313d3e;
+  font-size: 14px;
+}
+
+.emotion-4 {
+  margin-top: 6px;
+  font-size: 13px;
+  line-height: 1;
+  display: inline-block;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: #005614;
+}
+
+.emotion-4::after {
+  height: 12px;
+  width: 15.5px;
+  color: #005614;
+  margin-left: 5px;
+  position: relative;
+  top: 1px;
+  content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' width='15' height='11'><path fill='#005614' fill-rule='nonzero' d='M4.016 11l-.648-.946a6.202 6.202 0 0 0-.157-.22 9.526 9.526 0 0 1-.096-.133l-.511-.7a7.413 7.413 0 0 0-.162-.214l-.102-.134-.265-.346a26.903 26.903 0 0 0-.543-.687l-.11-.136c-.143-.179-.291-.363-.442-.54l-.278-.332a8.854 8.854 0 0 0-.192-.225L.417 6.28l-.283-.324L0 5.805l1.376-1.602c.04.027.186.132.186.132l.377.272.129.095c.08.058.16.115.237.175l.37.28c.192.142.382.292.565.436l.162.126c.27.21.503.398.714.574l.477.393c.078.064.156.127.23.194l.433.375.171-.205A50.865 50.865 0 0 1 8.18 4.023a35.163 35.163 0 0 1 2.382-2.213c.207-.174.42-.349.635-.518l.328-.255.333-.245c.072-.055.146-.107.221-.159l.117-.083c.11-.077.225-.155.341-.23.163-.11.334-.217.503-.32l1.158 1.74a11.908 11.908 0 0 0-.64.55l-.065.06c-.07.062-.139.125-.207.192l-.258.249-.26.265c-.173.176-.345.357-.512.539a32.626 32.626 0 0 0-1.915 2.313 52.115 52.115 0 0 0-2.572 3.746l-.392.642-.19.322-.233.382H4.016z'/></svg>");
+}
+
+.emotion-19 {
+  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;
+  -webkit-flex: 10;
+  -ms-flex: 10;
+  flex: 10;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  padding: 0 10px;
+}
+
+.emotion-10 {
+  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;
+}
+
+.emotion-8 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
+  margin: 0 10px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+  background-color: #fcefea;
+  color: #ff003b;
+}
+
+@media (max-width:1200px) {
+  .emotion-8 {
+    padding: 0 10px;
+  }
+}
+
+.emotion-17 {
+  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;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+}
+
+.emotion-21 {
+  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-left-width: 1px;
+  padding: 0 7px;
+}
+
+.emotion-6 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
+  margin: 0 10px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+  background-color: #e8f5fe;
+  color: #3a69c7;
+}
+
+@media (max-width:1200px) {
+  .emotion-6 {
+    padding: 0 10px;
+  }
+}
+
+.emotion-15 {
+  position: relative;
+  font-size: 14px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  margin: 0 10px;
+}
+
+.emotion-15 .ei6fm2r1 {
+  color: #17a2b8;
+}
+
+.emotion-12 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
+  display: block;
+  padding-left: 20px;
+  padding-right: 40px;
+  position: relative;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  background-color: #ddf5f9;
+  color: #17a2b8;
+}
+
+.emotion-12:after {
+  color: #fff;
+  width: 0;
+  height: 0;
+  border: 5px solid transparent;
+  border-radius: 2px;
+  border-top: 6px solid currentColor;
+  border-bottom: 0;
+  content: '';
+  display: block;
+  position: absolute;
+  top: 16px;
+  right: 10px;
+  color: currentColor;
+}
+
+@media (max-width:1200px) {
+  .emotion-12 {
+    padding-left: 10px;
+  }
+}
+
+<div
+    class="emotion-23 emotion-24"
+  >
+    <mock-link
+      classname="css-1e27f5b-ToolbarSectionBackLink-toolbarSection evqrzhe8"
+      to=""
+    >
+      <div
+        class="emotion-0 emotion-1"
+      >
+        ←
+      </div>
+      <div>
+        <div
+          class="emotion-2 emotion-3"
+        >
+          editor.editorToolbar.backCollection
+        </div>
+        <div
+          class="emotion-4 emotion-5"
+        >
+          editor.editorToolbar.changesSaved
+        </div>
+      </div>
+    </mock-link>
+    <div
+      class="emotion-19 emotion-20"
+    >
+      <div
+        class="emotion-10 emotion-11"
+      >
+        <button
+          class="emotion-6 emotion-7"
+        >
+          editor.editorToolbar.save
+        </button>
+        <button
+          class="emotion-8 emotion-9"
+        >
+          editor.editorToolbar.deletePublishedEntry
+        </button>
+      </div>
+      <div
+        class="emotion-17 emotion-18"
+      >
+        <div
+          class="emotion-14 emotion-15 emotion-16"
+        >
+          <span
+            aria-expanded="false"
+            aria-haspopup="true"
+            class="emotion-12 emotion-13"
+            role="button"
+            tabindex="0"
+          >
+            editor.editorToolbar.setStatus
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="emotion-21 emotion-22"
+    >
+      <mock-settings-dropdown />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`EditorToolbar should render with status=pending_publish,useOpenAuthoring=true 1`] = `
+<DocumentFragment>
+  .emotion-28 {
+  box-shadow: 0 2px 6px 0 rgba(68,74,87,0.05),0 1px 3px 0 rgba(68,74,87,0.1),0 2px 54px rgba(0,0,0,0.1);
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  min-width: 800px;
+  z-index: 300;
+  background-color: #fff;
+  height: 66px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+
+.emotion-0 {
+  color: #313d3e;
+  font-size: 21px;
+  font-weight: 600;
+  margin-right: 16px;
+}
+
+.emotion-2 {
+  color: #313d3e;
+  font-size: 14px;
+}
+
+.emotion-2 {
+  color: #313d3e;
+  font-size: 14px;
+}
+
+.emotion-4 {
+  margin-top: 6px;
+  font-size: 13px;
+  line-height: 1;
+  display: inline-block;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: #005614;
+}
+
+.emotion-4::after {
+  height: 12px;
+  width: 15.5px;
+  color: #005614;
+  margin-left: 5px;
+  position: relative;
+  top: 1px;
+  content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' width='15' height='11'><path fill='#005614' fill-rule='nonzero' d='M4.016 11l-.648-.946a6.202 6.202 0 0 0-.157-.22 9.526 9.526 0 0 1-.096-.133l-.511-.7a7.413 7.413 0 0 0-.162-.214l-.102-.134-.265-.346a26.903 26.903 0 0 0-.543-.687l-.11-.136c-.143-.179-.291-.363-.442-.54l-.278-.332a8.854 8.854 0 0 0-.192-.225L.417 6.28l-.283-.324L0 5.805l1.376-1.602c.04.027.186.132.186.132l.377.272.129.095c.08.058.16.115.237.175l.37.28c.192.142.382.292.565.436l.162.126c.27.21.503.398.714.574l.477.393c.078.064.156.127.23.194l.433.375.171-.205A50.865 50.865 0 0 1 8.18 4.023a35.163 35.163 0 0 1 2.382-2.213c.207-.174.42-.349.635-.518l.328-.255.333-.245c.072-.055.146-.107.221-.159l.117-.083c.11-.077.225-.155.341-.23.163-.11.334-.217.503-.32l1.158 1.74a11.908 11.908 0 0 0-.64.55l-.065.06c-.07.062-.139.125-.207.192l-.258.249-.26.265c-.173.176-.345.357-.512.539a32.626 32.626 0 0 0-1.915 2.313 52.115 52.115 0 0 0-2.572 3.746l-.392.642-.19.322-.233.382H4.016z'/></svg>");
+}
+
+.emotion-24 {
+  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;
+  -webkit-flex: 10;
+  -ms-flex: 10;
+  flex: 10;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  padding: 0 10px;
+}
+
+.emotion-8 {
+  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;
+}
+
+.emotion-22 {
+  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;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+}
+
+.emotion-26 {
+  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-left-width: 1px;
+  padding: 0 7px;
+}
+
+.emotion-6 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
+  margin: 0 10px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+  background-color: #e8f5fe;
+  color: #3a69c7;
+}
+
+@media (max-width:1200px) {
+  .emotion-6 {
+    padding: 0 10px;
+  }
+}
+
+.emotion-13 {
+  position: relative;
+  font-size: 14px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  margin: 0 10px;
+}
+
+.emotion-13 .emotion-15 {
+  color: #17a2b8;
+}
+
+.emotion-10 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
+  display: block;
+  padding-left: 20px;
+  padding-right: 40px;
+  position: relative;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  background-color: #ddf5f9;
+  color: #17a2b8;
+}
+
+.emotion-10:after {
+  color: #fff;
+  width: 0;
+  height: 0;
+  border: 5px solid transparent;
+  border-radius: 2px;
+  border-top: 6px solid currentColor;
+  border-bottom: 0;
+  content: '';
+  display: block;
+  position: absolute;
+  top: 16px;
+  right: 10px;
+  color: currentColor;
+}
+
+@media (max-width:1200px) {
+  .emotion-10 {
+    padding-left: 10px;
+  }
+}
+
+.emotion-20 {
+  position: relative;
+}
+
+.emotion-18 {
+  position: relative;
+  display: inline-block;
+}
+
+.emotion-18:hover + .evqrzhe0 {
+  visibility: visible;
+  opacity: 0.9;
+}
+
+.emotion-16 {
+  display: inline-block;
+  line-height: 0;
+  width: 18px;
+  height: 18px;
+  -webkit-transform: rotate(0deg);
+  -ms-transform: rotate(0deg);
+  transform: rotate(0deg);
+}
+
+.emotion-16 path:not(.no-fill),
+.emotion-16 circle:not(.no-fill),
+.emotion-16 polygon:not(.no-fill),
+.emotion-16 rect:not(.no-fill) {
+  fill: currentColor;
+}
+
+.emotion-16 path.clipped {
+  fill: transparent;
+}
+
+.emotion-16 svg {
+  width: 100%;
+  height: 100%;
+}
+
+<div
+    class="emotion-28 emotion-29"
+  >
+    <mock-link
+      classname="css-1e27f5b-ToolbarSectionBackLink-toolbarSection evqrzhe8"
+      to=""
+    >
+      <div
+        class="emotion-0 emotion-1"
+      >
+        ←
+      </div>
+      <div>
+        <div
+          class="emotion-2 emotion-3"
+        >
+          editor.editorToolbar.backCollection
+        </div>
+        <div
+          class="emotion-4 emotion-5"
+        >
+          editor.editorToolbar.changesSaved
+        </div>
+      </div>
+    </mock-link>
+    <div
+      class="emotion-24 emotion-25"
+    >
+      <div
+        class="emotion-8 emotion-9"
+      >
+        <button
+          class="emotion-6 emotion-7"
+        >
+          editor.editorToolbar.save
+        </button>
+      </div>
+      <div
+        class="emotion-22 emotion-23"
+      >
+        <div
+          class="emotion-12 emotion-13 emotion-14"
+        >
+          <span
+            aria-expanded="false"
+            aria-haspopup="true"
+            class="emotion-10 emotion-11"
+            role="button"
+            tabindex="0"
+          >
+            editor.editorToolbar.setStatus
+          </span>
+        </div>
+        <div
+          class="emotion-20 emotion-21"
+        >
+          <div
+            class="emotion-18 emotion-19"
+          >
+            <span
+              class="tooltip emotion-15 emotion-16 emotion-17"
+            >
+              <svg
+                class="bi bi-info-circle"
+                fill="currentColor"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"
+                />
+                <path
+                  d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="emotion-26 emotion-27"
+    >
+      <mock-settings-dropdown />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring=false 1`] = `
+<DocumentFragment>
+  .emotion-23 {
+  box-shadow: 0 2px 6px 0 rgba(68,74,87,0.05),0 1px 3px 0 rgba(68,74,87,0.1),0 2px 54px rgba(0,0,0,0.1);
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  min-width: 800px;
+  z-index: 300;
+  background-color: #fff;
+  height: 66px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+
+.emotion-0 {
+  color: #313d3e;
+  font-size: 21px;
+  font-weight: 600;
+  margin-right: 16px;
+}
+
+.emotion-2 {
+  color: #313d3e;
+  font-size: 14px;
+}
+
+.emotion-2 {
+  color: #313d3e;
+  font-size: 14px;
+}
+
+.emotion-4 {
+  margin-top: 6px;
+  font-size: 13px;
+  line-height: 1;
+  display: inline-block;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: #005614;
+}
+
+.emotion-4::after {
+  height: 12px;
+  width: 15.5px;
+  color: #005614;
+  margin-left: 5px;
+  position: relative;
+  top: 1px;
+  content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' width='15' height='11'><path fill='#005614' fill-rule='nonzero' d='M4.016 11l-.648-.946a6.202 6.202 0 0 0-.157-.22 9.526 9.526 0 0 1-.096-.133l-.511-.7a7.413 7.413 0 0 0-.162-.214l-.102-.134-.265-.346a26.903 26.903 0 0 0-.543-.687l-.11-.136c-.143-.179-.291-.363-.442-.54l-.278-.332a8.854 8.854 0 0 0-.192-.225L.417 6.28l-.283-.324L0 5.805l1.376-1.602c.04.027.186.132.186.132l.377.272.129.095c.08.058.16.115.237.175l.37.28c.192.142.382.292.565.436l.162.126c.27.21.503.398.714.574l.477.393c.078.064.156.127.23.194l.433.375.171-.205A50.865 50.865 0 0 1 8.18 4.023a35.163 35.163 0 0 1 2.382-2.213c.207-.174.42-.349.635-.518l.328-.255.333-.245c.072-.055.146-.107.221-.159l.117-.083c.11-.077.225-.155.341-.23.163-.11.334-.217.503-.32l1.158 1.74a11.908 11.908 0 0 0-.64.55l-.065.06c-.07.062-.139.125-.207.192l-.258.249-.26.265c-.173.176-.345.357-.512.539a32.626 32.626 0 0 0-1.915 2.313 52.115 52.115 0 0 0-2.572 3.746l-.392.642-.19.322-.233.382H4.016z'/></svg>");
+}
+
+.emotion-19 {
+  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;
+  -webkit-flex: 10;
+  -ms-flex: 10;
+  flex: 10;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  padding: 0 10px;
+}
+
+.emotion-10 {
+  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;
+}
+
+.emotion-8 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
+  margin: 0 10px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+  background-color: #fcefea;
+  color: #ff003b;
+}
+
+@media (max-width:1200px) {
+  .emotion-8 {
+    padding: 0 10px;
+  }
+}
+
+.emotion-17 {
+  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;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+}
+
+.emotion-21 {
+  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-left-width: 1px;
+  padding: 0 7px;
+}
+
+.emotion-6 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
+  margin: 0 10px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+  background-color: #e8f5fe;
+  color: #3a69c7;
+}
+
+@media (max-width:1200px) {
+  .emotion-6 {
+    padding: 0 10px;
+  }
+}
+
+.emotion-15 {
+  position: relative;
+  font-size: 14px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  margin: 0 10px;
+}
+
+.emotion-15 .ei6fm2r1 {
+  color: #17a2b8;
+}
+
+.emotion-12 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
+  display: block;
+  padding-left: 20px;
+  padding-right: 40px;
+  position: relative;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  background-color: #ddf5f9;
+  color: #17a2b8;
+}
+
+.emotion-12:after {
+  color: #fff;
+  width: 0;
+  height: 0;
+  border: 5px solid transparent;
+  border-radius: 2px;
+  border-top: 6px solid currentColor;
+  border-bottom: 0;
+  content: '';
+  display: block;
+  position: absolute;
+  top: 16px;
+  right: 10px;
+  color: currentColor;
+}
+
+@media (max-width:1200px) {
+  .emotion-12 {
+    padding-left: 10px;
+  }
+}
+
+<div
+    class="emotion-23 emotion-24"
+  >
+    <mock-link
+      classname="css-1e27f5b-ToolbarSectionBackLink-toolbarSection evqrzhe8"
+      to=""
+    >
+      <div
+        class="emotion-0 emotion-1"
+      >
+        ←
+      </div>
+      <div>
+        <div
+          class="emotion-2 emotion-3"
+        >
+          editor.editorToolbar.backCollection
+        </div>
+        <div
+          class="emotion-4 emotion-5"
+        >
+          editor.editorToolbar.changesSaved
+        </div>
+      </div>
+    </mock-link>
+    <div
+      class="emotion-19 emotion-20"
+    >
+      <div
+        class="emotion-10 emotion-11"
+      >
+        <button
+          class="emotion-6 emotion-7"
+        >
+          editor.editorToolbar.save
+        </button>
+        <button
+          class="emotion-8 emotion-9"
+        >
+          editor.editorToolbar.deletePublishedEntry
+        </button>
+      </div>
+      <div
+        class="emotion-17 emotion-18"
+      >
+        <div
+          class="emotion-14 emotion-15 emotion-16"
+        >
+          <span
+            aria-expanded="false"
+            aria-haspopup="true"
+            class="emotion-12 emotion-13"
+            role="button"
+            tabindex="0"
+          >
+            editor.editorToolbar.setStatus
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="emotion-21 emotion-22"
+    >
+      <mock-settings-dropdown />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`EditorToolbar should render with status=pending_review,useOpenAuthoring=true 1`] = `
+<DocumentFragment>
+  .emotion-30 {
+  box-shadow: 0 2px 6px 0 rgba(68,74,87,0.05),0 1px 3px 0 rgba(68,74,87,0.1),0 2px 54px rgba(0,0,0,0.1);
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  min-width: 800px;
+  z-index: 300;
+  background-color: #fff;
+  height: 66px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+
+.emotion-0 {
+  color: #313d3e;
+  font-size: 21px;
+  font-weight: 600;
+  margin-right: 16px;
+}
+
+.emotion-2 {
+  color: #313d3e;
+  font-size: 14px;
+}
+
+.emotion-2 {
+  color: #313d3e;
+  font-size: 14px;
+}
+
+.emotion-4 {
+  margin-top: 6px;
+  font-size: 13px;
+  line-height: 1;
+  display: inline-block;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: #005614;
+}
+
+.emotion-4::after {
+  height: 12px;
+  width: 15.5px;
+  color: #005614;
+  margin-left: 5px;
+  position: relative;
+  top: 1px;
+  content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' width='15' height='11'><path fill='#005614' fill-rule='nonzero' d='M4.016 11l-.648-.946a6.202 6.202 0 0 0-.157-.22 9.526 9.526 0 0 1-.096-.133l-.511-.7a7.413 7.413 0 0 0-.162-.214l-.102-.134-.265-.346a26.903 26.903 0 0 0-.543-.687l-.11-.136c-.143-.179-.291-.363-.442-.54l-.278-.332a8.854 8.854 0 0 0-.192-.225L.417 6.28l-.283-.324L0 5.805l1.376-1.602c.04.027.186.132.186.132l.377.272.129.095c.08.058.16.115.237.175l.37.28c.192.142.382.292.565.436l.162.126c.27.21.503.398.714.574l.477.393c.078.064.156.127.23.194l.433.375.171-.205A50.865 50.865 0 0 1 8.18 4.023a35.163 35.163 0 0 1 2.382-2.213c.207-.174.42-.349.635-.518l.328-.255.333-.245c.072-.055.146-.107.221-.159l.117-.083c.11-.077.225-.155.341-.23.163-.11.334-.217.503-.32l1.158 1.74a11.908 11.908 0 0 0-.64.55l-.065.06c-.07.062-.139.125-.207.192l-.258.249-.26.265c-.173.176-.345.357-.512.539a32.626 32.626 0 0 0-1.915 2.313 52.115 52.115 0 0 0-2.572 3.746l-.392.642-.19.322-.233.382H4.016z'/></svg>");
+}
+
+.emotion-26 {
+  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;
+  -webkit-flex: 10;
+  -ms-flex: 10;
+  flex: 10;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  padding: 0 10px;
+}
+
+.emotion-8 {
+  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;
+}
+
+.emotion-24 {
+  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;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+}
+
+.emotion-28 {
+  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-left-width: 1px;
+  padding: 0 7px;
+}
+
+.emotion-6 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
+  margin: 0 10px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+  background-color: #e8f5fe;
+  color: #3a69c7;
+}
+
+@media (max-width:1200px) {
+  .emotion-6 {
+    padding: 0 10px;
+  }
+}
+
+.emotion-13 {
+  position: relative;
+  font-size: 14px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  margin: 0 10px;
+}
+
+.emotion-13 .emotion-15 {
+  color: #17a2b8;
+}
+
+.emotion-10 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
+  display: block;
+  padding-left: 20px;
+  padding-right: 40px;
+  position: relative;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  background-color: #ddf5f9;
+  color: #17a2b8;
+}
+
+.emotion-10:after {
+  color: #fff;
+  width: 0;
+  height: 0;
+  border: 5px solid transparent;
+  border-radius: 2px;
+  border-top: 6px solid currentColor;
+  border-bottom: 0;
+  content: '';
+  display: block;
+  position: absolute;
+  top: 16px;
+  right: 10px;
+  color: currentColor;
+}
+
+@media (max-width:1200px) {
+  .emotion-10 {
+    padding-left: 10px;
+  }
+}
+
+.emotion-22 {
+  position: relative;
+}
+
+.emotion-18 {
+  position: relative;
+  display: inline-block;
+}
+
+.emotion-18:hover + .emotion-21 {
+  visibility: visible;
+  opacity: 0.9;
+}
+
+.emotion-16 {
+  display: inline-block;
+  line-height: 0;
+  width: 18px;
+  height: 18px;
+  -webkit-transform: rotate(0deg);
+  -ms-transform: rotate(0deg);
+  transform: rotate(0deg);
+}
+
+.emotion-16 path:not(.no-fill),
+.emotion-16 circle:not(.no-fill),
+.emotion-16 polygon:not(.no-fill),
+.emotion-16 rect:not(.no-fill) {
+  fill: currentColor;
+}
+
+.emotion-16 path.clipped {
+  fill: transparent;
+}
+
+.emotion-16 svg {
+  width: 100%;
+  height: 100%;
+}
+
+.emotion-20 {
+  visibility: hidden;
+  width: 321px;
+  background-color: #555;
+  color: #fff;
+  text-align: unset;
+  border-radius: 6px;
+  padding: 5px;
+  position: absolute;
+  z-index: 1;
+  top: 145%;
+  left: 50%;
+  margin-left: -320px;
+  opacity: 0;
+  -webkit-transition: opacity 0.3s;
+  transition: opacity 0.3s;
+}
+
+<div
+    class="emotion-30 emotion-31"
+  >
+    <mock-link
+      classname="css-1e27f5b-ToolbarSectionBackLink-toolbarSection evqrzhe8"
+      to=""
+    >
+      <div
+        class="emotion-0 emotion-1"
+      >
+        ←
+      </div>
+      <div>
+        <div
+          class="emotion-2 emotion-3"
+        >
+          editor.editorToolbar.backCollection
+        </div>
+        <div
+          class="emotion-4 emotion-5"
+        >
+          editor.editorToolbar.changesSaved
+        </div>
+      </div>
+    </mock-link>
+    <div
+      class="emotion-26 emotion-27"
+    >
+      <div
+        class="emotion-8 emotion-9"
+      >
+        <button
+          class="emotion-6 emotion-7"
+        >
+          editor.editorToolbar.save
+        </button>
+      </div>
+      <div
+        class="emotion-24 emotion-25"
+      >
+        <div
+          class="emotion-12 emotion-13 emotion-14"
+        >
+          <span
+            aria-expanded="false"
+            aria-haspopup="true"
+            class="emotion-10 emotion-11"
+            role="button"
+            tabindex="0"
+          >
+            editor.editorToolbar.setStatus
+          </span>
+        </div>
+        <div
+          class="emotion-22 emotion-23"
+        >
+          <div
+            class="emotion-18 emotion-19"
+          >
+            <span
+              class="tooltip emotion-15 emotion-16 emotion-17"
+            >
+              <svg
+                class="bi bi-info-circle"
+                fill="currentColor"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"
+                />
+                <path
+                  d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"
+                />
+              </svg>
+            </span>
+          </div>
+          <div
+            class="emotion-20 emotion-21"
+          >
+            editor.editorToolbar.statusInfoTooltipInReview
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="emotion-28 emotion-29"
+    >
+      <mock-settings-dropdown />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`EditorToolbar should render with workflow controls hasUnpublishedChanges=false,isNewEntry=false,isModification=false,useOpenAuthoring=false 1`] = `
+<DocumentFragment>
+  .emotion-18 {
+  box-shadow: 0 2px 6px 0 rgba(68,74,87,0.05),0 1px 3px 0 rgba(68,74,87,0.1),0 2px 54px rgba(0,0,0,0.1);
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  min-width: 800px;
+  z-index: 300;
+  background-color: #fff;
+  height: 66px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+
+.emotion-0 {
+  color: #313d3e;
+  font-size: 21px;
+  font-weight: 600;
+  margin-right: 16px;
+}
+
+.emotion-2 {
+  color: #313d3e;
+  font-size: 14px;
+}
+
+.emotion-2 {
+  color: #313d3e;
+  font-size: 14px;
+}
+
+.emotion-4 {
+  margin-top: 6px;
+  font-size: 13px;
+  line-height: 1;
+  display: inline-block;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: #005614;
+}
+
+.emotion-4::after {
+  height: 12px;
+  width: 15.5px;
+  color: #005614;
+  margin-left: 5px;
+  position: relative;
+  top: 1px;
+  content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' width='15' height='11'><path fill='#005614' fill-rule='nonzero' d='M4.016 11l-.648-.946a6.202 6.202 0 0 0-.157-.22 9.526 9.526 0 0 1-.096-.133l-.511-.7a7.413 7.413 0 0 0-.162-.214l-.102-.134-.265-.346a26.903 26.903 0 0 0-.543-.687l-.11-.136c-.143-.179-.291-.363-.442-.54l-.278-.332a8.854 8.854 0 0 0-.192-.225L.417 6.28l-.283-.324L0 5.805l1.376-1.602c.04.027.186.132.186.132l.377.272.129.095c.08.058.16.115.237.175l.37.28c.192.142.382.292.565.436l.162.126c.27.21.503.398.714.574l.477.393c.078.064.156.127.23.194l.433.375.171-.205A50.865 50.865 0 0 1 8.18 4.023a35.163 35.163 0 0 1 2.382-2.213c.207-.174.42-.349.635-.518l.328-.255.333-.245c.072-.055.146-.107.221-.159l.117-.083c.11-.077.225-.155.341-.23.163-.11.334-.217.503-.32l1.158 1.74a11.908 11.908 0 0 0-.64.55l-.065.06c-.07.062-.139.125-.207.192l-.258.249-.26.265c-.173.176-.345.357-.512.539a32.626 32.626 0 0 0-1.915 2.313 52.115 52.115 0 0 0-2.572 3.746l-.392.642-.19.322-.233.382H4.016z'/></svg>");
+}
+
+.emotion-14 {
+  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;
+  -webkit-flex: 10;
+  -ms-flex: 10;
+  flex: 10;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  padding: 0 10px;
+}
+
+.emotion-10 {
+  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;
+}
+
+.emotion-8 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
+  margin: 0 10px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+  background-color: #fcefea;
+  color: #ff003b;
 }
 
 @media (max-width:1200px) {
@@ -323,17 +2341,28 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  border: 0 solid;
+  border: 0 solid #dfdfe3;
   border-left-width: 1px;
   padding: 0 7px;
 }
 
 .emotion-6 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
   margin: 0 10px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   display: block;
+  background-color: #e8f5fe;
+  color: #3a69c7;
 }
 
 @media (max-width:1200px) {
@@ -346,7 +2375,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
     class="emotion-18 emotion-19"
   >
     <mock-link
-      classname="css-1rp52h5-ToolbarSectionBackLink-toolbarSection evqrzhe5"
+      classname="css-1e27f5b-ToolbarSectionBackLink-toolbarSection evqrzhe8"
       to=""
     >
       <div
@@ -406,6 +2435,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   left: 0;
   width: 100%;
   min-width: 800px;
+  z-index: 300;
   background-color: #fff;
   height: 66px;
   display: -webkit-box;
@@ -419,26 +2449,36 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 }
 
 .emotion-0 {
+  color: #313d3e;
   font-size: 21px;
   font-weight: 600;
   margin-right: 16px;
 }
 
 .emotion-2 {
+  color: #313d3e;
   font-size: 14px;
 }
 
 .emotion-2 {
+  color: #313d3e;
   font-size: 14px;
 }
 
 .emotion-4 {
   margin-top: 6px;
+  font-size: 13px;
+  line-height: 1;
+  display: inline-block;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: #005614;
 }
 
 .emotion-4::after {
   height: 12px;
   width: 15.5px;
+  color: #005614;
   margin-left: 5px;
   position: relative;
   top: 1px;
@@ -455,7 +2495,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  border: 0 solid;
+  border: 0 solid #dfdfe3;
   -webkit-flex: 10;
   -ms-flex: 10;
   flex: 10;
@@ -506,17 +2546,28 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  border: 0 solid;
+  border: 0 solid #dfdfe3;
   border-left-width: 1px;
   padding: 0 7px;
 }
 
 .emotion-6 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
   margin: 0 10px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   display: block;
+  background-color: #e8f5fe;
+  color: #3a69c7;
 }
 
 @media (max-width:1200px) {
@@ -529,7 +2580,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
     class="emotion-16 emotion-17"
   >
     <mock-link
-      classname="css-1rp52h5-ToolbarSectionBackLink-toolbarSection evqrzhe5"
+      classname="css-1e27f5b-ToolbarSectionBackLink-toolbarSection evqrzhe8"
       to=""
     >
       <div
@@ -584,6 +2635,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   left: 0;
   width: 100%;
   min-width: 800px;
+  z-index: 300;
   background-color: #fff;
   height: 66px;
   display: -webkit-box;
@@ -597,26 +2649,36 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 }
 
 .emotion-0 {
+  color: #313d3e;
   font-size: 21px;
   font-weight: 600;
   margin-right: 16px;
 }
 
 .emotion-2 {
+  color: #313d3e;
   font-size: 14px;
 }
 
 .emotion-2 {
+  color: #313d3e;
   font-size: 14px;
 }
 
 .emotion-4 {
   margin-top: 6px;
+  font-size: 13px;
+  line-height: 1;
+  display: inline-block;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: #005614;
 }
 
 .emotion-4::after {
   height: 12px;
   width: 15.5px;
+  color: #005614;
   margin-left: 5px;
   position: relative;
   top: 1px;
@@ -633,7 +2695,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  border: 0 solid;
+  border: 0 solid #dfdfe3;
   -webkit-flex: 10;
   -ms-flex: 10;
   flex: 10;
@@ -660,11 +2722,22 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 }
 
 .emotion-8 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
   margin: 0 10px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   display: block;
+  background-color: #fcefea;
+  color: #ff003b;
 }
 
 @media (max-width:1200px) {
@@ -698,17 +2771,28 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  border: 0 solid;
+  border: 0 solid #dfdfe3;
   border-left-width: 1px;
   padding: 0 7px;
 }
 
 .emotion-6 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
   margin: 0 10px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   display: block;
+  background-color: #e8f5fe;
+  color: #3a69c7;
 }
 
 @media (max-width:1200px) {
@@ -721,7 +2805,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
     class="emotion-18 emotion-19"
   >
     <mock-link
-      classname="css-1rp52h5-ToolbarSectionBackLink-toolbarSection evqrzhe5"
+      classname="css-1e27f5b-ToolbarSectionBackLink-toolbarSection evqrzhe8"
       to=""
     >
       <div
@@ -781,6 +2865,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   left: 0;
   width: 100%;
   min-width: 800px;
+  z-index: 300;
   background-color: #fff;
   height: 66px;
   display: -webkit-box;
@@ -794,26 +2879,36 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 }
 
 .emotion-0 {
+  color: #313d3e;
   font-size: 21px;
   font-weight: 600;
   margin-right: 16px;
 }
 
 .emotion-2 {
+  color: #313d3e;
   font-size: 14px;
 }
 
 .emotion-2 {
+  color: #313d3e;
   font-size: 14px;
 }
 
 .emotion-4 {
   margin-top: 6px;
+  font-size: 13px;
+  line-height: 1;
+  display: inline-block;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: #005614;
 }
 
 .emotion-4::after {
   height: 12px;
   width: 15.5px;
+  color: #005614;
   margin-left: 5px;
   position: relative;
   top: 1px;
@@ -830,7 +2925,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  border: 0 solid;
+  border: 0 solid #dfdfe3;
   -webkit-flex: 10;
   -ms-flex: 10;
   flex: 10;
@@ -857,11 +2952,22 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 }
 
 .emotion-8 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
   margin: 0 10px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   display: block;
+  background-color: #fcefea;
+  color: #ff003b;
 }
 
 @media (max-width:1200px) {
@@ -895,17 +3001,28 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  border: 0 solid;
+  border: 0 solid #dfdfe3;
   border-left-width: 1px;
   padding: 0 7px;
 }
 
 .emotion-6 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
   margin: 0 10px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   display: block;
+  background-color: #e8f5fe;
+  color: #3a69c7;
 }
 
 @media (max-width:1200px) {
@@ -918,7 +3035,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
     class="emotion-18 emotion-19"
   >
     <mock-link
-      classname="css-1rp52h5-ToolbarSectionBackLink-toolbarSection evqrzhe5"
+      classname="css-1e27f5b-ToolbarSectionBackLink-toolbarSection evqrzhe8"
       to=""
     >
       <div
@@ -978,6 +3095,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   left: 0;
   width: 100%;
   min-width: 800px;
+  z-index: 300;
   background-color: #fff;
   height: 66px;
   display: -webkit-box;
@@ -991,26 +3109,36 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 }
 
 .emotion-0 {
+  color: #313d3e;
   font-size: 21px;
   font-weight: 600;
   margin-right: 16px;
 }
 
 .emotion-2 {
+  color: #313d3e;
   font-size: 14px;
 }
 
 .emotion-2 {
+  color: #313d3e;
   font-size: 14px;
 }
 
 .emotion-4 {
   margin-top: 6px;
+  font-size: 13px;
+  line-height: 1;
+  display: inline-block;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: #005614;
 }
 
 .emotion-4::after {
   height: 12px;
   width: 15.5px;
+  color: #005614;
   margin-left: 5px;
   position: relative;
   top: 1px;
@@ -1027,7 +3155,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  border: 0 solid;
+  border: 0 solid #dfdfe3;
   -webkit-flex: 10;
   -ms-flex: 10;
   flex: 10;
@@ -1054,11 +3182,22 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 }
 
 .emotion-8 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
   margin: 0 10px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   display: block;
+  background-color: #fcefea;
+  color: #ff003b;
 }
 
 @media (max-width:1200px) {
@@ -1092,17 +3231,28 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  border: 0 solid;
+  border: 0 solid #dfdfe3;
   border-left-width: 1px;
   padding: 0 7px;
 }
 
 .emotion-6 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
   margin: 0 10px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   display: block;
+  background-color: #e8f5fe;
+  color: #3a69c7;
 }
 
 @media (max-width:1200px) {
@@ -1115,7 +3265,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
     class="emotion-18 emotion-19"
   >
     <mock-link
-      classname="css-1rp52h5-ToolbarSectionBackLink-toolbarSection evqrzhe5"
+      classname="css-1e27f5b-ToolbarSectionBackLink-toolbarSection evqrzhe8"
       to=""
     >
       <div
@@ -1175,6 +3325,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   left: 0;
   width: 100%;
   min-width: 800px;
+  z-index: 300;
   background-color: #fff;
   height: 66px;
   display: -webkit-box;
@@ -1188,26 +3339,36 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 }
 
 .emotion-0 {
+  color: #313d3e;
   font-size: 21px;
   font-weight: 600;
   margin-right: 16px;
 }
 
 .emotion-2 {
+  color: #313d3e;
   font-size: 14px;
 }
 
 .emotion-2 {
+  color: #313d3e;
   font-size: 14px;
 }
 
 .emotion-4 {
   margin-top: 6px;
+  font-size: 13px;
+  line-height: 1;
+  display: inline-block;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: #005614;
 }
 
 .emotion-4::after {
   height: 12px;
   width: 15.5px;
+  color: #005614;
   margin-left: 5px;
   position: relative;
   top: 1px;
@@ -1224,7 +3385,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  border: 0 solid;
+  border: 0 solid #dfdfe3;
   -webkit-flex: 10;
   -ms-flex: 10;
   flex: 10;
@@ -1251,11 +3412,22 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
 }
 
 .emotion-8 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
   margin: 0 10px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   display: block;
+  background-color: #fcefea;
+  color: #ff003b;
 }
 
 @media (max-width:1200px) {
@@ -1289,17 +3461,28 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  border: 0 solid;
+  border: 0 solid #dfdfe3;
   border-left-width: 1px;
   padding: 0 7px;
 }
 
 .emotion-6 {
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+  height: 36px;
+  line-height: 36px;
+  font-weight: 500;
+  padding: 0 15px;
+  background-color: #798291;
+  color: #fff;
   margin: 0 10px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   display: block;
+  background-color: #e8f5fe;
+  color: #3a69c7;
 }
 
 @media (max-width:1200px) {
@@ -1312,7 +3495,7 @@ exports[`EditorToolbar should render with workflow controls hasUnpublishedChange
     class="emotion-18 emotion-19"
   >
     <mock-link
-      classname="css-1rp52h5-ToolbarSectionBackLink-toolbarSection evqrzhe5"
+      classname="css-1e27f5b-ToolbarSectionBackLink-toolbarSection evqrzhe8"
       to=""
     >
       <div
diff --git a/packages/netlify-cms-locales/src/en/index.js b/packages/netlify-cms-locales/src/en/index.js
index 7c4f6137..b154d12b 100644
--- a/packages/netlify-cms-locales/src/en/index.js
+++ b/packages/netlify-cms-locales/src/en/index.js
@@ -131,6 +131,10 @@ const en = {
       deleteEntry: 'Delete entry',
       saving: 'Saving...',
       save: 'Save',
+      statusInfoTooltipDraft:
+        'Entry status is set to draft. To finalize and submit it for review, set the status to ‘In review’',
+      statusInfoTooltipInReview:
+        'Entry is being reviewed, no further actions are required. However, you can still make additional changes while it is being reviewed.',
       deleting: 'Deleting...',
       updating: 'Updating...',
       setStatus: 'Set status',
diff --git a/packages/netlify-cms-ui-default/src/Icon/images/_index.js b/packages/netlify-cms-ui-default/src/Icon/images/_index.js
index f774b2d1..b60015f0 100644
--- a/packages/netlify-cms-ui-default/src/Icon/images/_index.js
+++ b/packages/netlify-cms-ui-default/src/Icon/images/_index.js
@@ -22,6 +22,7 @@ import iconH2 from './h2.svg';
 import iconHOptions from './h-options.svg';
 import iconHome from './home.svg';
 import iconImage from './image.svg';
+import iconInfoCircle from './info-circle.svg';
 import iconItalic from './italic.svg';
 import iconLink from './link.svg';
 import iconList from './list.svg';
@@ -72,6 +73,7 @@ const images = {
   hOptions: iconHOptions,
   home: iconHome,
   image: iconImage,
+  'info-circle': iconInfoCircle,
   italic: iconItalic,
   link: iconLink,
   list: iconList,
diff --git a/packages/netlify-cms-ui-default/src/Icon/images/info-circle.svg b/packages/netlify-cms-ui-default/src/Icon/images/info-circle.svg
new file mode 100644
index 00000000..8f48f86c
--- /dev/null
+++ b/packages/netlify-cms-ui-default/src/Icon/images/info-circle.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
+  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
+  <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
+</svg>
\ No newline at end of file