chore: move toolbar size to global scope

It allows me to manage footer padding on small viewports.

4 files changed, 7 insertions, 5 deletions

diff --git a/src/components/Buttons/Buttons.module.scss b/src/components/Buttons/Buttons.module.scss
index b250eb5..a043649 100644
--- a/src/components/Buttons/Buttons.module.scss
+++ b/src/components/Buttons/Buttons.module.scss
@@ -82,7 +82,8 @@
 }
 
 .search {
-  display: block;
+  display: flex;
+  place-content: center;
   width: var(--btn-size);
   height: var(--btn-size);
   background: none;
diff --git a/src/components/Footer/Footer.module.scss b/src/components/Footer/Footer.module.scss
index 496044a..b5d098d 100644
--- a/src/components/Footer/Footer.module.scss
+++ b/src/components/Footer/Footer.module.scss
@@ -4,5 +4,5 @@
   place-items: center;
   place-content: center;
   gap: var(--spacing-xs);
-  padding: var(--spacing-md) 0;
+  padding: var(--spacing-md) 0 calc(var(--toolbar-size) + var(--spacing-md));
 }
diff --git a/src/components/MainNav/MainNav.module.scss b/src/components/MainNav/MainNav.module.scss
index 596f1d5..d732b99 100644
--- a/src/components/MainNav/MainNav.module.scss
+++ b/src/components/MainNav/MainNav.module.scss
@@ -75,7 +75,7 @@
       bottom: auto;
       left: auto;
       right: auto;
-      top: var(--btn-size);
+      top: calc(var(--btn-size) + var(--spacing-sm));
       z-index: unset;
       border-bottom-width: fun.convert-px(5);
       transform-origin: 50% -100%;
diff --git a/src/components/Toolbar/Toolbar.module.scss b/src/components/Toolbar/Toolbar.module.scss
index 18212a2..527a342 100644
--- a/src/components/Toolbar/Toolbar.module.scss
+++ b/src/components/Toolbar/Toolbar.module.scss
@@ -2,7 +2,6 @@
 @use "@styles/abstracts/mixins" as mix;
 
 .wrapper {
-  --toolbar-size: #{fun.convert-px(60)};
   --btn-size: #{fun.convert-px(50)};
 
   display: flex;
@@ -26,6 +25,8 @@
     }
 
     @include mix.dimensions("sm") {
+      --toolbar-size: auto;
+
       justify-content: flex-end;
       gap: var(--spacing-md);
       width: auto;
@@ -65,7 +66,7 @@
       width: fun.convert-px(500);
       left: unset;
       right: unset;
-      top: 200%;
+      top: 150%;
       bottom: unset;
       background: var(--color-bg-opacity);
       box-shadow: fun.convert-px(2) fun.convert-px(2) fun.convert-px(3)