Refactor carousel into separate components.

src/scss/carousel.scss

@@ -4,16 +4,9 @@
   width: 100%;
 }
 
-img,video {
-  width: 100%;
-  height: 100%;
-  display: block;
-}
-
 .embla {
   width: 100%;
   height: 100%;
-  position: relative;
   margin-left: auto;
   margin-right: auto;
 }
@@ -28,10 +21,10 @@ img,video {
   -khtml-user-select: none;
   -webkit-tap-highlight-color: transparent;
 }
-:host([direction=vertical]) .embla__container {
+:host([direction='vertical']) .embla__container {
   flex-direction: column;
 }
-:host([direction=horizontal]) .embla__container {
+:host([direction='horizontal']) .embla__container {
   flex-direction: row;
 }
 
@@ -53,18 +46,10 @@ img,video {
   cursor: grabbing;
 }
 
-.embla__slide {
-  position: relative;
-  overflow: visible;
-}
-:host([direction=vertical]) .embla__slide {
+:host([direction='vertical']) ::slotted(.embla__slide) {
   margin-bottom: 5px;
 }
-:host([direction=horizontal]) .embla__slide {
+
+:host([direction='horizontal']) ::slotted(.embla__slide) {
   margin-right: 5px;
 }
-.embla__slide img,video {
-  // Letterbox media. <frigate-card-ha-hls-player> has similar added directly in
-  // its element.
-  object-fit: contain;
-}

src/scss/live-carousel.scss

@@ -0,0 +1,4 @@
+.embla__slide {
+  height: 100%;
+  flex: 0 0 100%;
+}

src/scss/media-carousel.scss

@@ -1,8 +1,9 @@
 :host {
-  --video-max-height: none;
-}
-
-.embla__slide {
-  flex: 0 0 100%;
+  display: block;
+  width: 100%;
   height: 100%;
-}
+  --video-max-height: none;
+
+  // Keep the controls relative to the media carousel itself.
+  position: relative;
+}

src/scss/next-previous-control.scss

@@ -22,7 +22,7 @@
 }
 
 .controls.icons {
-  top: calc(50% - (40px / 2));
+  top: calc(50% - (var(--frigate-card-next-prev-size) / 2));
 }
 
 .controls.thumbnails {

src/scss/thumbnail-carousel.scss

@@ -1,6 +1,10 @@
 @use 'const.scss';
 
 :host {
+  display: block;
+  width: 100%;
+  height: 100%;
+
   --frigate-card-carousel-thumbnail-opacity: 1;
 }
 

src/scss/thumbnail-feature-event.scss

@@ -3,6 +3,10 @@
   overflow: hidden;
 }
 
+img {
+  display: block;
+}
+
 img,
 ha-icon {
   border-radius: var(--ha-card-border-radius, 4px);

src/scss/viewer-carousel.scss

@@ -0,0 +1,14 @@
+.embla__slide {
+  height: 100%;
+  flex: 0 0 100%;
+}
+
+.embla__slide img {
+  display: block;
+  width: 100%;
+  height: 100%;
+
+  // Letterbox media. <frigate-card-ha-hls-player> has similar added directly in
+  // its element.
+  object-fit: contain;
+}