Remove unused variables & mixins + update *-padding to rem

- Fixes #11458

client/scss/components/_footer.scss

@@ -1,5 +1,4 @@
 @use 'sass:math';
-$grid-gutter-width: 3%;
 
 .footer {
   @include transition(bottom 0.5s ease 1s);

client/scss/components/_messages.scss

@@ -17,7 +17,6 @@
   }
 
   > ul > li {
-    // @include nice-padding;
     padding: 1.6em 3em 1.6em 1.6em;
     color: theme('colors.text-button');
     border-bottom: 1px solid transparent;

client/scss/components/_panel.scss

@@ -24,7 +24,7 @@ $header-button-size: theme('spacing.6');
   display: flex;
   align-items: center;
   margin-bottom: theme('spacing.[0.5]');
-  margin-inline-start: -1 * $mobile-nice-padding;
+  margin-inline-start: calc(-1 * #{$mobile-nice-padding});
 
   @include media-breakpoint-up(sm) {
     margin-inline-start: calc(

client/scss/components/forms/_field-comment-control.scss

@@ -1,7 +1,6 @@
 // Comments
 $icon-size: theme('spacing.4');
 $button-padding: theme('spacing.2');
-$button-space: theme('spacing.1');
 
 .w-field__comment-button {
   $root: &;

client/scss/components/forms/_nested-panel.scss

@@ -1,7 +1,5 @@
 $header-icon-size: theme('spacing.4');
-$header-button-size-sm: theme('spacing.6');
 $icon-center-offset: 2px;
-$panel-bottom-margin: $form-field-spacing;
 $guide-line-bottom-margin: calc($form-field-spacing / 3);
 
 /**

client/scss/settings/_variables.scss

@@ -1,21 +1,18 @@
 @use 'sass:color';
-// paths
 
+// Paths
 // We can't use absolute paths here, because those are dependent on Django's
 // STATIC_URL setting. Instead, relative paths from the final location of the
 // compiled CSS files are used.
-// */
 
 $images-root: '../images/';
 
-// grid settings
-
-$mobile-nice-padding: 20px;
-$desktop-nice-padding: 80px;
+$mobile-nice-padding: theme('spacing.5');
+$desktop-nice-padding: theme('spacing.20');
 
 // All text inputs have a 42px set height to simplify alignment.
 $text-input-height: 2.625rem;
-// Forms should be constrainted to a maximum width for legibility.
+// Forms should be constrained to a maximum width for legibility.
 $max-form-width: 840px;
 // Consistent spacing between form fields.
 $form-field-spacing: theme('spacing.[7.5]');
@@ -41,10 +38,8 @@ $breakpoints: (
 // that the most 'up-to-date' and available system font is used and rendered consistently as possible across browsers.
 
 // misc sizing
-$menu-width: 200px;
 $menu-width-slim: 60px;
-$side-panel-width: 500px;
-
+$menu-width: 200px;
 $mobile-nav-indent: 50px;
 
 // transitions

client/scss/tools/_mixins.grid.scss

@@ -31,28 +31,6 @@ $padding: math.div($grid-gutter-width, 2);
   padding-inline-start: $padding;
 }
 
-@mixin table-column($x, $padding: $padding, $grid-columns: $grid-columns) {
-  width: 100% * math.div($x, $grid-columns);
-}
-
-// Push adds left padding
-@mixin push($offset: 1, $grid-columns: $grid-columns) {
-  margin-inline-start: 100% * math.div($offset, $grid-columns);
-}
-
-@mixin push-padding($offset: 1, $grid-columns: $grid-columns) {
-  padding-inline-start: 100% * math.div($offset, $grid-columns);
-}
-
-// Pull adds right padding
-@mixin pull($offset: 1, $grid-columns: $grid-columns) {
-  margin-inline-end: 100% * math.div($offset, $grid-columns);
-}
-
-@mixin pull-padding($offset: 1, $grid-columns: $grid-columns) {
-  padding-inline-end: 100% * math.div($offset, $grid-columns);
-}
-
 // only used in places where padding not applied to same elements as row or row-flush
 // most of the time this class should be applied directly to the html elements
 @mixin nice-padding {

client/src/components/PageExplorer/PageExplorer.scss

@@ -1,5 +1,4 @@
 $c-page-explorer-bg-active: theme('colors.black-50');
-$c-page-explorer-easing: cubic-bezier(0.075, 0.82, 0.165, 1);
 $menu-footer-height: 50px;
 
 @use 'sass:map';