.iv {
  &-container {
    overflow: hidden;
    position: relative;
    user-select: none;
  }

  &-fullscreen {
    position: fixed;
    background: $iv-dark-gray;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: none;
    z-index: 1000;
  }

  &-fullscreen-container {
    position: relative;
    height: 100%;
    width: 100%;
  }

  &-fullscreen-close {
    position: absolute;
    width: $iv-close-icon-size;
    height: $iv-close-icon-size;
    right: calc($iv-boundary-space / 2);
    top: calc($iv-boundary-space / 2);
    padding: calc($iv-boundary-space / 2);
    cursor: pointer;
    text-align: center;
    overflow: hidden;
    text-shadow: $iv-fullscreen-close-text-shadow;
    transition: all ease 200ms;

    &:after,
    &:before {
      content: "";
      height: $iv-fullscreen-close-height;
      width: $iv-close-icon-size;
      background: $iv-white;
      position: absolute;
      top: 50%;
      left: 50%;
    }

    &:before {
      transform: translate(-50%, -50%) rotate(45deg);
    }
    &:after {
      transform: translate(-50%, -50%) rotate(-45deg);
    }
    &:hover {
      transform: rotate(90deg);
      transform-origin: 50% 50%;
    }
  }

  /***** snap view css *****/
  &-snap-view {
    width: $iv-snap-view-width;
    height: $iv-snap-view-height;
    position: absolute;
    top: $iv-boundary-space;
    border: 1px solid $iv-snap-view-border-color;
    background: $iv-black;
    z-index: 100;
    box-sizing: content-box;
    transition: opacity ease 400ms;
    opacity: 0;

    @if ($iv-snap-view-on-left) {
      left: $iv-boundary-space;
    } @else {
      right: $iv-boundary-space;
    }
  }

  &-snap-image-wrap {
    display: inline-block;
    position: absolute;
    max-width: $iv-snap-view-width;
    max-height: $iv-snap-view-height;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
  }

  &-snap-image {
    position: relative;
    touch-action: none;
  }

  &-snap-handle {
    box-sizing: border-box;
    position: absolute;
    border: $iv-zoom-handle-border;
    transform: translate3d(0, 0, 0);
    box-shadow: 0 0 0 200px rgba($iv-black, 0.5);
    cursor: pointer;
    cursor: grab;

    &:active {
      cursor: grabbing;
    }
  }

  /*** zoom actions ***/

  &-zoom-actions {
    width: 100%;
    box-sizing: content-box;
    position: absolute;
    top: 150px;
    left: -1px;
    height: $iv-zoom-slider-height;
    border: $iv-zoom-handle-border;
    border-top: 0;
    background: rgba($iv-black, 0.3);

    &--has-buttons {
      .iv-zoom-slider {
        left: $iv-zoom-button-width;
        right: $iv-zoom-button-width;
      }
    }
  }

  &-zoom-handle {
    width: $iv-zoom-handle-width;
    height: $iv-zoom-handle-height;
    background: $iv-handle-color;
    position: absolute;
    cursor: pointer;
    cursor: grab;

    &:active {
      cursor: grabbing;
    }
  }

  &-zoom-slider {
    box-sizing: inherit;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  &-button-zoom {
    position: absolute;
    top: 0;
    bottom: 0;
    width: $iv-zoom-button-width;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    &:before,
    &:after {
      content: "";
      height: $iv-zoom-button-icon-height;
      width: $iv-zoom-button-icon-width;
      background: $iv-zoom-button-color;
      position: absolute;
    }
    &--in,
    &--out {
      @extend .iv-button-zoom;
    }

    &--in {
      right: 0;
      &:after {
        transform: rotate(90deg);
      }
    }
    &--out {
      left: 0;
    }
  }

  /**** snap view css end *****/
  &-image-mode {
    display: $iv-image-mode-display;
  }

  &-image-view {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
  }

  &-image-wrap {
    display: inline-block;
    &:active {
      cursor: move;
    }
  }

  &-image {
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    touch-action: none;
    transform: translate3d(0, 0, 0);
  }

  &-loader {
    top: 50%;
    left: 50%;
    border-radius: 50%;
    width: $iv-loader-width;
    height: $iv-loader-width;
    z-index: 100;
    margin-top: -16px;
    margin-left: -16px;
    font-size: 5px;
    position: absolute;
    text-indent: -9999em;
    border: $iv-loader-border-color;
    border-left: $iv-loader-active-border-color;
    transform: translateZ(0);
    animation: loading-icon 1.1s infinite linear;
  }

  &-loader:after {
    width: 10em;
    height: 10em;
    border-radius: 50%;
  }

  @-webkit-keyframes loading-icon {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @keyframes loading-icon {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

  @media screen and (max-width: 767px) {
    &-snap-view {
      z-index: -1;
      visibility: hidden;
    }
  }
}