@iamproperty/components 7.7.1--beta14 → 7.7.1--beta16

package/assets/sass/components/carousel.component.scss

@@ -1,5 +1,5 @@
 @use '../_func' as *;
-@use '../elements/buttons' as *;
+@use '../elements/buttons';
 
 *,
 *::before,
@@ -7,625 +7,628 @@
   box-sizing: border-box;
 }
 
-/* #region default carousel */
 
-:host {
-  display: block;
-  overflow: visible;
-  container-type: inline-size;
-}
+@layer components {
 
-.carousel {
-  margin-inline: calc(var(--carousel-spacing, 1.5rem) * -1);
-  margin-bottom: 2rem;
-  display: block;
-  overflow: visible;
+  .carousel-wrapper {
 
-  .carousel__wrapper {
-    position: relative;
-    overflow-x: clip;
+    padding-inline: 1.5rem;
+    margin-inline: -1.5rem;
+    overflow: hidden;
+    container-type: inline-size;
+    display: block;    
+    margin-bottom: var(--carousel-mb, 1.5rem);
   }
 
-  .carousel__inner {
-    --gutter-x: 1rem;
+  .carousel {
+    --button-height: 3rem;
+    --marker-height: 1.25rem;
+    --marker-mb: 1rem;
+    padding-inline: 0.5rem;
+    margin-inline: -0.5rem;
+    padding-bottom: calc(1rem + var(--button-height) + var(--marker-height) + var(--marker-mb));
+
+    scroll-padding: 0.5rem;
+    display: grid;
+    grid-auto-flow: column;
+    gap: var(--gap);
+    anchor-scope: all;
+    anchor-name: --carousel;
     overflow-x: auto;
-    padding-bottom: 1rem;
+    overscroll-behavior-x: contain;
     scroll-snap-type: x mandatory;
+    scrollbar-width: none;
+    scroll-marker-group: before;
+    scroll-behavior: smooth;
+    grid-auto-flow: column;
+    grid-auto-columns: calc((100% / var(--count,1)) - ((var(--gap) * (var(--count,1) - 1)) / var(--count,1)));
   }
 
-  .carousel__content {
-    display: flex;
-    flex-wrap: nowrap !important;
-    margin-inline-end: 0;
-    padding-inline-start: var(--carousel-spacing, 1.5rem);
-    padding-inline-end: var(--carousel-spacing, 1.5rem);
+  /* #region items */
 
-    margin-right: calc(-0.5 * var(--gutter-x));
-    margin-left: calc(-0.5 * var(--gutter-x));
-  }
+  .carousel > * {
 
-  .col > *:last-child {
-    margin-bottom: 0;
-    padding-bottom: 0;
+    container-type: scroll-state;
+    grid-column: auto;
+    min-height: 100%;
+    margin: 0;
+    scroll-snap-align: start;
   }
-}
-
-::slotted(div) {
-  scroll-snap-align: start;
-  scroll-margin-left: calc(var(--carousel-spacing, 1.5rem) - 0.5rem);
+  /* #endregion */
 
-  flex-shrink: 0;
-  width: calc(100% + var(--last-item-extra, 0px));
-
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-  margin-top: var(--gutter-y);
-}
-
-::slotted(div:last-child) {
-  padding-inline-end: 1.5rem;
-  --last-item-extra: 1rem;
-}
-
-@container (min-width: 36em) {
+  /* #region left and right buttons */
   .carousel {
-    margin-inline: calc(var(--carousel-spacing, 2.5rem) * -1);
+    
+    &::scroll-button(*) {
+
+      cursor: pointer;
+      position-anchor: --carousel;
+      background: none;
+      border: none;
+    
+      font-size: 1rem !important;
+      padding: 0 !important;
+      margin-bottom: .5rem;
+      text-align: center;
+      width: var(--button-height);
+      height: var(--button-height);
+      align-content: center;
+      line-height: 1 !important;
+      overflow: hidden;
+      font-size: 1rem;
+      font-family: "Font Awesome 7 Pro" !important;
+      display: none;
+      position: absolute;
+      position-area: block-end center;
+      border-radius: 50%;
+      margin-top: calc((var(--button-height) + var(--marker-height) + var(--marker-mb)) * -1);
 
-    .carousel__content {
-      padding-inline-start: var(--carousel-spacing, 2.5rem);
-      padding-inline-end: var(--carousel-spacing, 2.5rem);
     }
-  }
 
-  :host([data-smcols]) ::slotted(div) {
-    scroll-snap-align: unset;
-    flex: 0 0 auto;
-  }
+    &::scroll-button(left) {
 
-  :host([data-smcols='2']) ::slotted(div) {
-    width: calc(50% + var(--last-item-extra, 0px));
-  }
+      display: inline-block;
+      //left: anchor(left);
+      content: "\f053" / "Scroll left"!important;
+      margin-left: calc(var(--button-height) * -1) !important;
+    }
 
-  :host([data-smcols='3']) ::slotted(div) {
-    width: calc(33.3333333333% + var(--last-item-extra, 0px));
-  }
-  :host([data-smcols='4']) ::slotted(div) {
-    width: calc(25% + var(--last-item-extra, 0px));
-  }
+    &::scroll-button(right) {
 
-  :host([data-smcols='2']) ::slotted(div:nth-child(odd)),
-  :host([data-smcols='3']) ::slotted(div:nth-child(3n + 1)),
-  :host([data-smcols='4']) ::slotted(div:nth-child(4n + 1)) {
-    scroll-snap-align: start;
-  }
+      display: inline-block;
+      //right: anchor(right);
+      content: "\f054" / "Scroll right"!important;
+      margin-right: calc(var(--button-height) * -1) !important;
+    }
+    
+    &::scroll-button(*):disabled {
+      pointer-events: none;
+    }
 
-  ::slotted(div) {
-    scroll-margin-left: calc(var(--carousel-spacing, 2.5rem) - 0.5rem);
+    &::scroll-button(*):is(:hover,:focus-visible) {
+      outline-offset: 5px;
+      background-color: var(--colour-light);
+      border-color: var(--colour);
+    }
   }
-
-  ::slotted(div:last-child) {
-    padding-inline-end: 2.5rem;
-    --last-item-extra: 2rem;
+  /* #endregion */
+
+  /* #region left and right buttons on desktop */
+  .carousel-wrapper .carousel {
+    
+    @container (min-width: 62em) {
+      
+      --button-height: 0rem;
+
+      &::scroll-button(*) {
+        --button-height: 3rem;
+        margin-top: -1rem;
+      }
+      &::scroll-button(left) {
+        position-area: center inline-start;
+      }
+
+      &::scroll-button(right) {
+        position-area: center inline-end;
+      }
+    }
   }
-}
+  /* #endregion */
 
-@container (min-width: 62em) {
+  /* #region markers */
   .carousel {
-    margin-inline: 0;
-    position: relative;
-  }
-  .carousel__wrapper {
-    overflow: hidden;
+    &::scroll-marker-group {
 
-    margin-inline: calc(-0.5 * 1rem);
-  }
-  .carousel__inner {
-  }
-  .carousel__content {
-    padding-inline: 0 !important;
-    margin-inline: 0 !important;
-  }
-
-  ::slotted(div) {
-    margin-left: 0;
-    scroll-margin-left: 0;
-  }
-
-  ::slotted(div:last-child) {
-    padding-inline-end: calc(0.5 * 1rem);
-    --last-item-extra: 0px;
-  }
+      position: absolute;
+      position-anchor: --carousel;
+      container: marker-group / inline-size;
+      display: grid;
+      place-content: safe center;
+      box-sizing: border-box;
+      border-radius: var(--radius-round);
+      scrollbar-width: none;
+      scroll-behavior: smooth;
+      inline-size: 100%;
+      max-inline-size: 100cqi;
+      overflow-x: auto;
+      scroll-snap-type: x mandatory;
+      overscroll-behavior-x: contain;
+      grid-auto-columns: var(--marker-height); /* Magic number */
+      grid-auto-rows: var(--marker-height); /* Magic number */
+      
+      overflow-x: auto;
+      top: auto;
+      bottom: anchor(bottom);
+      grid-auto-flow: column;
+      justify-items: center;
+      align-items: center;
+      padding-block: 0;
+      margin-bottom: var(--marker-mb);
+    }
 
-  :host([data-mdcols]) ::slotted(div) {
-    scroll-snap-align: unset;
-    flex: 0 0 auto;
-  }
+    
+    > *::scroll-marker {
+      content: "";
+      scroll-snap-align: start;
+      cursor: pointer;
+      text-decoration: none;
+      interactivity: auto;
+      //display: none;
+      width: .5rem;
+      aspect-ratio: 1;
+      border-radius: 50%;
+      overflow: hidden;
+      background: #a5ecfd; /* Magic colour */
+      cursor: pointer;
+      border: none;
+    }
 
-  :host([data-mdcols='2']) ::slotted(div) {
-    width: calc(50% + var(--last-item-extra, 0px));
-  }
+    > *::scroll-marker:target-current {
 
-  :host([data-mdcols='3']) ::slotted(div) {
-    width: calc(33.3333333333% + var(--last-item-extra, 0px));
-  }
-  :host([data-mdcols='4']) ::slotted(div) {
-    width: calc(25% + var(--last-item-extra, 0px));
-  }
-  :host([data-mdcols='5']) ::slotted(div) {
-    width: calc(20% + var(--last-item-extra, 0px));
-  }
-  :host([data-mdcols='6']) ::slotted(div) {
-    width: calc(16.6666666667% + var(--last-item-extra, 0px));
+      border-color: var(--colour-info);
+      background: var(--colour-info);
+      width: 1rem;
+      height: 1rem;
+      min-height: 1rem;
+      margin-inline: .125rem; /* Magic number */
+    }
+    
   }
+  /* #endregion */
 
-  :host([data-mdcols='2']) ::slotted(div:nth-child(odd)),
-  :host([data-mdcols='3']) ::slotted(div:nth-child(3n + 1)),
-  :host([data-mdcols='4']) ::slotted(div:nth-child(4n + 1)),
-  :host([data-mdcols='5']) ::slotted(div:nth-child(5n + 1)),
-  :host([data-mdcols='6']) ::slotted(div:nth-child(6n + 1)) {
-    scroll-snap-align: start;
+  /* #region count the number of items and set variables to hide the controls/markers */
+  .carousel-wrapper:has(.carousel > *:first-child:last-child) {
+    
+    --hide-buttons: 1;
+    --hide-markers: 1;
   }
-}
-
-/* #endregion */
-
-/* #region Remove the scrollbar */
-.carousel__inner {
-  /*  FireFox */
-  scrollbar-width: none;
-  /*  IE10+ */
-  -ms-overflow-style: none;
-}
-
-.carousel__inner::-webkit-scrollbar {
-  /*  Chrome, Safari, Edge */
-  display: none;
-}
-/* #endregion */
+  
+  .carousel {
+    
+    @container (min-width: 36em) {
+      &[data-smcols='2']:not(:has(> *:nth-child(3))) {
+
+        --hide-buttons: 1;
+        --hide-markers: 1;
+
+        --button-height: 0rem;
+        --marker-height: 0rem;
+        --marker-mb: 0rem;
+      }
+      &[data-smcols='3']:not(:has(> *:nth-child(4))) {
+
+        --hide-buttons: 1;
+        --hide-markers: 1;
+
+        --button-height: 0rem;
+        --marker-height: 0rem;
+        --marker-mb: 0rem;
+      }
+    }
 
-/* #region Direction button */
+    @container (min-width: 62em) {
+      &[data-mdcols='2']:not(:has(> *:nth-child(3))) {
 
-.carousel__btns {
-  text-align: center;
-  padding-bottom: 0.5rem;
-}
+        --hide-buttons: 1;
+        --hide-markers: 1;
 
-.btn-next,
-.btn-prev {
-  margin: 0 !important;
-
-  &:after {
-    content: '';
-    position: absolute;
-    right: 0;
-    top: 0;
-    height: 100%;
-    width: 100%;
-    background: currentColor;
-    mask-image:  var(--icon-arrow);
-    mask-size: 50%;
-    mask-repeat: no-repeat;
-    mask-position: 50% 60%;
-    -webkit-mask-image:  var(--icon-arrow);
-    -webkit-mask-size: 50%;
-    -webkit-mask-repeat: no-repeat;
-    -webkit-mask-position: 55% 50%;
-    transform: rotate(0deg);
-  }
-}
+        --button-height: 0rem;
+        --marker-height: 0rem;
+        --marker-mb: 0rem;
+      }
+      &[data-mdcols='3']:not(:has(> *:nth-child(4))) {
 
-.btn-prev {
-  &:after {
-    transform: rotate(180deg);
-  }
-}
+        --hide-buttons: 1;
+        --hide-markers: 1;
 
-@container (min-width: 62em) {
-  .carousel__btns {
-    padding-bottom: 0;
-  }
-  .btn-prev {
-    position: absolute;
-    top: 50%;
-    left: 0;
-    margin: -2rem 0 0 -3rem !important;
-  }
-  .btn-next {
-    position: absolute;
-    top: 50%;
-    right: 0;
-    margin: -2rem -3rem 0 0 !important;
+        --button-height: 0rem;
+        --marker-height: 0rem;
+        --marker-mb: 0rem;
+      }
+    }
   }
-}
+  /* #endregion */
 
-/* #endregion */
+  /* #region change the item count via queries */
+  .carousel {
+    
+    @container (min-width: 36em) {
+      &[data-smcols='2'] {
 
-/* #region carousel controls/pips */
-.carousel .carousel__controls {
-  overflow: hidden;
-  margin-inline: auto;
-  margin-bottom: 1rem;
-  text-align: center;
-  max-width: 30rem;
+        --count: 2;
+      }
+      &[data-smcols='3'] {
 
-  @container (min-width: 36em) {
-    width: 100%;
-  }
+        --count: 3;
+      }
+    }
 
-  button {
-    padding: 0;
-    margin: 0 0.2rem 0.2rem;
-    border: none;
-  }
+    @container (min-width: 64em) {
+      &[data-mdcols='2'] {
 
-  button {
-    width: 0.5rem;
-    height: 0.5rem;
-    min-height: 0.5rem;
-    border-radius: 50%;
-    text-indent: -50rem;
-    overflow: hidden;
-    background: #a5ecfd;
-    margin-inline: 0.375rem; /* 6 */
-    cursor: pointer;
-    border: none;
+        --count: 2;
+      }
+      &[data-mdcols='3'] {
 
-    &:hover {
-      background-color: var(--colour-info);
-    }
-
-    &:before {
-      display: none;
+        --count: 3;
+      }
     }
   }
+  /* #endregion */
 
-  button:first-child:last-child {
-    display: none;
-  }
-}
+  /* #region carousel responsive to the count number variable */
+  .carousel {
 
-.carousel__controls > button[aria-current] {
-  --colour-active-thumbnail: var(--colour-info);
-  border-color: var(--colour-active-thumbnail);
-  background: var(--colour-info);
+    > * {
 
-  width: 1rem;
-  height: 1rem;
-  min-height: 1rem;
-  margin-inline: 0.125rem; /* 2 */
+      @container style(--count) {
 
-  &:hover {
-    background: var(--colour-info);
-  }
-}
-/* #endregion */
+        scroll-snap-align: unset;
+        
+        &::scroll-marker{
 
-/* #region progress bar */
-.carousel__progress {
-  text-align: center;
-  margin-bottom: 1rem;
-  display: none;
-}
+          display: none;
+        }
+      }
 
-input[type='range'] {
-  --track-size: 0.5rem;
-  --track-colour: #a5ecfd;
-  --thumb-colour: var(--colour-info);
-  --thumb-size: 1rem;
-  --thumb-size-outline: 0;
-  width: 90%;
-  max-width: 10.75rem; /* 172 */
-
-  background: transparent;
-  cursor: pointer;
-  margin: 0;
-  height: 1rem;
-  border-radius: 50%;
-  accent-color: var(--thumb-colour);
-  -webkit-appearance: none;
-  appearance: none;
-}
+      @container not scroll-state(snapped: x) {
+        
+        --opacity: 0;
+      }
+      
+      @container style(--count: 2) {
 
-/*  Track Styles */
-input[type='range']::-webkit-slider-runnable-track {
-  background: var(--track-colour);
-  height: var(--track-size);
-  border-radius: 0.5625rem; /* 9 */
-}
+        &:nth-child(2n - 1) {
+          scroll-snap-align: start;
+          scroll-snap-stop: always;
+        }
 
-input[type='range']::-moz-range-track {
-  background: var(--track-colour);
-  height: var(--track-size);
-  border-radius: 0.5625rem; /* 9 */
-}
+        &:nth-child(2n - 1)::scroll-marker{
 
-/*  Extended track functionality */
-input[type='range']::-webkit-slider-runnable-track {
-  background: linear-gradient(
-    to right,
-    var(--track-colour),
-    var(--track-colour) var(--start-percent, 0%),
-    var(--thumb-colour) var(--start-percent, 0%),
-    var(--thumb-colour) calc(var(--percent, 0%)),
-    var(--track-colour) calc(var(--percent, 0%))
-  );
-}
+          display: block;
+        }
+      }
 
-input[type='range']::-moz-range-track {
-  background: linear-gradient(
-    to right,
-    var(--track-colour),
-    var(--track-colour) var(--start-percent, 0%),
-    var(--thumb-colour) var(--start-percent, 0%),
-    var(--thumb-colour) calc(var(--percent, 0%)),
-    var(--track-colour) calc(var(--percent, 0%))
-  );
-}
+      @container style(--count: 3) {
 
-/*  Thumb Styles */
-input[type='range']::-webkit-slider-thumb {
-  -webkit-appearance: none; /* Override default look */
-  appearance: none;
-  margin-top: -0.25rem; /* Centers thumb on the track */
-  background-color: var(--thumb-colour);
-  height: var(--thumb-size);
-  width: var(--thumb-size);
-  border-radius: 50%;
-  position: relative;
-  z-index: 99;
-  pointer-events: all;
-}
+        &:nth-child(3n - 2) {
+          scroll-snap-align: start;
+          scroll-snap-stop: always;
+        }
 
-input[type='range']::-moz-range-thumb {
-  border: none; /*Removes extra border that FF applies*/
-  background-color: var(--thumb-colour); /*Removes default border-radius that FF applies*/
-  height: var(--thumb-size);
-  width: var(--thumb-size);
-  border-radius: 50%;
-  position: relative;
-  z-index: 99;
-  pointer-events: all;
-}
+        &:nth-child(3n - 2)::scroll-marker{
 
-/*  Focus Styles */
-input[type='range']:focus {
-  outline: none;
-}
+          display: block;
+        }
+      }
+    } 
+  }
 
-input[type='range']:hover::-webkit-slider-thumb,
-input[type='range']:focus::-webkit-slider-thumb {
-  outline: var(--thumb-size-outline) solid var(--thumb-colour);
-}
+  /* #endregion */
 
-input[type='range']:active::-webkit-slider-thumb {
-  outline: var(--thumb-size-outline) solid var(--thumb-colour);
-}
+  /* #region hide controls/markers */
+  .carousel-wrapper {
+    
 
-input[type='range']:hover::-moz-range-thumb,
-input[type='range']:focus::-moz-range-thumb {
-  outline: var(--thumb-size-outline) solid var(--thumb-colour);
-}
-input[type='range']:focus::-moz-range-thumb {
-  outline: var(--thumb-size-outline) solid var(--thumb-colour);
-}
+    @container style(--hide-buttons) {
 
-/* #endregion */
+      --button-height: 0rem;
+      
+      .carousel::scroll-button(*) {
+        display: none;
+      }
+    }
 
-/* #region Hide buttons and pips */
-.carousel__btns:has(~ .carousel__controls button:first-child:nth-child(1):last-child) {
-  display: none;
-}
+    @container style(--hide-markers) {
 
-.carousel__controls:has(button:nth-child(5)) {
-  display: none;
-}
-.carousel__controls:has(button:nth-child(5)) ~ .carousel__progress {
-  display: block;
-}
+      --marker-height: 0rem;
+      --marker-mb: 0rem;
 
-@container (min-width: 36em) {
-  :host([data-smcols='2']) .carousel__controls > button:not(:nth-child(odd)),
-  :host([data-smcols='3']) .carousel__controls > button:not(:nth-child(3n + 1)),
-  :host([data-smcols='4']) .carousel__controls > button:not(:nth-child(4n + 1)) {
-    display: none;
+      .carousel::scroll-marker-group {
+        display: none;
+      }
+    }
   }
+  /* #endregion */
 
-  /*  Make sure that we dont just have one pip showing */
-  :host([data-smcols='2']) .carousel__controls:has(button:first-child:nth-last-child(2)),
-  :host([data-smcols='3'])
-    .carousel__controls:has(:is(button:first-child:nth-last-child(2), button:first-child:nth-last-child(3))),
-  :host([data-smcols='4'])
-    .carousel__controls:has(
-      :is(
-        button:first-child:nth-last-child(2),
-        button:first-child:nth-last-child(3),
-        button:first-child:nth-last-child(4)
-      )
-    ),
-  :host([data-smcols='2']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(2)),
-  :host([data-smcols='3']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(2)),
-  :host([data-smcols='3']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(3)),
-  :host([data-smcols='4']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(2)),
-  :host([data-smcols='4']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(3)),
-  :host([data-smcols='4']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(4)) {
-    display: none;
-  }
+  /* #region carousel inside of admin panel */
+  .admin-panel {
+    
+    --hide-buttons: 1;
 
-  /*  Show slider */
-  :host([data-smcols]) .carousel__controls {
-    display: block;
-  }
-  :host([data-smcols]) .carousel__controls ~ .carousel__progress {
-    display: none;
+    .carousel {
+        
+      --button-height: 0rem;
+      --marker-mb: 0rem;
+      margin-bottom: 0;
+    }
   }
+  /* #endregion */
 
-  :host([data-smcols='2']) .carousel__controls:has(button:nth-child(10)),
-  :host([data-smcols='3']) .carousel__controls:has(button:nth-child(15)),
-  :host([data-smcols='4']) .carousel__controls:has(button:nth-child(20)) {
+
+  /* #region progress bar */
+  .carousel__progress {
+    text-align: center;
     display: none;
   }
 
-  :host([data-smcols='2']) .carousel__controls:has(button:nth-child(10)) ~ .carousel__progress,
-  :host([data-smcols='3']) .carousel__controls:has(button:nth-child(15)) ~ .carousel__progress,
-  :host([data-smcols='4']) .carousel__controls:has(button:nth-child(20)) ~ .carousel__progress {
-    display: block;
+  input[type='range'] {
+    --track-size: 0.5rem;
+    --track-colour: #a5ecfd;
+    --thumb-colour: var(--colour-info);
+    --thumb-size: 1rem;
+    --thumb-size-outline: 0;
+    width: 90%;
+    max-width: 10.75rem; /* 172 */
+
+    background: transparent;
+    cursor: pointer;
+    margin: 0;
+    height: 1rem;
+    border-radius: 50%;
+    accent-color: var(--thumb-colour);
+    -webkit-appearance: none;
+    appearance: none;
+  }
+
+  /*  Track Styles */
+  input[type='range']::-webkit-slider-runnable-track {
+    background: var(--track-colour);
+    height: var(--track-size);
+    border-radius: 0.5625rem; /* 9 */
+  }
+
+  input[type='range']::-moz-range-track {
+    background: var(--track-colour);
+    height: var(--track-size);
+    border-radius: 0.5625rem; /* 9 */
+  }
+
+  /*  Extended track functionality */
+  input[type='range']::-webkit-slider-runnable-track {
+    background: linear-gradient(
+      to right,
+      var(--track-colour),
+      var(--track-colour) var(--start-percent, 0%),
+      var(--thumb-colour) var(--start-percent, 0%),
+      var(--thumb-colour) calc(var(--percent, 0%)),
+      var(--track-colour) calc(var(--percent, 0%))
+    );
+  }
+
+  input[type='range']::-moz-range-track {
+    background: linear-gradient(
+      to right,
+      var(--track-colour),
+      var(--track-colour) var(--start-percent, 0%),
+      var(--thumb-colour) var(--start-percent, 0%),
+      var(--thumb-colour) calc(var(--percent, 0%)),
+      var(--track-colour) calc(var(--percent, 0%))
+    );
+  }
+
+  /*  Thumb Styles */
+  input[type='range']::-webkit-slider-thumb {
+    -webkit-appearance: none; /* Override default look */
+    appearance: none;
+    margin-top: -0.25rem; /* Centers thumb on the track */
+    background-color: var(--thumb-colour);
+    height: var(--thumb-size);
+    width: var(--thumb-size);
+    border-radius: 50%;
+    position: relative;
+    z-index: 99;
+    pointer-events: all;
   }
-}
 
-@container (min-width: 62em) {
-  :host([data-mdcols]) .carousel__controls > button {
-    display: inline-block !important;
+  input[type='range']::-moz-range-thumb {
+    border: none; /*Removes extra border that FF applies*/
+    background-color: var(--thumb-colour); /*Removes default border-radius that FF applies*/
+    height: var(--thumb-size);
+    width: var(--thumb-size);
+    border-radius: 50%;
+    position: relative;
+    z-index: 99;
+    pointer-events: all;
   }
 
-  :host([data-mdcols]) .carousel__controls {
-    display: block !important;
+  /*  Focus Styles */
+  input[type='range']:focus {
+    outline: none;
   }
 
-  :host([data-mdcols='2']) .carousel__controls > button:not(:nth-child(odd)),
-  :host([data-mdcols='3']) .carousel__controls > button:not(:nth-child(3n + 1)),
-  :host([data-mdcols='4']) .carousel__controls > button:not(:nth-child(4n + 1)),
-  :host([data-mdcols='5']) .carousel__controls > button:not(:nth-child(5n + 1)),
-  :host([data-mdcols='6']) .carousel__controls > button:not(:nth-child(6n + 1)) {
-    display: none !important;
+  input[type='range']:hover::-webkit-slider-thumb,
+  input[type='range']:focus::-webkit-slider-thumb {
+    outline: var(--thumb-size-outline) solid var(--thumb-colour);
   }
 
-  /*  Make sure that we dont just have one pip showing */
-  :host([data-mdcols='2']) .carousel__controls:has(button:first-child:nth-last-child(2)),
-  :host([data-mdcols='3'])
-    .carousel__controls:has(:is(button:first-child:nth-last-child(2), button:first-child:nth-last-child(3))),
-  :host([data-mdcols='4'])
-    .carousel__controls:has(
-      :is(
-        button:first-child:nth-last-child(2),
-        button:first-child:nth-last-child(3),
-        button:first-child:nth-last-child(4)
-      )
-    ),
-  :host([data-mdcols='5'])
-    .carousel__controls:has(
-      :is(
-        button:first-child:nth-last-child(2),
-        button:first-child:nth-last-child(3),
-        button:first-child:nth-last-child(4),
-        button:first-child:nth-last-child(5)
-      )
-    ),
-  :host([data-mdcols='6'])
-    .carousel__controls:has(
-      :is(
-        button:first-child:nth-last-child(2),
-        button:first-child:nth-last-child(3),
-        button:first-child:nth-last-child(4),
-        button:first-child:nth-last-child(5),
-        button:first-child:nth-last-child(6)
-      )
-    ),
-  :host([data-mdcols='2']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(2)),
-  :host([data-mdcols='3']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(2)),
-  :host([data-mdcols='3']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(3)),
-  :host([data-mdcols='4']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(2)),
-  :host([data-mdcols='4']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(3)),
-  :host([data-mdcols='4'])
-    .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(4))
-    :host([data-mdcols='5'])
-    .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(2)),
-  :host([data-mdcols='5']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(3)),
-  :host([data-mdcols='5']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(4)),
-  :host([data-mdcols='5']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(5)),
-  :host([data-mdcols='6']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(2)),
-  :host([data-mdcols='6']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(3)),
-  :host([data-mdcols='6']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(4)),
-  :host([data-mdcols='6']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(5)),
-  :host([data-mdcols='6']) .carousel__btns:has(~ .carousel__controls button:first-child:nth-last-child(6)) {
-    display: none !important;
+  input[type='range']:active::-webkit-slider-thumb {
+    outline: var(--thumb-size-outline) solid var(--thumb-colour);
   }
 
-  /*  Show slider */
-  :host([data-mdcols]) .carousel__controls {
-    display: block !important;
+  input[type='range']:hover::-moz-range-thumb,
+  input[type='range']:focus::-moz-range-thumb {
+    outline: var(--thumb-size-outline) solid var(--thumb-colour);
   }
-  :host([data-mdcols]) .carousel__controls ~ .carousel__progress {
-    display: none !important;
+  input[type='range']:focus::-moz-range-thumb {
+    outline: var(--thumb-size-outline) solid var(--thumb-colour);
   }
 
-  :host([data-mdcols='2']) .carousel__controls:has(button:nth-child(10)),
-  :host([data-mdcols='3']) .carousel__controls:has(button:nth-child(15)),
-  :host([data-mdcols='4']) .carousel__controls:has(button:nth-child(20)),
-  :host([data-mdcols='5']) .carousel__controls:has(button:nth-child(25)),
-  :host([data-mdcols='6']) .carousel__controls:has(button:nth-child(30)) {
-    display: none !important;
-  }
+  /* #endregion */
 
-  :host([data-mdcols='2']) .carousel__controls:has(button:nth-child(10)) ~ .carousel__progress,
-  :host([data-mdcols='3']) .carousel__controls:has(button:nth-child(15)) ~ .carousel__progress,
-  :host([data-mdcols='4']) .carousel__controls:has(button:nth-child(20)) ~ .carousel__progress,
-  :host([data-mdcols='5']) .carousel__controls:has(button:nth-child(25)) ~ .carousel__progress,
-  :host([data-mdcols='6']) .carousel__controls:has(button:nth-child(30)) ~ .carousel__progress {
-    display: block !important;
-  }
-}
+  @supports not selector(::scroll-marker-group) {
+    
+    .carousel {
+      --button-height: 0rem;
+      --marker-height: 0rem;
+      --marker-mb: 0rem;
+    }
 
-:host(.hide-btns) .carousel__btns,
-:host(.hide-controls) .carousel__controls {
-  display: none;
-}
-/* #endregion */
+    #carousel__progress {
+      display: block;
+    }
 
-/* #region thumbnails */
-:host(.thumbnails) .carousel__controls {
-  display: flex !important;
-  flex-wrap: wrap;
-  max-width: 100%;
-  overflow: visible;
+    @container (min-width: 36em) {
 
-  button {
-    padding: 0;
-    margin: 0 0.2rem 0.4rem;
+      #carousel__progress {
+        display: none;
+      }
+      #carousel__progress-sm {
+        display: block;
+      }
+    }
 
-    width: 6rem;
-    height: auto;
-    aspect-ratio: var(--carousel-image-aspect-ratio, 3 / 2);
+    @container (min-width: 62em) {
 
-    border-radius: 0;
-    position: relative;
-    border-radius: 0.25rem;
+      #carousel__progress-sm {
+        display: none;
+      }
+      #carousel__progress-md {
+        display: block;
+      }
+    }
 
-    img {
-      position: absolute;
-      inset: 0;
-      height: 100%;
-      width: 100%;
-      object-fit: cover;
-      margin: 0;
+  }
+
+  @supports selector(::scroll-marker-group) {
+    
+
+    @container (max-width: 36em) {
+      .carousel:has(> *:nth-child(5)){
+        
+        --button-height: 0rem;
+        --marker-height: 0rem;
+        --marker-mb: 0rem;
+        --hide-buttons: 1;
+        --hide-markers: 1;
+      }
+      .carousel:has(> *:nth-child(5)) + #carousel__progress {
+        display: block;
+      }
     }
 
-    &[aria-current] {
-      outline: 2px solid var(--colour-info);
+    @container (min-width: 36em) {
+
+      #carousel__progress {
+        display: none;
+      }
+
+      .carousel[data-smcols="2"]:has(> *:nth-child(10)){
+        
+        --button-height: 0rem;
+        --marker-height: 0rem;
+        --marker-mb: 0rem;
+        --hide-buttons: 1;
+        --hide-markers: 1;
+      }
+      .carousel[data-smcols="2"]:has(> *:nth-child(10)) + #carousel__progress-sm {
+        display: block;
+      }
+
+      .carousel[data-smcols="3"]:has(> *:nth-child(15)){
+        
+        --button-height: 0rem;
+        --marker-height: 0rem;
+        --marker-mb: 0rem;
+        --hide-buttons: 1;
+        --hide-markers: 1;
+      }
+      
+      .carousel[data-smcols="3"]:has(> *:nth-child(15)) + #carousel__progress-sm {
+        display: block;
+      }
     }
-  }
-}
 
-:host(.thumbnails) .carousel {
-  .carousel__btns {
-    padding-bottom: 0.5rem;
-  }
+    @container (min-width: 62em) {
+
+      #carousel__progress-sm {
+        display: none;
+      }
+
+      .carousel[data-mdcols="2"]:has(> *:nth-child(10)){
+        
+        --button-height: 0rem;
+        --marker-height: 0rem;
+        --marker-mb: 0rem;
+        --hide-buttons: 1;
+        --hide-markers: 1;
+      }
+      
+      .carousel[data-mdcols="2"]:has(> *:nth-child(10)) + #carousel__progress-md {
+        display: block;
+      }
+
+      .carousel[data-mdcols="3"]:has(> *:nth-child(15)){
+        
+        --button-height: 0rem;
+        --marker-height: 0rem;
+        --marker-mb: 0rem;
+        --hide-buttons: 1;
+        --hide-markers: 1;
+      }
+      
+      .carousel[data-mdcols="3"]:has(> *:nth-child(15)) + #carousel__progress-md {
+        display: block;
+      }
+    }
 
-  .btn-next,
-  .btn-prev {
-    position: relative;
-    margin: 0 !important;
   }
 
-  .carousel__progress {
-    display: none !important;
+
+  /* #region thumbnails */
+
+  .carousel__controls {
+    display: flex !important;
+    flex-wrap: wrap;
+    max-width: 100%;
+    overflow: visible;
+
+    button {
+      padding: 0;
+      margin: 0 0.2rem 0.4rem;
+
+      width: 6rem;
+      height: auto;
+      aspect-ratio: var(--carousel-image-aspect-ratio, 3 / 2);
+
+      border-radius: 0;
+      position: relative;
+      border-radius: 0.25rem;
+
+      img {
+        position: absolute;
+        inset: 0;
+        height: 100%;
+        width: 100%;
+        object-fit: cover;
+        margin: 0;
+      }
+
+      &[aria-current] {
+        outline: 2px solid var(--colour-info);
+      }
+    }
   }
-}
-/* #endregion */
 
-/* #region Turn carousel slide into image holder */
-::slotted(div.image__wrapper) {
-  width: 100%;
-  aspect-ratio: var(--carousel-image-aspect-ratio, 3 / 2);
-  position: relative;
+  /* #endregion */
 }
-/* #endregion */