/* ************************************************************************************ */
/* OVERLAY wrapper */

:root {
  --text-color: rgb(64,64,64); /* #152255; */
  --link-color: rgba(121, 18, 106, 1);
  --active-color: rgba(64,64,64,0.65);
  --bg-color: #f5f5f5;
  --fromTop: 1rem;
  --fromSide: 1rem;
  --lightbox-padding: 1.5rem;
}

.vistiLightbox .thumb img:hover {
  cursor: pointer;
}

#overlay {
  position: fixed;
  box-shadow: 1px 1px 16px rgba(0,0,0,0.35);
  z-index: 9000;
  border-radius: 3px;
  padding: 0px; /* 1rem; */
  background: var(--bg-color);
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* border: 2px solid blue; */

  &.shown {
    opacity: 1; /* 0.98; */
    pointer-events: all;
  }

  /* close btn */
  > #closeBtn {
    position: fixed;
    opacity: 0.5;
    transition: all 150ms ease;
    color: black;

    &:hover {
      opacity: 1;
    }
  }
  > #closeBtn:hover {
    cursor: pointer;
  }
  /* navigation buttons */
  > .navigation {
    position: absolute;
    inset: 0;
    /* border: 1px solid red; */
    pointer-events: none;
    z-index: 9200;

    #nextBtn,
    #prevBtn {
      pointer-events: all;
      position: absolute;
      top: 50%;
      /* height: 50vh; */
      padding: 3rem 1rem;
      transform: translate(0, -50%);
      display: flex;
      justify-content: center;
      align-items: center;
      

      svg {
        opacity: 0.5;
        transform: scale(1.0);
        transition: all 100ms ease;
      }

      &.disabled {
        pointer-events: none;
        svg { opacity: 0 !important; }
      }

      &:hover {
        cursor: pointer;

        svg {
          opacity: 1;
          transform: scale(1.1);
        }
      }
    }

    #prevBtn {
      left: 0px;
    }
    #nextBtn {
      right: 0;
    }    
  }

  > #content {
    /* flex: 0 0 100%; /* IMPORTANT! - makes box grow to full width/height */
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory; /* SNAP is important */

    > .lbItemWrapper {
      /* border: 1px solid pink; */
      flex: 0 0 auto;
      width: 100%;
      /* background: linear-gradient(90deg,rgba(255,255,255, 1) 0%, rgba(255, 253, 214, 1) 100%); */
      background-color: var(--bg-color);
      background: url(../images/loader_transparent.gif);
      background-repeat: no-repeat;
      background-position: center;
      background-size: 32px; /* 40px; */

      padding: var(--lightbox-padding) var(--lightbox-padding) calc(var(--lightbox-padding) * 0.75) var(--lightbox-padding);
      scroll-snap-align: center;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      justify-content: center;
      align-items: center;

      .imgWrapper {
        flex: 1 1 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        /* border: 1px solid green; */

        img {
          max-width: 100%;
          max-height: 100%;
          object-fit: contain;
        }

      }


      .caption {
        /* border: 1px solid red; */
        text-align: center;
      }
    }
  }
}

/* **************************************************************************************** */
/* **************************************************************************************** */
/* **************************************************************************************** */
/* **************************************************************************************** */
/* **************************************************************************************** */

@media screen {


  #overlay {
    inset: 0px; /* 1rem; */
    min-width: 100vw; /* calc(100vw - (2*1rem)); */
    min-height: 100vh; /* calc(100vh - (2*1rem)); */

    ::-webkit-scrollbar {
      height: 0px; /* 8px; */
    }

    /* close btn */
    > #closeBtn {
      top: 1rem; /* 1.5rem; /* 2rem; */
      right: 0.75rem; /* 1.0rem; /* 2rem; */
    }
  }

}


/* **************************************************************************************** */
/* **************************************************************************************** */

@media screen and (min-width: 800px) {


  #overlay {
    inset: 1rem;
    min-width: calc(100vw - (2*1rem));
    min-height: calc(100vh - (2*1rem));

    ::-webkit-scrollbar {
      height: 10px; /* 12px; */
    }

    /* close btn */
    > #closeBtn {
      top: 1.5rem; /* 2rem; */
      right: 1.0rem; /* 2rem; */
    }    
  }

}