/*--------------------------------------------------------------
# Gallery Dialog
--------------------------------------------------------------*/

#gallery-dialog {
  display: none;
  position: fixed;
  z-index: 3;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(var(--base-950), 0.75);

  &.active {
    display: block;
  }

  & > .wrapper {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  & .swiper {
    width: 100%;
    height: 100%;

    & .swiper-slide {
      display: flex;
      justify-content: center;
      align-items: center;

      & img {
        max-width: calc(100% - 20px);
        max-height: calc(100% - 110px);
        object-fit: contain;
      }

      & .caption {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: rgb(var(--primary-900));
        color: rgb(var(--primary-50));

        & > .wrapper {
          padding: 20px;
          text-align: center;
          font-size: var(--font-sm);
        }
      }
    }

    & .swiper-pagination {
      position: absolute;
      top: 0;
      left: 0;
      padding: 20px;
      color: rgb(var(--primary-50));
    }
  }

  & .close-dialog {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 4;
    margin: 20px;
    cursor: pointer;
    font-size: var(--font-3xl);
    background-color: rgb(var(--base-900));
    color: rgb(var(--base-0));
    padding: 0.5rem;
  }
}

body.gallery-dialog-active {
  overflow: hidden;
}