@use "../mixin";

.ImageViewer {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;

  position: fixed;
  left: 0;
  top: 0;

  height: 100%;
  width: 100%;

  background-color: #ffffffb9;
  backdrop-filter: blur(20px);

  opacity: 0;
  transition: var(--md-sys-motion-spring-slow-effect-duration) var(--md-sys-motion-spring-slow-effect);
  user-select: none;
  -moz-user-select: none;
  z-index: 9999;

  .nav-group {
    position: absolute;
    bottom: 0px;

    margin-block-end: 12px;

    z-index: 3;
  }

  .close {
    position: absolute;
    right: 0px;
    top: 0px;

    margin-inline-end: 12px;
    margin-block-start: 12px;

    z-index: 3;
  }

  .content {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: center;

    width: 100%;

    padding-block-start: 5vh;

    z-index: 2;

    .content-image {
      background-color: var(--md-sys-color-surface-variant);

      clip-path: circle(10%);
      object-fit: contain;
      transition: var(--md-sys-motion-spring-slow-spatial-duration) var(--md-sys-motion-spring-slow-spatial);

      &.transitioning {
        opacity: 0.6;
      }

      &.notransition {
        transition: none !important;
      }
    }
  }

  // 入场结束
  &.animating {
    opacity: 1;

    .content-image {
      clip-path: circle(100%);
    }
  }

  @media (prefers-color-scheme: dark) {
    background-color: #000000b9;
  }
}

@media screen and (max-width: 1600px) {
}

@media screen and (max-width: 1200px) {
}

@media screen and (max-width: 840px) {
}

@media screen and (max-width: 600px) {
}
