@import "variables";

.body-overflow {
  overflow: hidden;
}
.image-previewer-box {
  background: #333333;
  position: absolute; top: 0; left: 0;
  visibility: hidden;
  opacity: 0;
  @include transition(opacity .2s ease-in-out 0s);
  .ipb-backdrop {}
  .ipb-image {
    padding: 12px;
    .closer {
      background: $color_gray_40;
      border: none !important;
      position: absolute; top: 12px; right: 12px;
      z-index: 75;
      display: block; width: 24px; height: 24px;
      opacity: 1;
      @include transition();
      &:before, &:after {
        content: '';
        background: $color_white !important;
        position: absolute; top: 50%; left: 50%;
        display: block; width: 80%; height: 2px;
        margin: 0;
        opacity: 1;
      }
      &:before { @include transform(translateX(-50%) translateY(-50%) rotate(45deg)); }
      &:after { @include transform(translateX(-50%) translateY(-50%) rotate(-45deg)); }

      &:hover {
        background: $color_danger;
      }
    }
    img {
      display: block;
    }
  }
  &.in {
    @media (min-width: 768px){
      position: fixed;
      z-index: 9999;
      visibility: visible;
      opacity: 1;
    }
  }
  &.fix {
    visibility: visible;
    opacity: 1;
    .ipb-backdrop {
      background: $color_white;
      position: fixed; top: 0; right: 0; bottom: 0; left: 0;
      z-index: 9998;
      opacity: 0.95;
    }
    .ipb-image {
      position: fixed; top: 0; right: 0; bottom: 0; left: 0;
      z-index: 9999;
      img {
        position: absolute; top: 50%; left: 50%;
        display: block;
        max-width: 96%;
        max-height: 96%;
        @include transform(translateX(-50%) translateY(-50%));
        @include box-shadow(0 0 24px $color_gray_20);
      }
    }
  }
}