:where([data-controller~="photoswipe"], .pswp) {
  --photoswipe-bg-opacity: 90%;

  --photoswipe-show-animation-duration: 220ms;
  --photoswipe-hide-animation-duration: calc(var(--photoswipe-show-animation-duration) / 2);
  --photoswipe-transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  --photoswipe-icon-size: 32px;
  --photoswipe-icon-stroke-width: 1px;
  --photoswipe-arrow-hit-width: calc(var(--photoswipe-icon-size) + 16px);
  --photoswipe-arrow-hit-height: calc(var(--photoswipe-icon-size) + 32px);
}

.pswp {
  --pswp-bg: var(--color--bg-max);
  --pswp-placeholder-bg: var(--color--bg-2);
  --pswp-icon-color: var(--color--aa-text);
  --pswp-icon-color-secondary: var(--color--border-mid-contrast);
  --pswp-icon-stroke-width: var(--photoswipe-icon-stroke-width);
}

.pswp .pswp__hide-on-close {
  transition:
    opacity var(--pswp-transition-duration)
    var(--photoswipe-transition-timing-function);
}

.pswp__bg {
  background: color-mix(in srgb, var(--pswp-bg) var(--photoswipe-bg-opacity), transparent);
}

.pswp__button--arrow {
  width: var(--photoswipe-arrow-hit-width);
  height: var(--photoswipe-arrow-hit-height);
  margin-top: calc(var(--photoswipe-arrow-hit-height) / -2);
}

.pswp__button--arrow .pswp__icn {
  width: var(--photoswipe-icon-size);
  height: var(--photoswipe-icon-size);
  margin-top: calc(var(--photoswipe-icon-size) / -2);
  color: var(--color--aa-text);
}

.pswp__top-bar {
  inset: 0;
  width: auto;
  height: auto;
}

.pswp__button--close,
.pswp__button--zoom {
  display: none !important;
}

.pswp__counter {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  height: auto;
  margin: 0;
  font-size: var(--font-size--small);
  line-height: 1;
  text-shadow: none;
}