.tos-gallery-carousel {
  --tos-carousel-control-size: 38px;
  --tos-carousel-ink: var(--wp--preset--color--custom-accent-1, #191919);
  --tos-carousel-paper: var(--wp--preset--color--base, #fff);
  --tos-carousel-backdrop: rgb(0 0 0 / 55%);
  --tos-carousel-outer-radius: calc(var(--tos-carousel-radius) * 2);
  --tos-carousel-closeoffset: var(--tos-carousel-padding);
  color: var(--tos-carousel-ink);
  direction: ltr;
  z-index: 10001;

  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  box-shadow:
    0.75rem 0.75rem 1rem var(--tos-carousel-backdrop),
    0 0 0 100vmax var(--tos-carousel-backdrop);

  box-sizing: border-box;
  width: var(--tos-carousel-width);
  height: var(--tos-carousel-height);

  max-width: calc(100vw - var(--tos-carousel-inset) * 2);
  max-height: calc(100dvh - var(--tos-carousel-inset) * 2);

  padding: 0;
  border: 0;
  overflow: hidden;
  border-radius: var(--tos-carousel-outer-radius);
}

/* Carousel content */

.tos-gallery-carousel .wc-block-product-gallery-dialog__content {
  flex-direction: row;
  gap: 0;
  padding: 0;
  height: calc(100dvh - 128px);

  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;

  scroll-snap-type: x mandatory;
  scroll-behavior: auto;
  scrollbar-width: none;
}

.admin-bar .tos-gallery-carousel .wc-block-product-gallery-dialog__content {
  height: calc(100dvh - 160px);
}

.tos-gallery-carousel .wc-block-product-gallery-dialog__content::-webkit-scrollbar {
  display: none;
}

/* Slides */

.tos-gallery-carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  scroll-snap-align: center;
  scroll-snap-stop: always;

  box-sizing: border-box;
  padding: var(--tos-carousel-padding) var(--tos-carousel-padding) 0 var(--tos-carousel-padding);
}

.tos-gallery-carousel .wc-block-product-gallery-dialog__content .tos-gallery-carousel__slide > img,
.tos-gallery-carousel .wc-block-product-gallery-dialog__content .tos-gallery-carousel__slide > video {
  width: 100%;
  height: 100%;
  max-width: 1600px;
  object-fit: cover;
  margin: 0;
  border-radius: var(--tos-carousel-radius);
}

/* Navigation controls */

.tos-gallery-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 8px 16px;
}

.tos-gallery-carousel__arrow,
.tos-gallery-carousel__dot {
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.tos-gallery-carousel__arrow {
  width: var(--tos-carousel-control-size);
  height: var(--tos-carousel-control-size);
  display: grid;
  place-items: center;
  background-color: color-mix(in srgb, currentColor 10%, transparent);
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

.tos-gallery-carousel__arrow:hover {
  background-color: color-mix(in srgb, currentColor 25%, transparent);
}

.tos-gallery-carousel__arrow--next {
  order: 2;
}

/* Pagination dots */

.tos-gallery-carousel__dots {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  max-width: min(60vw, 420px);
  overflow: auto;
}

.tos-gallery-carousel__dot {
  width: 1.25rem;
  height: 3.25rem;
  display: grid;
  place-items: center;
}

.tos-gallery-carousel__dot::before {
  content: '';
  width: 6px;
  height: 6px;
  border: 1px solid currentColor;
  border-radius: 50%;
  transition: background-color 150ms;
}

.tos-gallery-carousel__dot[aria-current='true']::before {
  background: currentColor;
}

/* Accessibility and visibility */

.tos-gallery-carousel button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.tos-gallery-carousel [hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .tos-gallery-carousel__dot::before {
    transition: none;
  }
}

/* Dialog */

dialog.tos-gallery-carousel::backdrop {
  background-color: var(--tos-carousel-backdrop);
}

dialog.tos-gallery-carousel[open] {
  display: flex;
  flex-direction: column;
}

dialog.tos-gallery-carousel .wc-block-product-gallery-dialog__content {
  box-sizing: border-box;
  flex: 1 1 auto;
  width: 100%;
  height: auto;
  min-height: 0;
}

dialog.tos-gallery-carousel .tos-gallery-carousel__controls {
  flex: 0 0 auto;
}

/* Dialog header and close button */

.wc-block-product-gallery-dialog__header {
  height: 0;
  padding: 0;
}

.wc-block-product-gallery-dialog__close-button {
  position: absolute;
  display: flex;
  background-color: var(--wp--preset--color--custom-base);
  border-radius: 100px;

  right: var(--tos-carousel-closeoffset);
  top: var(--tos-carousel-closeoffset);
  transform: translate(50%, -50%);

  box-shadow: 0.25rem 0.25rem 0.5rem var(--tos-carousel-backdrop);
}

/* Responsive spacing */

.tos-gallery-carousel {
  --tos-carousel-control-size: 28px;
  --tos-carousel-padding: 0.625rem;
  --tos-carousel-inset: 0.625rem;
  --tos-carousel-radius: 0.375rem;
  --tos-carousel-closeoffset: 2rem;
  --tos-carousel-width: calc(100vw - var(--tos-carousel-inset) * 2);
  --tos-carousel-height: calc(100vw - var(--tos-carousel-inset) * 2);
}

@media (min-width: 768px) {
  .tos-gallery-carousel {
    --tos-carousel-control-size: 32px;

    --tos-carousel-padding: 1rem;
    --tos-carousel-inset: 1rem;
    --tos-carousel-radius: 0.375rem;
    --tos-carousel-outer-radius: calc(var(--tos-carousel-radius) * 1.875);
    --tos-carousel-closeoffset: calc(var(--tos-carousel-padding) * 2.5);
    --tos-carousel-width: 600px;
    --tos-carousel-height: 600px;
  }
}

@media (min-width: 1024px) {
  .tos-gallery-carousel {
    --tos-carousel-padding: 1.25rem;
    --tos-carousel-inset: 1.5rem;
    --tos-carousel-radius: 0.5rem;
    --tos-carousel-closeoffset: calc(var(--tos-carousel-padding) * 2.25);
  }
}
@media (min-width: 1200px) {
  .tos-gallery-carousel {
    --tos-carousel-padding: 1.5rem;
    --tos-carousel-inset: 2rem;
    --tos-carousel-closeoffset: calc(var(--tos-carousel-padding) * 2.125);
  }
}