@import "work/work-includes";

image-slide-viewer {
  position: absolute;
  top: 0;
  height: 100vh;
  margin-top: 100px;
  padding-bottom: 100px;
  box-sizing: border-box;

  main {
    width : 100vw;

    .meta {
      text-align: center;
      margin-bottom: 20px;
    }

    .content {
      align-items: stretch;
      min-height: 1px;

      .previous, .next {
        flex-basis: 75px;

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

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

      .image-container {
        position: relative;
        text-align: center;

        &.small, &.fit {
          .preview {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateY(-50%) translateX(-50%);
            max-width: 100%;
            max-height: 100%;

            &.file {
              background-color: $gray;
              height: 200px;
              width: 400px;
              min-width: 100px;
              min-height: 50px;

              img {
                max-height: 100px;
                max-width: 100px;
                position: inherit;
                top: inherit;
                left: inherit;
                transform: inherit;
              }
            }
          }
        }

        &.fit {
          img {
            cursor: zoom-in;
          }
        }

        &.full {
          overflow: scroll;
          text-align: center;

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

    .thumbnails {
      flex-basis: 110px;
      flex-shrink: 0;
      text-align: center;
      width: 100vw;
      padding: 25px;
      overflow: auto;
      white-space: nowrap;

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

        &.elevated {
          opacity: 0.4;
        }
      }

      button {
        img, a {
          width  : 60px;
          height : 50px;
          display: block;
        }
        .preview-container {
          background-color: $gray;
        }
      }
    }
  }
}