.bbd-media-gallery__viewer-tools {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--spacing);
  padding-block: var(--spacing);
}

.bbd-media-gallery__viewer-slide {
  .global-media-settings {
    border: none;
  }
}

.bbd-media-gallery__viewer-pagination {
  display: flex;
  justify-content: center;
  width: auto;
}

.bbd-media-gallery__button {
  --icon-rotate: rotate(-90deg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: calc(2.5 * var(--spacing));
  aspect-ratio: 1;
  color: rgba(var(--color-foreground), 0.75);
  background: transparent;
  border: none;

  .icon {
    height: 0.6rem;
    transform: var(--icon-rotate);
  }

  &[disabled] {
    cursor: not-allowed;

    .icon {
      color: rgba(var(--color-foreground), 0.3);
    }
  }

  &:not([disabled]):hover,
  &:not([disabled]):focus-visible {
    color: rgb(var(--color-foreground));
  }

  &.bbd-media-gallery__button--prev {
    --icon-rotate: rotate(90deg);
  }
}

.bbd-media-gallery__thumbnails {
  display: flex;
}

.bbd-media-gallery__thumbnails-wrapper {
  --slide-count: 3;
  display: flex;
  grid-template-columns: repeat(var(--slide-count), 1fr);
  box-sizing: border-box;
}

.bbd-media-gallery__thumbnails-slide {
  width: calc((100% / var(--slide-count)) - (((0.5 * var(--spacing)) * (var(--slide-count) - 1)) / var(--slide-count)));
  margin-right: calc(0.5 * var(--spacing));
  aspect-ratio: 1;

  img {
    pointer-events: auto;
  }

  &[aria-current] {
    box-shadow: none;
    border-color: transparent;
  }

  &.swiper-slide-thumb-active {
    border-color: rgb(var(--color-foreground));
  }
}

@media screen and (max-width: 750px) {
  /* Columns layout */
  .bbd-media-gallery[data-mobile-layout='columns'] {
    .bbd-media-gallery__viewer-tools {
      display: flex;
    }

    .bbd-media-gallery__viewer-slide {
      width: calc((100% / 2) - (0.25 * var(--spacing)));
      margin-inline-end: calc(0.5 * var(--spacing));
    }
  }

  .bbd-media-gallery[data-mobile-layout='hide'] {
    .bbd-media-gallery__viewer-tools {
      display: flex;
    }
  }
}

@media screen and (min-width: 750px) {
  /* Columns layout */
  .bbd-media-gallery[data-desktop-layout='columns'] {
    .bbd-media-gallery__viewer-wrapper {
      flex-wrap: wrap;
      gap: var(--spacing);
    }

    .bbd-media-gallery__viewer-slide {
      width: calc((100% / 2) - (0.5 * var(--spacing)));
    }

    .bbd-media-gallery__thumbnails {
      display: none;
    }
  }

  /* Stacked layout */
  .bbd-media-gallery[data-desktop-layout='stacked'] {
    .bbd-media-gallery__viewer-wrapper {
      flex-wrap: wrap;
      gap: var(--spacing);
    }

    .bbd-media-gallery__viewer-slide {
      width: calc((100% / 2) - (0.5 * var(--spacing)));

      &:first-child {
        width: 100%;
      }
    }

    .bbd-media-gallery__thumbnails {
      display: none;
    }
  }

  /* Thumbnail layout */
  .bbd-media-gallery[data-desktop-layout='thumbnail'] {
    .bbd-media-gallery__thumbnails {
      margin-block-start: var(--spacing);

      .bbd-media-gallery__button {
        display: none;
      }
    }

    .bbd-media-gallery__thumbnails-wrapper {
      flex-wrap: wrap;
      gap: calc(0.5 * var(--spacing));
    }

    .bbd-media-gallery__thumbnails-slide {
      margin-right: 0;
    }
  }
}

@media screen and (min-width: 990px) {
  .bbd-media-gallery__thumbnails-wrapper {
    --slide-count: 5;
  }
}