✨ Finish Photo viewer styling with responsive

src/style/atoms/_arrow.scss

@@ -1,18 +1,15 @@
 .arrow {
     display: block;
 
+    // Colors
     &--white {
-        path {
-            fill: #fff;
-        }
+        color: #fff;
     }
-
     &--pink {
-        path {
-            fill: $color-secondary;
-        }
+        color: $color-secondary;
     }
 
+    // Variants
     &--flip {
         transform: rotate(180deg);
     }

src/style/atoms/_button-circle.scss

@@ -14,6 +14,7 @@
         width: 22px;
         height: 22px;
         object-fit: contain;
+        transition: opacity 0.4s var(--ease-quart), filter 0.4s var(--ease-quart);
     }
 
     // Clones
@@ -35,6 +36,10 @@
         }
     }
 
+
+    /*
+    ** States
+    */
     // Hover
     &:hover {
         .clone {
@@ -49,6 +54,16 @@
         }
     }
 
+    // Disabled
+    &[disabled] {
+        background: $color-primary;
+        border: 3px solid #ffffff20;
+
+        svg {
+            fill: $color-primary-tertiary20;
+        }
+    }
+
 
     /*
     ** Variants