@layer components {
  [data-coco][data-component="modal-lightbox"] {
    @apply relative;
    width: fit-content;

    .modal-lightbox-close {
      @apply flex-none p-2 absolute -right-1.5 -top-1.5 sm:-right-4 sm:-top-4 rounded-full transition-all z-20;
      @apply bg-background-dark-1 text-content-light-1;
      @apply focus:ring-0 focus:outline-none text-content-light-1 shadow-md;
    }

    .modal-lightbox-content {
      @apply rounded-xl overflow-hidden min-w-[100px] min-h-[100px] relative;
      width: fit-content;
    }

    .modal-lightbox-loader {
      @apply flex items-center justify-center absolute inset-0 opacity-70 bg-black/60 text-white;
    }

    .modal-lightbox-media {
      @apply relative z-10;

      img {
        width: 100%;
      }
    }

    &.loaded {
      .modal-lightbox-content {
        @apply shadow-2xl;
      }
    }
  }
}