/** Shopify CDN: Minification failed

Line 1032:2 Unexpected "@media"

**/
:root {
  --slider-counter-spacing-x: clamp(0.8rem, calc(16 / var(--vw-desktop-large) * 100vw), 1.6rem);
  --slider-counter-spacing-y: clamp(0.8rem, calc(16 / var(--vw-desktop-large) * 100vw), 1.6rem);
  --dot-size: clamp(0.5rem, calc(8 / var(--vw-desktop) * 100vw), 0.8rem);
}

:is(slider-component, card-slider) {
  /* TODO: Re-evaluate this */
  --desktop-margin-left-first-item: max(
    var(--spacing-edges),
    calc((100vw - var(--page-width) + (var(--spacing-edges) * 2) - var(--grid-column-gap)) / 2)
  );
  container-type: inline-size;
  position: relative;
  display: block;
  width: 100%;
}

:is(slider-component, card-slider).slider-component-full-width {
  --desktop-margin-left-first-item: var(--grid-horizontal-spacing);
}

.slider-component-inline-wrapper {
  --slider-controls-padding-x: clamp(1.5rem, 2.5vw, 3rem);
  --slider-button-height: clamp(3.6rem, 14cqi, 7.2rem);
  --slider-button-width: min(clamp(3.6rem, 10cqi, 4.8rem), var(--spacing-edges));
  --slider-button-icon-width: 1.3rem;
  --slider-button-padding-x: calc((var(--slider-button-width) - var(--slider-button-icon-width)) / 2);
  container-type: inline-size;
}

.slider-component-inline-wrapper__content {
  --offset-horizontal: var(--spacing-edges);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
}

.product__shop-the-look .slider-component-inline-wrapper__content {
  margin: 0 calc(var(--offset-horizontal) * -1);
}

.accordion__inner:has(.slider-component-inline-wrapper__content .contains-card) {
  margin-top: -0.5rem;
  margin-bottom: -0.5rem;
}

@media screen and (min-width: 750px) {
  .slider-component-inline-wrapper__content {
    --offset-horizontal: var(--slider-button-width);
  }
}

/* .slider-component-inline-wrapper .slider-button {
  --button-height: var(--slider-button-height);
  --button-width: var(--slider-button-width);
} */

/* .slider-component-inline-wrapper .slider-button--prev {
  justify-content: start;
}

.slider-component-inline-wrapper .slider-button--next {
  justify-content: end;
} */

:is(slider-component, card-slider).slider-component-inline {
  --desktop-margin-left-first-item: 0;
}

:is(slider-component, card-slider).slider-component-inline .slider::after {
  display: none;
}

@media screen and (min-width: 750px) {
  :is(slider-component, card-slider).slider-component-inline.contains-card-shadows {
    --desktop-margin-left-first-item: var(--product-card-shadow-blur-radius);
  }

  :is(slider-component, card-slider).slider-component-inline.contains-card-shadows .slider::after {
    display: block;
    padding-left: var(--product-card-shadow-blur-radius);
  }
}

:is(slider-component, card-slider).slider-component-inline .slider__slide:first-child {
  scroll-margin-left: var(--desktop-margin-left-first-item);
}

:is(slider-component, card-slider).slider-component-inline .slider:not(.product-grid):not(.card-grid) .slider__slide:first-child {
  margin-left: var(--desktop-margin-left-first-item) !important;
}

:is(slider-component, card-slider).slider-component-inline .slider {
  scroll-padding-left: 0;
}

/* :is(slider-component, card-slider).slider-component-inline .slider {
  padding: 0 var(--product-card-shadow-blur-radius);
} */

/* :is(slider-component, card-slider).slider-component-inline .slider {
  padding-left: var(--product-card-shadow-blur-radius);
  padding-right: var(--product-card-shadow-blur-radius);
  margin-left: calc(var(--product-card-shadow-blur-radius) * -1);
  margin-right: calc(var(--product-card-shadow-blur-radius) * -1);
} */

/* :is(slider-component, card-slider) .slider-component-inline__main > .slider {

}  */

@media screen and (max-width: 749px) {
  :is(slider-component, card-slider).page-width {
    padding: 0 var(--spacing-edges);
  }
}

