@import "work/work-includes";

.ImageViewer {

  main {
    width : 100vw;
    height: 100vh;
    padding: 20px;
    padding-top: 10px;

    .content {
      overflow: hidden;
      text-align: center;
      width: 100%;

      .slideshow {
        width: 100%;
        .icon.arrow {
          width: 33px;
          height: 74px;
        }

        .preview {
          overflow: hidden;
          text-align: center;
          padding: 20px 0;

          .previous, .next {
            min-width: 50px;

            .arrow-previous, .arrow-next {
              margin: auto
            }

            .arrow-next {
              margin: auto
            }
          }

          .image {
            width: 100%;
            max-width: 1000px;
            margin-right: 80px;
            margin-left: 80px;

            .img-container {
              width: 100%;
              height: 100%;
              max-height: 800px;
              max-width: 1000px;

              .bg-image {
                margin-top: 40px;
                background-size: contain;
                background-repeat: no-repeat;
                width: 100%;

                &.zoomed {
                  overflow: auto;

                  img {
                    &:hover {
                      cursor: zoom-out;
                    }
                  }
                }

                &:hover {
                  cursor: zoom-in;
                }
              }
            }
          }
        }

        .thumbnails {
          text-align: center;
          max-width: 100vw;
          padding: 20px;
          min-height: 100px;
          overflow: auto;
          white-space: nowrap;

          > * {
            display: inline-block;
            margin: 10px;
            position: relative;

            &.elevated {
              opacity: 0.4;
            }
          }

          button {
            img {
              width  : 60px;
              height : 50px;
              display: block;
            }
          }
        }
      }
    }
  }
}