[data-image-lightbox] {
  cursor: zoom-in;
}

[data-image-lightbox]:focus-visible {
  outline: 3px solid #4f46e5;
  outline-offset: 3px;
}

#image-lightbox-panel {
  position: fixed;
  inset: 0;
  cursor: zoom-out;
}

#image-lightbox el-dialog-backdrop {
  background: rgb(3 7 18 / 72%) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

[data-image-lightbox-viewer] {
  width: auto;
  height: auto;
  max-width: calc(100vw - 3rem);
  max-height: calc(100dvh - 3rem);
  -webkit-mask-image: url("/static/images/soft-edge-mask.png");
  mask-image: url("/static/images/soft-edge-mask.png");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

@media (max-width: 639px) {
  [data-image-lightbox-viewer] {
    max-width: calc(100vw - 1.5rem);
    max-height: calc(100dvh - 1.5rem);
  }
}