@media screen and (min-width: 749px) and (max-width: 990px) {
  :is(slider-component, card-slider).page-width {
    padding: var(--spacing-edges);
  }
}

@media screen and (max-width: 989px) {
  .no-js :is(slider-component, card-slider) .slider {
    padding-bottom: 3rem;
  }
}

.slider:is(.product-grid, .card-grid).is-active {
  --grid-columns: min(var(--product-grid-columns), var(--column-count-max));
  --container-width: (min(100cqi, var(--page-width)) - (var(--spacing-edges) * 2));

  --offset: calc(var(--spacing-edges) + var(--page-offset));
  --column: calc(
    (var(--container-width) - (var(--grid-horizontal-spacing) * (var(--grid-columns) - 1))) /
      var(--grid-columns)
  );
}

.slider-component-inline .slider:is(.product-grid, .card-grid).is-active {
  --container-width: 100%;
}

.slider-component-inline .slider:is(.product-grid--peek, .card-grid--peek).is-active {
  --container-width: calc(100% - var(--grid-peek-width));
}

.slider.card-grid.is-active {
  --grid-columns: min(var(--column-count-max, var(--column-count-desktop)));
}

.slider:is(.drawer-grid).is-active {
  --container-width: 100%;
  --offset: min(var(--spacing-edges), var(--grid-horizontal-spacing));
}

@media (max-width: 640px) {
  .slider:is(.drawer-grid).is-active {
    --grid-columns: var(--column-count-mobile);
  }
}

@media screen and (max-width: 749px) {
  .slider:is(.product-grid--peek, .card-grid--peek).is-active {
    --container-width: calc(100vw - var(--grid-peek-width));
  }

  .slider.card-grid.is-active {
    --grid-columns: min(var(--column-count-min, var(--column-count-mobile)));
  }

  .slider__slide .card__content {
    display: none;
  }
}

.slider__slide {
  --focus-outline-padding: 0.5rem;
  --shadow-padding-top: calc(
    (var(--shadow-vertical-offset) * -1 + var(--shadow-blur-radius)) * var(--shadow-visible)
  );
  --shadow-padding-bottom: calc(
    (var(--shadow-vertical-offset) + var(--shadow-blur-radius)) * var(--shadow-visible)
  );
  scroll-snap-align: start;
  flex-shrink: 0;
  padding-bottom: 0;
}

@media screen and (max-width: 749px) {
  .slider.slider--mobile {
    position: relative;
    flex-wrap: inherit;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding-left: var(--spacing-edges);
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
  }

  .slider.slider--mobile.is-vertical {
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scroll-padding-top: var(--spacing-edges);
    scroll-padding-left: 0;
  }

  /* Fix to show some space at the end of our sliders in all browsers */
  .slider--mobile:after {
    content: "";
    width: 0;
    padding-left: var(--spacing-edges);
  }

  .slider--mobile:is(.product-grid, .card-grid) {
    grid-auto-flow: column;
    padding-left: var(--offset);
    padding-right: var(--offset);
    scroll-padding-left: var(--offset);
  }

  .slider--mobile:is(.product-grid, .card-grid)::after {
    display: none;
  }

  .slider.slider--mobile .slider__slide {
    margin-bottom: 0;
    padding-top: max(var(--focus-outline-padding), var(--shadow-padding-top));
    padding-bottom: max(var(--focus-outline-padding), var(--shadow-padding-bottom));
  }

  .slider.slider--mobile.contains-card--standard
    .slider__slide:not(.collection-list__item--no-media) {
    padding-bottom: var(--focus-outline-padding);
  }

  .slider.slider--mobile.contains-content-container .slider__slide {
    --focus-outline-padding: 0rem;
  }
}

@media screen and (min-width: 750px) {
  .slider.slider--tablet-up {
    position: relative;
    flex-wrap: inherit;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding-left: 1rem;
    -webkit-overflow-scrolling: touch;
  }

  .slider.slider--tablet-up.is-vertical {
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scroll-padding-top: 1rem;
    scroll-padding-left: 0;
  }

  .slider--tablet-up:is(.product-grid, .card-grid) {
    --offset: max(
      calc((100% - var(--page-width)) / 2 + var(--spacing-edges)),
      var(--spacing-edges)
    );

    grid-auto-flow: column;
    /* TODO: Make new var for xl (support > 1440) */
    padding-left: var(--offset);
    padding-right: var(--offset);
    scroll-padding-left: var(--offset);
  }

  .slider.slider--tablet-up .slider__slide {
    margin-bottom: 0;
  }
}

