.lightbox-gallery {
  @apply grid sm:grid-cols-2 lg:grid-cols-3 gap-6;
  img {
    @apply h-full w-full object-cover max-h-80 rounded-lg;
  }
  &__picture {
    @apply pointer-events-none;
  }
  &__trigger {
    @apply block relative;
    cursor: zoom-in;
    /* content: url('../resources/img/graphic-assets/icone-external-link-purple.svg'); */

    &:after {
      transition: all 0.3s ease;
      content: '';
      @apply bg-contain bg-center w-16 h-16 top-1/2 right-1/2 absolute z-40 content-[''];
      @apply opacity-0;
      transform: translateY(10px);
      translate: 50% -50%;
      background-image: url('../resources/img/graphic-assets/icone-focus-galerie.svg');
    }

    &:hover:after {
      transform: translateY(0px);
      @apply opacity-100;
    }
  }
}

.lightbox {
  @apply fixed inset-0 w-full h-full z-40 bg-opacity-75 flex items-start justify-center;
  /* backdrop-filter: blur(10px) lightness(20%); */
  backdrop-filter: brightness(50%) blur(1px);
  overflow-y: auto;
  animation: lightboxIn 0.5s;
  transition: opacity 0.3s;

  &.fade-out {
    opacity: 0;
  }

  &--inactive {
    @apply hidden;
  }

  &__prev,
  &__next {
    @apply absolute top-1/2 transform -translate-y-1/2 z-50;
    transition: all 0.3s;
    &:hover {
      @apply scale-110;
    }
  }

  &__prev {
    @apply left-8;
    img {
      @apply rotate-180;
    }
  }

  &__next {
    @apply right-8;
  }

  &__close {
    @apply absolute flex items-center top-0 right-0 m-4 text-neutral-900 text-base font-bold;
    &:after {
      @apply w-4 h-4 ml-4;
      content: '';
      display: inline-block;
      background-image: url('../resources/img/graphic-assets/cross-close.svg');
      background-size: contain;
      background-repeat: no-repeat;
    }
  }
  &__container {
    @apply relative flex justify-center items-center bg-white rounded-xl;
    width: 90%;
    height: fit-content;
    min-height: 90vh;
    @apply my-4 mx-auto;
  }
  &__current-picture {
    img {
      @apply h-full w-full max-w-xl rounded-lg;

      max-height: 60vh;
    }
  }
  &__current-picture-description {
    @apply text-center text-neutral-800 pt-2;
  }
}

@keyframes lightboxIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
