a[data-lightbox] img,
img[data-lightbox],
dialog#lightbox-dialog img {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.24);
}
a[data-lightbox] img:hover,
img[data-lightbox]:hover {
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.25),
    0 3px 5px rgba(0, 0, 0, 0.22);
}

@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

dialog#lightbox-dialog {
  border: none;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  padding: 0;

  &::backdrop {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(2px);
  }
  &[open] {
    animation: fadein 0.2s ease-in forwards;
  }

  .lightbox {
    padding: 20px;

    img {
      object-fit: contain;
      max-height: 80vh;
      max-width: 80vw;
    }
    .lightbox-close {
      position: absolute;
      top: -4px;
      right: 0;
      cursor: pointer;
      color: rgba(0, 0, 0, 0.7);
      font-size: 20px;
      border: none;
      background: transparent;
    }
  }
}
