Fix unresponsive circle icon in revert button

This commit fixes a UI bug where the circle icon of the revertbutton was
unresponsive to clicks. The solution involves replacing the
pseudo-element (`:before`) with an actual HTML element, enabling direct
event binding.

Additional improvements include:

- Removal of redundant `z-index` properties to simplify click event
  handling and reduce complexity.
- Programmatic toggle of `isChecked` on click, providing more controlled
  and explicit behavior and avoiding issues with native checkbox
  behavior, especially when overlaid on a pseudo-element.

tests/e2e/revert-toggle.cy.ts

@@ -24,7 +24,7 @@ describe('revert toggle', () => {
         .contains('revert');
     });
 
-    it('should render label completely without clipping', () => {
+    it('should render label completely without clipping', () => { // Regression test for a bug where label is partially rendered (clipped)
       cy
         .get('@toggleSwitch')
         .find('span')
@@ -37,6 +37,22 @@ describe('revert toggle', () => {
           expect(expectedMinimumTextWidth).to.be.lessThan(containerWidth);
         });
     });
+
+    it('should toggle the revert state when clicked', () => {
+      cy.get('@toggleSwitch').then(($toggleSwitch) => {
+        // arrange
+        const initialState = $toggleSwitch.find('.toggle-input').is(':checked');
+
+        // act
+        cy.wrap($toggleSwitch).click();
+
+        // assert
+        cy.wrap($toggleSwitch).find('.toggle-input').should(($input) => {
+          const newState = $input.is(':checked');
+          expect(newState).to.not.equal(initialState);
+        });
+      });
+    });
   });
 });