---

{undoRedo && (
  <>
    <Divider
      direction="vertical"
      pt={{ divider: { className: styles.divider } }}
    />

    <div className={styles.group}>
      <Tooltip
        location="bottom"
        label={t('Undo')}
      >
        <Button
          size="sm"
          className={styles.button}
          onClick={undoRedo.undo}
          disabled={!undoRedoState?.canUndo}
          label={<UndoIcon />}
        />
      </Tooltip>

      <Tooltip
        location="bottom"
        label={t('Redo')}
      >
        <Button
          size="sm"
          className={styles.button}
          onClick={undoRedo.redo}
          disabled={!undoRedoState?.canRedo}
          label={<RedoIcon />}
        />
      </Tooltip>
    </div>
  </>
)}

{(copyImage || showFullscreenButton) && (
  <>
    <Divider
      direction="vertical"
      pt={{ divider: { className: styles.divider } }}
    />

    <div className={styles.group}>
      {copyImage && (
        <Tooltip
          location="bottom"
          label={t('Snapshot')}
        >
          <Dropdown
            menuClassName={styles.menu}
            selectedValue={<CameraIcon />}
          >
            <SnapshotMenu onCopyImage={copyImage} />
          </Dropdown>
        </Tooltip>
      )}

      {showFullscreenButton && (
        <Tooltip
          location="bottom"
          label={t(isFullscreen ? 'Exit fullscreen' : 'Fullscreen')}
        >
          <Button
            size="sm"
            className={`${styles.button} ${isFullscreen ? styles.pressed : ''}`}
            onClick={() => fullscreen.toggle()}
            label={<FullscreenIcon />}
          />
        </Tooltip>
      )}
    </div>
  </>
)}