Style image carousel

web/app/routes/logbook.flights.$id/route.module.css

@@ -0,0 +1,28 @@
+.control {
+  &[data-inactive] {
+    opacity: 0;
+    cursor: default;
+  }
+}
+.controls {
+  transition: opacity 150ms ease;
+  opacity: 0;
+}
+
+.root {
+  &:hover {
+    .controls {
+      opacity: 1;
+    }
+  }
+}
+
+.indicator {
+  width: rem(12px);
+  height: rem(4px);
+  transition: width 250ms ease;
+
+  &[data-active] {
+    width: rem(40px);
+  }
+}

web/app/routes/logbook.flights.$id/route.tsx

@@ -25,6 +25,8 @@ import { IconPencil, IconTrash } from "@tabler/icons-react";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { useEffect, useState } from "react";
 
+import classes from "./route.module.css";
+
 export default function Flight() {
   const params = useParams();
 
@@ -136,6 +138,7 @@ export default function Flight() {
                           withIndicators
                           slideGap="sm"
                           slideSize={{ base: "100%", sm: "80%" }}
+                          classNames={classes}
                         >
                           {imageIds.map((img) => (
                             <Carousel.Slide key={randomId()}>