// Vars ---------------------------------------------------------------- //
$basicLightbox__background: var(--sl-color-black); // rgba(0, 0, 0, .8) (default)
$basicLightbox__zIndex: 1020; // 1000 (default)
$basicLightbox__duration: 0.1s; // .4s (default)
$basicLightbox__timing: ease; // ease (default)

@import "basiclightbox/src/styles/main";

// Hand cursor on image hover
.lightbox {
  transition: transform 0.2s ease;

  &:hover {
    cursor: zoom-in;
    transform: scale(1.01);
  }
}

// Hide body scrollbar when lightbox is visible
body:has(.basicLightbox--visible) {
  overflow: hidden;
}

// Close button styling for lightbox
.basicLightbox {
  pointer-events: none;
}

.basicLightbox::after {
  content: "";
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2em;
  height: 2em;
  padding: 0.5em;
  background-color: var(--sl-color-gray-6);
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-x"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 60%;
  border-radius: 50%;
  cursor: pointer;
  z-index: 1025;
  pointer-events: auto;
  transition: transform 0.2s ease;
}

.basicLightbox:hover::after {
  transform: scale(1.1);
}

@include color-mode(dark) {
  .basicLightbox {
    pointer-events: none;
  }

  .basicLightbox::after {
    content: "";
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2em;
    height: 2em;
    padding: 0.5em;
    background-color: var(--sl-color-white);
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-x"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 60%;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1025;
    pointer-events: auto;
    transition: transform 0.2s ease;
  }

  .basicLightbox:hover::after {
    transform: scale(1.1);
  }
}