fix(SW-2376): Vertically centered previous/next buttons inside carousel cards

Approved-by: Matilda Landström

apps/scandic-web/components/Carousel/carousel.module.css

@@ -17,28 +17,20 @@
   min-width: 0;
 }
 
-.button {
-  display: none;
-  align-items: center;
-  justify-content: center;
+.buttonWrapper {
   position: absolute;
   top: 50%;
-  transform: translateY(-50%);
-  background: var(--Base-Surface-Primary-light-Normal);
-  box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.1);
-  border: none;
-  border-radius: 50%;
-  padding: var(--Spacing-x1);
-  cursor: pointer;
   z-index: 1;
-}
 
-.buttonPrev {
-  left: -20px;
-}
+  &.previous {
+    left: 0;
+    transform: translate(-50%, -50%);
+  }
 
-.buttonNext {
-  right: -20px;
+  &.next {
+    right: 0;
+    transform: translate(50%, -50%);
+  }
 }
 
 .dots {
@@ -61,17 +53,19 @@
   background: var(--UI-Text-Medium-contrast);
 }
 
-@media (min-width: 768px) {
-  .container {
-    grid-auto-columns: calc(50% - var(--Spacing-x2) / 2);
-  }
-
-  .button {
-    display: flex;
+@media screen and (max-width: 767px) {
+  .buttonWrapper {
+    display: none;
   }
 }
 
-@media (min-width: 1024px) {
+@media screen and (min-width: 768px) {
+  .container {
+    grid-auto-columns: calc(50% - var(--Spacing-x2) / 2);
+  }
+}
+
+@media screen and (min-width: 1024px) {
   .container {
     grid-auto-columns: calc(33.33% - var(--Spacing-x2) * 2 / 3);
   }