@media screen and (max-width: 989px) {
  .slider.slider--tablet {
    position: relative;
    flex-wrap: inherit;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding-left: var(--spacing-edges);
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
  }

  .slider.slider--tablet.is-vertical {
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scroll-padding-top: var(--spacing-edges);
    scroll-padding-left: 0;
  }

  /* Fix to show some space at the end of our sliders in all browsers */
  .slider--tablet:after {
    content: "";
    width: 0;
    padding-left: var(--spacing-edges);
    margin-left: calc(-1 * var(--grid-horizontal-spacing));
  }

  .slider--tablet:is(.product-grid, .card-grid) {
    grid-auto-flow: column;
    padding-left: var(--offset);
    padding-right: var(--offset);
    scroll-padding-left: var(--offset);
  }

  .slider--tablet:is(.product-grid, .card-grid)::after {
    display: none;
  }

  .slider.slider--tablet .slider__slide {
    margin-bottom: 0;
    padding-top: max(var(--focus-outline-padding), var(--shadow-padding-top));
    padding-bottom: max(var(--focus-outline-padding), var(--shadow-padding-bottom));
  }

  .slider.slider--tablet.contains-card--standard
    .slider__slide:not(.collection-list__item--no-media) {
    padding-bottom: var(--focus-outline-padding);
  }

  .slider.slider--tablet.contains-content-container .slider__slide {
    --focus-outline-padding: 0rem;
  }
}

.slider--everywhere {
  position: relative;
  flex-wrap: inherit;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1rem;
}

.slider--everywhere.is-vertical {
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}

.slider--everywhere:is(.product-grid, .card-grid) {
  grid-auto-flow: column;
}

.slider.slider--everywhere .slider__slide {
  margin-bottom: 0;
  scroll-snap-align: center;
}

