.bbd-product-media-carousel {
  position: relative;
  display: block;
  height: 100%;
}

/* Slides */
.bbd-product-media-carousel__slides {
  position: relative;
  display: flex;
  height: 100%;

  .product-media-container {
    position: absolute;
    inset: 0;
    transition: opacity var(--animation-speed-slow) ease-in-out;
    background-color: unset;

    &[aria-hidden='true'] {
      opacity: 0;
      pointer-events: none;
    }
  }

  .product-media {
    img {
      object-fit: contain;
    }
  }
}

/* Thumbnails */
.bbd-carousel-thumbnail {
  --indicator-position-from-start: calc(var(--total-slides) - var(--active-thumbnail));
  position: relative;

  &:last-child::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: calc(
      50% - (100% * var(--indicator-position-from-start)) - (var(--slide-gap) * (var(--indicator-position-from-start)))
    );
    transform: translateX(-50%);
    width: 12px;
    height: 2px;
    background-color: var(--color-black);
    pointer-events: none;
    opacity: var(--indicator-opacity);
    transition: all var(--animation-speed-slow) ease-in-out;
  }
}

.bbd-carousel-thumbnail__button {
  --positions-from-start: calc(var(--total-slides) - var(--slide-index));
  position: relative;
  left: calc((100% * var(--positions-from-start)) + (var(--slide-gap) * (var(--positions-from-start))));
  transition: left 0.7s cubic-bezier(0.1, 0.6, 0.45, 1);
}

.bbd-product-media-carousel__thumbnails {
  --indicator-opacity: 0;
  --active-thumbnail: var(--total-slides);
  --slide-gap: var(--gap-2xs);
  position: absolute;
  right: var(--margin-lg);
  bottom: var(--margin-lg);
  display: flex;
  gap: var(--slide-gap);
  padding-inline-start: var(--margin-lg);

  &.open {
    --indicator-opacity: 1;

    .bbd-carousel-thumbnail__button {
      left: 0;
    }
  }

  @media screen and (min-width: 750px) {
    --slide-gap: var(--gap-xs);
    right: var(--margin-2xl);
    bottom: var(--margin-2xl);
    padding-inline-start: var(--margin-2xl);
  }
}

/* Controls */
.bbd-product-media-carousel__controls {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transform: translateY(-50%);
  padding-inline: var(--padding-xs);
  pointer-events: none;

  .slideshow-control {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    color: var(--color-caption);
    transition: all var(--animation-speed) ease-in-out;
    height: var(--minimum-touch-target);
    width: var(--minimum-touch-target);
    pointer-events: auto;

    &:hover {
      background-color: var(--color-card-hover-background);
      color: var(--color-primary-button-hover-text);
    }

    &:focus-visible,
    .bbd-product-media-carousel:hover &,
    .bbd-product-media-carousel__controls.open & {
      opacity: 1;
    }
  }
}