@use '../../style/mixins' as *;

#image-viewer {
  @include center-children();
  @include blurred-background();

  visibility: hidden;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;

  img {
    @include square(auto);

    @include on-large-screen {
      max-width: 80vw;
      max-height: 80vh;
    }

    @include on-small-screen {
      max-width: 95vw;
      max-height: 80vh;
    }
  }

  #cancel {
    @include image-button(var(--large-icon-size));
    @include square(calc(var(--large-icon-size) + var(--normal-margin) * 2));
    position: absolute;
    right: 0;
    top: 0;

    svg {
      stroke: var(--normal-text-color);
    }
  }
}