.image-viewer-container {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  visibility: hidden;
  z-index: $z-index-8;
  padding: 6%;
  box-sizing: border-box;
  transition-t("visibility, background", "0, 0", "0.3, 0.3", "ease, ease");

  &.active {
    background: rgba(0, 0, 0, 0.5);
    visibility: visible;

    img {
      cursor: zoom-out;
      transform: scale(1);
      padding: 2px;
      background: var(--background-color);
    }
  }

  img {
    max-width: 100%;
    max-height: 100%;
    transform: scale(0);
    transition-t("transform", "0", "0.3", "ease");
  }
}