@media screen and (min-width: 990px) {
  .slider-component-desktop.page-width {
    max-width: none;
  }

  .slider--desktop {
    position: relative;
    flex-wrap: inherit;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
    scroll-padding-left: var(--desktop-margin-left-first-item);
  }

  .slider--desktop.is-vertical {
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scroll-padding-top: var(--desktop-margin-left-first-item);
    scroll-padding-left: 0;
  }

  /* Fix to show some space at the end of our sliders in all browsers */
  .slider--desktop:after {
    content: "";
    width: 0;
    padding-left: 5rem;
    margin-left: calc(-1 * var(--grid-horizontal-spacing));
  }

  .slider--desktop:is(.product-grid, .card-grid) {
    --offset: max(
      calc((100% - var(--page-width)) / 2 + var(--spacing-edges)),
      var(--spacing-edges)
    );

    grid-auto-flow: column;

    /* These properties are casuing accessibility issues when voice over is used.
       Slider keeps reseting to the first element when arrow keys are used to navigate
       and focus changes back to the slider area.

       Workaround: Remove paddings and use container with a max-width to center the slider
       
       padding-left: var(--offset);
       padding-right: var(--offset);
       scroll-padding-left: var(--offset);
     */

    /*
    This is the solution I propose to replace paddings above.
    But this comes with a cost of not having the animation effect of the slider.
    */
    /* max-width: calc(100% - var(--offset) * 2); */
    max-width: max(var(--container-width), calc(100% - var(--offset) * 2));
    margin-inline: auto;
    padding: 0 !important;
    scroll-padding: 0 !important;
  }

  .slider--desktop:is(.drawer-grid) {
    --offset: 3rem;
  }

  .slider--desktop:is(.product-grid, .card-grid)::after {
    display: none;
  }

  .slider.slider--desktop .slider__slide {
    margin-bottom: 0;
    padding-top: max(var(--focus-outline-padding), var(--shadow-padding-top));
    padding-bottom: max(var(--focus-outline-padding), var(--shadow-padding-bottom));
  }

  .slider--desktop:not(.product-grid):not(.card-grid):not(.drawer-grid) .slider__slide:first-child {
    margin-left: var(--desktop-margin-left-first-item);
    scroll-margin-left: var(--desktop-margin-left-first-item);
  }

  .slider-component-full-width .slider--desktop {
    scroll-padding-left: var(--spacing-edges);
  }

  .slider--desktop:not(.product-grid):not(.card-grid).is-vertical .slider__slide:first-child {
    margin-left: 0;
    margin-top: var(--desktop-margin-left-first-item);
    scroll-margin-left: unset;
    scroll-margin-top: var(--desktop-margin-left-first-item);
  }

  .slider-component-full-width.is-vertical .slider--desktop {
    scroll-padding-left: unset;
    scroll-padding-top: var(--spacing-edges);
  }

  /* TODO: Clean these rules up, see if 1.5 is still needed */
  .slider-component-full-width :is(.product-grid, .card-grid).slider--desktop {
    --offset: var(--grid-horizontal-spacing);

    padding-left: var(--offset);
    padding-right: var(--offset);
    scroll-padding-left: var(--offset);
  }

  .slider-component-full-width
    .slider--desktop:not(.product-grid):not(.card-grid)
    .slider__slide:first-child {
    margin-left: var(--spacing-edges);
    scroll-margin-left: var(--spacing-edges);
  }

  .slider-component-full-width .slider--desktop:after {
    padding-left: var(--spacing-edges);
  }

  .slider-component-inline :is(.product-grid, .card-grid).slider--desktop {
    --offset: 0;
  }

  /* .slider-component-full-width .slider--desktop:is(.product-grid, .card-grid)::after {
    padding-left: var(--offset);
  } */

  /* TODO: Remove :not() stuff cause we overriding */
  .slider--desktop.grid--5-col-desktop .grid__item {
    width: calc((100% - var(--desktop-margin-left-first-item)) / 5 - var(--grid-column-gap) * 2);
  }

  .slider--desktop.grid--4-col-desktop .grid__item {
    width: calc((100% - var(--desktop-margin-left-first-item)) / 4 - var(--grid-column-gap) * 3);
  }

  .slider--desktop.grid--3-col-desktop .grid__item {
    width: calc((100% - var(--desktop-margin-left-first-item)) / 3 - var(--grid-column-gap) * 4);
  }

  .slider--desktop.grid--2-col-desktop .grid__item {
    width: calc((100% - var(--desktop-margin-left-first-item)) / 2 - var(--grid-column-gap) * 5);
  }

  .slider--desktop.grid--1-col-desktop .grid__item {
    width: calc((100% - var(--desktop-margin-left-first-item)) - var(--grid-column-gap) * 9);
  }

  .slider.slider--desktop.contains-card--standard
    .slider__slide:not(.collection-list__item--no-media) {
    padding-bottom: var(--focus-outline-padding);
  }

  .slider.slider--desktop.contains-content-container .slider__slide {
    --focus-outline-padding: 0rem;
  }
}

@media (prefers-reduced-motion) {
  .slider {
    scroll-behavior: auto;
  }
}

/* Scrollbar */

