.has-lightbox {
  cursor: zoom-in;
}

.lightbox-component {
  display: none;
  position: fixed;
  width: 100vw;
  height: 100vh;
  width: 100lvw;
  height: 100lvh;
  top: 0;
  left: 0;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.75);
  padding: 50px;
  position: fixed;
  z-index: 10000000;

  @media screen and (max-width: 749px) {
    padding: 25px;
  }

  &:has(.zoomed-in):not(:has(.zoom-disabled)) {
    padding: 0;
  }

  .swiper-wrapper .swiper-slide {
    opacity: 0;
    transition: all 0.3s;
    background-color: white;
    max-height: 90vh;
    &:has(.zoomed-in) {
      max-height: 100%;
    }

    &.swiper-slide-active {
      opacity: 1;
    }
    &.lightbox-video_internal,
    &.lightbox-video_external {
      .image-container {
        img {
          object-fit: cover;
        }
      }
    }
    .image-container {
      height: 100%;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      &:has(.zoomed-in) {
        align-items: unset;
      }
      img {
        max-width: 100%;

        width: auto;
        height: auto;
        object-fit: contain;
        transition: scale 0.3s ease-in-out;
        max-height: 90vh;

        &:hover {
          cursor: zoom-in;
        }

        &.zoomed-in {
          scale: 2;
          cursor: zoom-out;
          max-height: 100%;
        }
      }
      .placeholder-svg {
        height: 100%;
        width: 100%;
      }
    }
  }

  .swiper-button {
    &:hover {
      cursor: pointer;
    }
    &.swiper-button-prev {
      left: 75px;
      @media screen and (max-width: 749px) {
        left: 50px;
      }
    }
    &.swiper-button-next {
      right: 75px;
      @media screen and (max-width: 749px) {
        right: 50px;
      }
    }
    &:after {
      display: none;
    }
    svg {
      fill: black;
      transition: fill 0.3s ease-in-out;
      &:hover {
        fill: #303947;
      }
      &:focus {
        outline: black solid 1px;
        outline-offset: 2px;
      }
    }
  }

  .lightbox-close {
    position: absolute;
    top: 75px;
    right: 75px;
    width: 15px;
    height: 15px;
    z-index: 1;
    background-color: white;
    box-shadow: none;
    transition: opacity 0.3s;
    box-sizing: content-box;

    @media screen and (max-width: 749px) {
      top: 50px;
      right: 50px;
    }
    &:hover {
      cursor: pointer;
      svg {
        color: #303947;
      }
    }

    &:focus {
      svg {
        outline: black solid 1px;
        outline-offset: 2px;
      }
    }

    svg {
      display: block;
      position: absolute;
      width: 15px;
      height: 15px;
      color: black;
    }
  }
}