From 48f4950bb0e8ea5eb6865017109c808be4ac5afe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Mon, 26 Sep 2022 21:27:40 +0200
Subject: [PATCH] Disable Carousel arrow on devices with no hover

---
 src/style/organisms/_carousel.scss | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/style/organisms/_carousel.scss b/src/style/organisms/_carousel.scss
index 212ada0..3ba0307 100644
--- a/src/style/organisms/_carousel.scss
+++ b/src/style/organisms/_carousel.scss
@@ -88,16 +88,20 @@
     // Arrow
     &__arrow {
         $color-shadow: rgba(#000, 0.075);
-        position: absolute;
-        top: 0;
-        left: 0;
-        opacity: 0;
-        pointer-events: none;
-        display: block;
-        transform: translate3d(var(--x), var(--y), 0);
-        transition: transform 0.6s var(--ease-quart), opacity 0.6s var(--ease-quart);
-        transform-origin: 50% 50%;
-        filter: drop-shadow(0 2px 2px $color-shadow) drop-shadow(0 8px 8px $color-shadow) drop-shadow(0 16px 16px $color-shadow);
+
+        // Enable only on devices with hover
+        @media (hover: hover) {
+            position: absolute;
+            top: 0;
+            left: 0;
+            opacity: 0;
+            display: block;
+            pointer-events: none;
+            transform: translate3d(var(--x), var(--y), 0);
+            transition: transform 0.6s var(--ease-quart), opacity 0.6s var(--ease-quart);
+            transform-origin: 50% 50%;
+            filter: drop-shadow(0 2px 2px $color-shadow) drop-shadow(0 8px 8px $color-shadow) drop-shadow(0 16px 16px $color-shadow);
+        }
 
         svg {
             display: block;