.slider {
  scrollbar-color: rgb(var(--color-foreground)) rgba(var(--color-foreground), 0.04);
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.slider::-webkit-scrollbar {
  height: 0.4rem;
  width: 0.4rem;
  display: none;
}

.no-js .slider {
  -ms-overflow-style: auto;
  scrollbar-width: auto;
}

.no-js .slider::-webkit-scrollbar {
  display: initial;
}

.slider::-webkit-scrollbar-thumb {
  background-color: rgb(var(--color-foreground));
  border-radius: 0.4rem;
  border: 0;
}

.slider::-webkit-scrollbar-track {
  background: rgba(var(--color-foreground), 0.04);
  border-radius: 0.4rem;
}

.slider-counter {
  display: flex;
  justify-content: center;
  min-width: 4.4rem;
  pointer-events: initial;
}

.slider-counter--counter {
  display: block;
  min-width: 0;
}

@media screen and (max-width: 749px) {
  .slider-counter--dots {
    margin-top: var(--slider-counter-spacing-y);
  }

  .slider-buttons .slider-counter--dots {
    margin-top: 0;
  }
}

@media screen and (min-width: 750px) {
  .slider-counter--dots {
    margin: 0 1.2rem;
  }
}

.slider-counter__link {
  padding: var(--slider-counter-spacing-y) var(--slider-counter-spacing-x);
  margin: 0;
}

.slider-counter__link--dots .dot {
  background-color: rgb(var(--color-gray-light));
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  padding: 0;
  display: block;
  transition: background-color var(--transition-smooth), transform var(--transition-smooth);
}

.slider-counter__link--active.slider-counter__link--dots .dot {
  background-color: rgb(var(--color-foreground));
}

@media screen and (forced-colors: active) {
  .slider-counter__link--active.slider-counter__link--dots .dot {
    background-color: CanvasText;
  }
}

.slider-counter__link--dots:not(.slider-counter__link--active):hover .dot {
  background-color: rgb(var(--color-secondary));
}

.slider-counter__link--numbers {
  transition: transform 0.2s ease-in-out;
}

.slider-counter__link--active.slider-counter__link--numbers,
.slider-counter__link--dots:not(.slider-counter__link--active):hover .dot,
.slider-counter__link--numbers:hover {
  transform: scale(1.1);
}

.slider-counter__link--numbers {
  color: rgba(var(--color-foreground), 0.5);
  text-decoration: none;
}

.slider-counter__link--numbers:hover {
  color: rgb(var(--color-foreground));
}

.slider-counter__link--active.slider-counter__link--numbers {
  text-decoration: underline;
  color: rgb(var(--color-foreground));
}

slider-component, card-slider, slideshow-component {
  --slider-controls-padding-x: clamp(1.5rem, 2.5vw, 3rem);
  /* TODO: Consider altering scaling method */
  --slider-button-height: clamp(3.6rem, 6vw, 7.2rem);
  --slider-button-width: clamp(3.6rem, 4vw, 4.8rem);
  --slider-button-icon-width: 1.3rem;
  --slider-button-padding-x: calc((var(--slider-button-width) - var(--slider-button-icon-width)) / 2);

  .slider-component-inline-wrapper & {
    --slider-button-height: clamp(3.6rem, 14cqi, 7.2rem);
    --slider-button-width: min(clamp(3.6rem, 10cqi, 4.8rem), var(--spacing-edges));
  }

  &.has-arrow-navigation {
    --slider-button-height: auto;
    --slider-button-width: auto;
    --slider-button-icon-width: clamp(3rem, 8.75vw, 5rem);

    @media screen and (min-width: 990px) {
      --slider-button-icon-width: clamp(5rem, 5vw, 6rem);
    }
  }

  &.has-arrow-navigation--small {
    --slider-button-icon-width: 1.6rem;
  }

  &.has-floating-navigation,
  &.collection-slider {
    --padding-min: 0;
    --padding-max: 15;
    --slider-controls-padding-x: clamp(
          calc(var(--padding-min) * 0.1rem),
          calc(
            var(--padding-min) * 0.1rem + (var(--padding-max) - var(--padding-min)) *
              (
                (100vw - (var(--vw-tablet-large) * 1px)) /
                  (var(--vw-desktop) - var(--vw-tablet-large))
              )
          ),
          calc(var(--padding-max) * 0.1rem)
        );

    @media screen and (min-width: 1200px) {
      --padding-min: 15;
      --padding-max: 30;
      --slider-controls-padding-x: clamp(
          calc(var(--padding-min) * 0.1rem),
          calc(
            var(--padding-min) * 0.1rem + (var(--padding-max) - var(--padding-min)) *
              ((100vw - (var(--vw-desktop) * 1px)) / (var(--vw-desktop-large) - var(--vw-desktop)))
          ),
          calc(var(--padding-max) * 0.1rem)
        );
    }
  }

  &.has-floating-navigation {
    @media screen and (min-width: 750px) {
      --column-count: var(--column-count-desktop, 4);
      --column-width: calc(
        (var(--container-width) - (var(--grid-horizontal-spacing) * (var(--column-count) - 1))) /
          var(--column-count)
      );
      /* --padding-min: 0;
      --padding-max: 15;
      --slider-controls-padding-x: clamp(
          calc(var(--padding-min) * 0.1rem),
          calc(
            var(--padding-min) * 0.1rem + (var(--padding-max) - var(--padding-min)) *
              (
                (100vw - (var(--vw-tablet-large) * 1px)) /
                  (var(--vw-desktop) - var(--vw-tablet-large))
              )
          ),
          calc(var(--padding-max) * 0.1rem)
        ); */
    }
  }
}

.slider-buttons {
  --padding-x: var(--slider-controls-padding-x);

  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--padding-x);
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  z-index: 2;
  transform: translate(-50%, -50%);
  pointer-events: none;
  max-width: var(--page-width);
}

