@keyframes slideright {
  from {
    position: absolute;
    right: 100%;
  }
  to {
    position: absolute;
    right: 50%;
  }
}

@keyframes slideleft {
  from {
    position: absolute;
    left: 100%;
  }
  to {
    position: absolute;
    left: 50%;
  }
}

img[ui-lightbox] {
  cursor: pointer;
  transition: 0.3s;
  &:hover {
    opacity: 0.7;
  }
}

.ui-lightbox {
  display: grid;
  justify-content: center;
  grid-template-areas:
    "header"
    "content"
    "footer";
  grid-template-rows: 50px auto 70px;
  width: 100vw;
  height: 100vh;
  justify-items: center;
  align-items: center;

  & &__content {
    grid-area: content;
    > div.img-content {
      z-index: -1;
      > div.img {
        background-color: rgba($white, 0.5);
        display: grid;
        align-items: center;
        justify-content: center;
        > img {
          max-width: 85vw;
          max-height: 85vh;
          cursor: pointer;
          &.slide-right {
            animation: slideright 0.25s linear;
          }
          &.slide-left {
            animation: slideleft 0.25s linear;
          }
        }
      }
    }

    > .previous-picture {
      position: absolute;
      top: 50%;
      left: 5%;
    }

    > .next-picture {
      position: absolute;
      top: 50%;
      right: 5%;
    }

    > div.caption {
      margin: auto;
      display: block;
      width: 80%;
      text-align: center;
      color: white;
      padding: 10px 0;
      height: 150px;
    }

    > div.img-content,
    > div.caption {
      animation-name: zoom;
      animation-duration: 0.6s;
    }

    @keyframes zoom {
      from {
        transform: scale(0.1);
      }
      to {
        transform: scale(1);
      }
    }
  }

  & &__header {
    grid-area: header;

    &__file-name {
      display: flex;
      justify-content: center;
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      color: #ffffff;
      padding: 20px 0px;
    }

    &__close {
      position: absolute;
      top: 5px;
      right: 5px;
    }

    &__edit {
      position: absolute;
      top: 5px;
      right: 55px;
    }
  }

  & &__header:hover,
  & &__header:focus {
    cursor: pointer;
  }

  & &__footer {
    grid-area: footer;
    cursor: pointer;
  }

  @media only screen and (max-width: $breakpoints-lg) {
    .div.img-content img {
      max-width: 500px;
    }
  }

  @media only screen and (max-width: $breakpoints-md) {
    .div.img-content img {
      max-width: 350px;
    }
  }
}
