

:global {
  .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;
              }
            }
          }
        }
      }
    }
  }
  
}
  