.slider-buttons--inline {
  position: static;
  justify-content: center;
  transform: none;
  margin: clamp(1.5rem, 2.5vw, 3rem) auto 0;
}

@media screen and (min-width: 750px) {
  :where(slider-component, card-slider, slideshow-component).has-floating-navigation .slider-buttons {
    --column-width: calc(
        (100vw - (var(--spacing-edges) * 2) - (var(--grid-horizontal-spacing) * (var(--column-count) - 1))) /
          var(--column-count)
      );
    top: calc(((var(--column-width) * var(--image-ar)) / 2) + 0.5rem);
  }
}

@media screen and (min-width: 990px) {
  :where(slider-component, card-slider, slideshow-component).has-floating-navigation .slider-buttons {
    --container-width: (min(100vw, var(--page-width)) - (var(--spacing-edges) * 2));
    --column-width: calc(
        (var(--container-width) - (var(--grid-horizontal-spacing) * (var(--column-count) - 1))) /
          var(--column-count)
      );

    top: calc(((var(--column-width) * var(--image-ar)) / 2) + 0.5rem);
    padding: 0 var(--padding-x);
  }

  .slider:not(.slider--everywhere):not(.slider--desktop) + .slider-buttons {
    display: none;
  }
}

@media screen and (max-width: 989px) {
  .slider--desktop:not(.slider--tablet) + .slider-buttons {
    display: none;
  }
}

@media screen and (min-width: 750px) {
  .slider--mobile + .slider-buttons {
    display: none;
  }
}

.slider-button {
  --button-height: var(--slider-button-height);
  --button-width: var(--slider-button-width);
  --icon-width: var(--slider-button-icon-width);
  color: rgba(var(--color-foreground), 0.75);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  height: var(--button-height);
  width: var(--button-width);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: initial;
  transition: color var(--transition-hover);
}

.slider-button--hidden {
  opacity: 0;
  pointer-events: none;
}

.slider-button--arrow {
  /* --button-height: auto; */
  /* --button-width: auto; */
  /* --icon-width: clamp(3rem, 8.75vw, 5rem); */
  padding: 1rem;
  margin: -1rem;
}

/* @media screen and (min-width: 990px) {
  .slider-button--arrow {
    --icon-width: clamp(5rem, 5vw, 6rem);
  }
} */

.slider-button--arrow-short {
  /* --button-height: auto; */
  /* --button-width: auto; */
  /* --icon-width: 1.6rem; */
  padding: 1rem;
  margin: -1rem;
}

.slider-button--contained {
  --color-background: var(--color-gray-800);
  --color-foreground: var(--color-white);

  background-color: rgb(var(--color-background));
  border: rgb(var(--color-background)) 0.1rem solid;
  color: rgb(var(--color-foreground));
  border-radius: 50%;
  padding: 1.3rem;
  margin: 0;
  transition-property: background-color;
}

.slider-button--contained[disabled] {
  background-color: transparent;
  color: rgb(var(--color-background));
  cursor: not-allowed;
}

/* TODO: Check double color transition (button + icon */
.slider-button--contained[disabled] .icon {
  color: inherit !important;
}

.slider-button:not([disabled]):hover {
  color: rgb(var(--color-foreground));
}

.slider-button .icon {
  transition-duration: var(--duration-hover);
  transition-property: color, transform;
  transition-timing-function: var(--ease-hover);
  will-change: transform;
}

.slider-button .icon-caret {
  height: var(--icon-width);
}

.slider-button .icon-arrow {
  width: var(--icon-width);
}

