diff --git a/app/assets/stylesheets/blacklight/_bookmark.scss b/app/assets/stylesheets/blacklight/_bookmark.scss
index 32d9a9a598..91bf6d4176 100644
--- a/app/assets/stylesheets/blacklight/_bookmark.scss
+++ b/app/assets/stylesheets/blacklight/_bookmark.scss
@@ -1,50 +1,51 @@
-label.toggle-bookmark {
-	font-weight: inherit;
-	min-width: 8.5em;
-}
-
-div.toggle-bookmark {
-  cursor: pointer;
-}
-
-/* override for line 3.
-Creates weird spacing in toolbar when min-width is set to 8rem */
-.header-tools label.toggle-bookmark {
-  min-width: 2rem;
-}
-
 .bookmark-toggle {
-	.no-js & {
-		input[type="submit"] {
-			display: inline
-		}
-
-		div.toggle-bookmark {
-			display: none
-		}
-	}
-
-	input[type="submit"] {
-		display: none;
-	}
-}
-.toggle-bookmark .blacklight-icons svg {
-  height: 1.25rem;
-  width: 1.25rem;
-  overflow: visible;
-  fill: var(--bs-primary);
+  .no-js & {
+    input[type="submit"] {
+      display: inline;
+    }
+
+    .toggle-bookmark {
+      display: none;
+    }
+  }
 
-  &.bookmark-checked {
+  input[type="submit"] {
     display: none;
   }
-}
 
-.toggle-bookmark[type="checkbox"]:checked+span svg {
-  &.bookmark-checked {
-    display: inherit;
+  .toggle-bookmark {
+    cursor: pointer;
+
+    .toggle-bookmark-label {
+      font-weight: inherit;
+      min-width: 8.5em;
+
+      .blacklight-icons svg {
+        height: 1.25rem;
+        width: 1.25rem;
+        overflow: visible;
+        fill: var(--bs-primary);
+
+        &.bookmark-checked {
+          display: none;
+        }
+      }
+    }
+
+    .toggle-bookmark-input:checked + span svg {
+      &.bookmark-checked {
+        display: inherit;
+      }
+
+      &.bookmark-unchecked {
+        display: none;
+      }
+    }
   }
 
-  &.bookmark-unchecked {
-    display: none;
+  /* override for line 21.
+      Creates weird spacing in toolbar when min-width is set to 8rem */
+  .header-tools .toggle-bookmark-label {
+    min-width: 2rem;
   }
-}
\ No newline at end of file
+}
diff --git a/app/components/blacklight/document/bookmark_component.html.erb b/app/components/blacklight/document/bookmark_component.html.erb
index 27a876156f..55f9b3a277 100644
--- a/app/components/blacklight/document/bookmark_component.html.erb
+++ b/app/components/blacklight/document/bookmark_component.html.erb
@@ -8,9 +8,9 @@
                absent: t('blacklight.search.bookmarks.absent'),
                inprogress: t('blacklight.search.bookmarks.inprogress')
             }) do %>
-  <div class="checkbox toggle-bookmark">
-    <label class="toggle-bookmark" data-checkboxsubmit-target="label">
-      <input type="checkbox" class="toggle-bookmark <%= bookmark_icon ? 'd-none' : '' %>" data-checkboxsubmit-target="checkbox" <%= 'checked="checked"' if bookmarked? %>>
+  <div class="toggle-bookmark">
+    <label class="toggle-bookmark-label" data-checkboxsubmit-target="label">
+      <input type="checkbox" class="toggle-bookmark-input <%= bookmark_icon ? 'd-none' : '' %>" data-checkboxsubmit-target="checkbox" <%= 'checked="checked"' if bookmarked? %>>
       <%= bookmark_icon %>
       <span data-checkboxsubmit-target="span"><%= bookmarked? ? t('blacklight.search.bookmarks.present') : t('blacklight.search.bookmarks.absent') %></span>
     </label>
diff --git a/spec/features/bookmarks_spec.rb b/spec/features/bookmarks_spec.rb
index c3973e7e72..d33853d0f5 100644
--- a/spec/features/bookmarks_spec.rb
+++ b/spec/features/bookmarks_spec.rb
@@ -103,7 +103,7 @@
       expect(page).to have_css('.blacklight-icons-bookmark')
       find('.blacklight-icons-bookmark').click
 
-      expect(find('.toggle-bookmark[type="checkbox"]', visible: false)).to be_checked
+      expect(find('.toggle-bookmark-input', visible: false)).to be_checked
       find('.blacklight-icons-bookmark').click
     end
   end