Introducing z-index variables

We need to handle the z-index layers in a controlled manner so we use
the same concept as we use for spacing with fixed values.

base.scss

@@ -13,7 +13,8 @@
 @import "./src/stories/Library/Arrows/arrows";
 @import "./src/stories/Library/Buttons/button/buttons";
 @import "./src/stories/Library/Buttons/button-ui/buttons-ui";
-@import "./src/stories/Library/spacing/spacing";
+@import "./src/stories/Library/layout/spacing";
+@import "./src/stories/Library/layout/z-index";
 @import "./src/stories/Library/tag/tag";
 @import "./src/stories/Library/logo/logo";
 @import "./src/stories/Library/pagefold/pagefold";

src/stories/Blocks/autosuggest/autosuggest.scss

@@ -5,7 +5,7 @@
   left: 0;
   right: 0;
   top: calc(100% + 1px);
-  z-index: 1;
+  z-index: $z-5;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;

src/stories/Blocks/header/header.scss

@@ -8,7 +8,7 @@
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 500ms;
-  z-index: 5000;
+  z-index: $z-20;
 
   @include breakpoint-s {
     grid-template-columns: 1fr 105px;
@@ -217,7 +217,7 @@
 #header__overlay {
   /* stylelint-disable-line */
   display: none;
-  z-index: 5;
+  z-index: $z-20;
   position: fixed;
   top: 0;
   left: 0;

src/stories/Library/Lists/list-reservation/list-reservation.scss

@@ -185,15 +185,15 @@ $list-reservation-space-desktop: 24px;
 
     content: " ";
     transform: translateY(8px) scale(0.95);
-    z-index: -1;
+    z-index: $-z-5;
   }
 
   &::before {
     @extend %list-stacked;
 
     content: " ";
     transform: translateY(16px) scale(0.9);
-    z-index: -2;
+    z-index: $-z-10;
   }
 
   &:hover {

src/stories/Library/Modals/modal-details/modal-details.scss

@@ -123,7 +123,7 @@ $MODAL_DETAILS_CONTAINER_WIDTH: 1000px;
   right: 0;
   padding: 34px;
   transition: 0.3s;
-  z-index: 2;
+  z-index: $z-10;
 
   &:hover {
     transform: rotateZ(90deg);

src/stories/Library/Modals/modal.scss

@@ -71,7 +71,7 @@
   width: 100%;
   height: 100%;
   position: fixed;
-  z-index: 5;
+  z-index: $z-20;
   top: 0;
   left: 0;
   background-color: hsla(0, 0%, 15%, 0.5);
@@ -87,7 +87,7 @@
   right: 0;
   padding: 22.5px;
   transition: 0.3s;
-  z-index: 2;
+  z-index: $z-15;
 
   &.modal-btn-close--offset {
     @include breakpoint-s {

src/stories/Library/layout/z-index.scss

@@ -0,0 +1,7 @@
+$-z-10: -10;
+$-z-5: -5;
+$z-5: 5;
+$z-10: 10;
+$z-15: 15;
+$z-20: 20;
+$z-25: 25;