Break carousel out into its own component.

src/scss/carousel.scss

@@ -0,0 +1,53 @@
+:host {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+img,video {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.embla {
+  position: relative;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.embla__container {
+  display: flex;
+  width: 100%;
+  height: 100%;
+
+  user-select: none;
+  -webkit-touch-callout: none;
+  -khtml-user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.embla__viewport {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.embla__viewport.is-draggable {
+  cursor: move;
+  cursor: grab;
+}
+.embla__viewport.is-dragging {
+  cursor: grabbing;
+}
+
+.embla__slide {
+  position: relative;
+  height: 100%;
+  margin-right: 5px;
+  overflow: visible;
+}
+.embla__slide img,video {
+  // Letterbox media. <frigate-card-ha-hls-player> has similar added directly in
+  // its element.
+  object-fit: contain;
+}

src/scss/thumbnail-carousel.scss

@@ -0,0 +1,14 @@
+.embla__slide {
+  flex: 0 0 var(--frigate-card-viewer-thumbnail-size);
+  opacity: 0.4;
+  transition: opacity 1s ease, transform 0.3s ease;
+}
+.embla__slide.slide-selected {
+  opacity: 1.0;
+}
+.embla__slide:hover {
+  transform: scale(1.1);
+}
+.embla__slide img {
+  border-radius: 5px;
+}

src/scss/viewer-core.scss

@@ -15,7 +15,7 @@ img,video {
   display: block;
 }
 
-.embla, .embla-thumbnails {
+.embla {
   position: relative;
   margin-left: auto;
   margin-right: auto;
@@ -27,13 +27,12 @@ img,video {
   flex: 1;
   min-height: 0;
 }
-.embla-thumbnails {
+frigate-card-thumbnail-carousel {
   flex: 0 0 var(--frigate-card-viewer-thumbnail-size);
   margin-top: 5px;
-  //margin-bottom: 5px;
 }
 
-.embla__container, .embla-thumbnails__container {
+.embla__container {
   display: flex;
   width: 100%;
   height: 100%;
@@ -44,20 +43,20 @@ img,video {
   -webkit-tap-highlight-color: transparent;
 }
 
-.embla__viewport, .embla-thumbnails__viewport {
+.embla__viewport {
   width: 100%;
   height: 100%;
   overflow: hidden;
 }
-.embla__viewport.is-draggable, .embla-thumbnails__viewport.is-draggable {
+.embla__viewport.is-draggable {
   cursor: move;
   cursor: grab;
 }
-.embla__viewport.is-dragging, .embla-thumbnails__viewport.is-dragging {
+.embla__viewport.is-dragging {
   cursor: grabbing;
 }
 
-.embla__slide, .embla-thumbnails__slide {
+.embla__slide {
   position: relative;
   height: 100%;
   margin-right: 5px;
@@ -66,16 +65,6 @@ img,video {
 .embla__slide {
   flex: 0 0 100%;
 }
-.embla-thumbnails__slide {
-  flex: 0 0 var(--frigate-card-viewer-thumbnail-size);
-  border-radius: 5px;
-  opacity: 0.4;
-  transition: opacity 0.2s;
-}
-.embla-thumbnails__slide.main-carousel-selected {
-  opacity: 1.0;
-}
-
 .embla__slide img,video {
   // Letterbox media. <frigate-card-ha-hls-player> has similar added directly in
   // its element.