Allow data syncing and deletion

sass/includes/forms.sass

@@ -79,3 +79,25 @@ fieldset
       &.checkbox:not(:disabled) + .pill
         @include acts-like-button
         cursor: pointer
+
+@mixin checkbox-hider($base)
+  ##{$base}
+    position: relative
+    left: 10px
+    display: block
+    z-index: 1
+    height: 42px
+    margin: 0
+
+  .#{$base}-container
+    position: relative
+    display: grid // why does the default not work???
+    top: -42px
+    background: c.$bg-accent-x
+    line-height: 1
+    border-radius: 8px
+    margin-bottom: -18px
+
+    .#{$base}-label
+      padding: 12px 0px 12px 32px
+      cursor: pointer

sass/includes/settings-page.sass

@@ -1,3 +1,6 @@
+@use "forms.sass" as forms
+@use "colors.sass" as c
+
 .settings-page
   padding: 40px 20px 20px
   max-width: 600px
@@ -9,3 +12,18 @@
   .border-look
     font-size: 22px
     padding: 7px 16px 8px
+
+.data-management
+  margin-top: 24px
+
+  .delete-confirm-container
+    background: c.$bg-darker
+    margin-bottom: -36px
+
+@include forms.checkbox-hider("delete-confirm")
+
+#delete-confirm:not(:checked) ~ * #delete-button
+  visibility: hidden
+
+.delete-details[open]
+  padding-bottom: 40px

sass/includes/subscriptions-page.sass

@@ -1,5 +1,6 @@
 @use "colors.sass" as c
 @use "video-list-item.sass" as *
+@use "forms.sass" as forms
 
 .subscriptions-page
   padding: 40px 20px 20px
@@ -34,27 +35,7 @@
     font-size: 22px
     color: c.$fg-main
 
-
-#watched-videos-display
-  position: relative
-  left: 10px
-  display: block
-  z-index: 1
-  height: 42px
-  margin: 0
-
-.watched-videos-display-container
-  position: relative
-  display: grid // why does the default not work???
-  top: -42px
-  background: c.$bg-accent-x
-  line-height: 1
-  border-radius: 8px
-  margin-bottom: -18px
-
-  .watched-videos-display-label
-    padding: 12px 0px 12px 32px
-    cursor: pointer
+@include forms.checkbox-hider("watched-videos-display")
 
 #watched-videos-display:checked ~ .video-list-item--watched
   display: none