Change Photo viewer controls and ButtonCircle

src/components/atoms/ButtonCircle.svelte

@@ -17,9 +17,7 @@
 <button {type} {form} class={classes} on:click disabled={disabled}>
     {#if clone}
         {#each Array(2) as _}
-            <span class="clone">
             <slot />
-            </span>
         {/each}
     {:else}
         <slot />

src/routes/[country]/[location]/[photo].svelte

@@ -182,10 +182,10 @@
                 {/each}
 
                 <div class="viewer-photo__controls">
-                    <ButtonCircle on:click={goToPrevious} disabled={!canGoNext}>
+                    <ButtonCircle class="shadow-box-dark" disabled={!canGoNext} clone={true} on:click={goToPrevious}>
                         <IconArrow color="pink" flip={true} />
                     </ButtonCircle>
-                    <ButtonCircle on:click={goToNext} disabled={!canGoPrev}>
+                    <ButtonCircle class="shadow-box-dark" disabled={!canGoPrev} clone={true} on:click={goToNext}>
                         <IconArrow color="pink" />
                     </ButtonCircle>
                 </div>

src/style/atoms/_button-circle.scss

@@ -14,25 +14,19 @@
         width: 22px;
         height: 22px;
         object-fit: contain;
-        transition: opacity 0.4s var(--ease-quart), filter 0.4s var(--ease-quart);
-    }
-
-    // Clones
-    .clone {
-        display: flex;
-        justify-content: center;
-        align-items: center;
+        width: clamp(16px, 50%, 24px);
+        height: clamp(16px, 50%, 24px);
         transform-origin: center center;
         transition: opacity 0.7s var(--ease-quart), transform 0.7s var(--ease-quart);
 
-        &:last-child {
+        // Last clone
+        &:nth-child(2) {
             position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
+            z-index: 1;
+            top: 50%;
+            left: 50%;
             opacity: 0;
-            transform: translate3d(-100%, 0, 0);
+            transform: translate3d(-150%, -50%, 0);
         }
     }
 
@@ -41,15 +35,15 @@
     ** States
     */
     // Hover
-    &:hover {
-        .clone {
+    &:not([disabled]):hover {
+        & > * {
             &:first-child {
                 opacity: 0;
-                transform: scale(0.9) translate3d(30%, 0, 0);
+                transform: scale(0.75) translate3d(20%, 0, 0);
             }
             &:last-child {
                 opacity: 1;
-                transform: translate3d(0,0,0);
+                transform: translate3d(-50%, -50%, 0);
             }
         }
     }
@@ -57,10 +51,10 @@
     // Disabled
     &[disabled] {
         background: $color-primary;
-        border: 3px solid #ffffff20;
+        border: 3px solid rgba(#fff, 0.2);
 
         svg {
-            fill: $color-primary-tertiary20;
+            color: $color-primary-tertiary20;
         }
     }
 

src/style/pages/_viewer-photo.scss

@@ -295,6 +295,33 @@
 
         button {
             pointer-events: auto;
+
+            // Prev button
+            &:first-child {
+                & > *:nth-child(2) {
+                    transform: translate3d(100%, -50%, 0) rotate(180deg);
+                }
+
+                // Hover
+                &:not([disabled]):hover {
+                    & > *:nth-child(1) {
+                        transform: translate3d(-20%, 0, 0) rotate(180deg);
+                    }
+                    & > *:nth-child(2) {
+                        transform: translate3d(-50%, -50%, 0) rotate(180deg);
+                    }
+                }
+            }
+
+            // Hover
+            &:not([disabled]):hover {
+                background-color: $color-secondary;
+                color: #fff;
+
+                svg:nth-child(2) {
+                    color: #fff;
+                }
+            }
         }
     }
 }