.slider-button[disabled] .icon {
  color: rgba(var(--color-foreground), 0.3);
  cursor: not-allowed;
}

.slider-button--next .icon-caret {
  transform: rotate(-90deg);
}

.slider-button--prev .icon-caret {
  transform: rotate(90deg);
}

.slider-button--prev .icon-arrow {
  transform: scaleX(-1);
}

.slider-button:not([disabled]):hover,
.slider-button:not([disabled]):hover .icon {
  transition-duration: var(--duration-hover-active);
  transition-timing-function: var(--ease-hover-active);
}

.slider-button--next:not([disabled]):hover .icon-caret {
  transform: rotate(-90deg) scale(1.1);
}

.slider-button--next:not([disabled]):active .icon-caret {
  transform: rotate(-90deg) scale(1.03);
}

.slider-button--prev:not([disabled]):hover .icon-caret {
  transform: rotate(90deg) scale(1.1);
}

.slider-button--prev:not([disabled]):active .icon-caret {
  transform: rotate(90deg) scale(1.03);
}

.slider-button--next:not([disabled]):hover .icon-arrow {
  transform: scale(1.04);
}

.slider-button--next:not([disabled]):active .icon-arrow {
  transform: scale(1.02);
}

.slider-button--prev:not([disabled]):hover .icon-arrow {
  transform: scaleX(-1) scale(1.04);
}

.slider-button--prev:not([disabled]):active .icon-arrow {
  transform: scaleX(-1) scale(1.02);
}

.slider-button--next:not([disabled]):hover .icon-arrow--short {
  transform: scale(1.12);
}

.slider-button--next:not([disabled]):active .icon-arrow--short {
  transform: scale(1.04);
}

.slider-button--prev:not([disabled]):hover .icon-arrow--short {
  transform: scaleX(-1) scale(1.12);
}

.slider-button--prev:not([disabled]):active .icon-arrow--short {
  transform: scaleX(-1) scale(1.04);
}

.slider__control-wrapper {
  display: flex;
}

/* TODO: Remove transitions and use GSAP instead (scale instead of height/width) */
.slider.slider--thumbnails {
  gap: 1rem;
  padding: 1rem;
  scroll-padding-left: 1rem;
  margin: 0;
}

.slider.slider--thumbnails .slider__slide {
  scroll-snap-align: start;
  width: var(--thumbnail-width);
}

.slider__thumbnail {
  display: block;
  cursor: pointer;
  padding: 0;
  opacity: 0.7;
  /* TODO: Revisit this */
  filter: brightness(1.15) contrast(0.8);
  transition-property: filter, opacity;
  transition-duration: var(--duration-default);
  transition-timing-function: var(--ease-out-sine);
  width: 100%;
}

.slider__thumbnail::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  pointer-events: none;
  z-index: 2;
}

.slider__thumbnail::after {
  box-shadow: rgb(var(--color-foreground)) 0 0 0 0;
  transition: box-shadow var(--duration-default) var(--ease-out-sine);
}

.slider__thumbnail[aria-current] {
  opacity: 1;
  filter: none;
}

.slider__thumbnail[aria-current]::after {
  box-shadow: rgb(var(--color-foreground)) 0 0 0 0.1rem;
}

.slider__thumbnail img {
  pointer-events: none;
  transition: all var(--duration-default) var(--ease-out-sine);
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
}

.slider__thumbnail[aria-current] img {
  height: calc(100% - 0.4rem) !important;
  width: calc(100% - 0.4rem) !important;
}

.slider.is-vertical {
  flex-direction: column;
  max-height: 100%;
}

@media screen and (max-width: 749px) {
  :is(slider-component, card-slider, slideshow-component)[vertical="mobile"] .slider {
    flex-direction: column;
  }
}

@media screen and (max-width: 989px) {
  :is(slider-component, card-slider, slideshow-component)[vertical="tablet"] .slider {
    flex-direction: column;
  }
}
v @media screen and (min-width: 750px) {
  :is(slider-component, card-slider, slideshow-component)[vertical="tablet-up"] .slider {
    flex-direction: column;
  }
}

@media screen and (min-width: 990px) {
  :is(slider-component, card-slider, slideshow-component)[vertical="desktop"] .slider {
    flex-direction: column;
  }
}