#MediaViewer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  z-index: var(--z-media-viewer);

  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto 1fr;
  grid-column-gap: 0;
  grid-row-gap: 0;
  justify-items: stretch;
  align-items: center;

  @media (max-width: 600px) {
    background: rgba(0, 0, 0, 1);
  }

  // Potential perf improvement
  &:not(.shown) {
    display: block !important;
    transform: scale(0);
  }

  body.ghost-animating & {
    > .pan-wrapper,
    > button,
    .MediaViewerContent img,
    .MediaViewerContent .VideoPlayer {
      display: none;
    }
  }

  body:not(.no-media-viewer-animations) & {
    transition-duration: 0.3s !important;
  }

  &:not(.open),
  .closing {
    .SenderInfo {
      pointer-events: none;
      transition: none;
    }
  }

  &.zoomed {
    .navigation {
      display: none;
    }

    .media-viewer-head {
      z-index: 2;
    }

    .MediaViewerSlide {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      padding: 0;
      z-index: 1;
    }
  }

  .media-viewer-head {
    display: flex;
    grid-area: 1 / 1 / 2 / -2;
    position: relative;
    z-index: var(--z-media-viewer-head);
    min-width: 0;
    background: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0) 100%);
    padding: 0.5rem max(1.25rem, env(safe-area-inset-left));

    & > .Transition {
      width: 100%;
      min-width: 0;
    }

    @media (max-width: 600px) {
      padding: 0.5rem max(0.5rem, env(safe-area-inset-left));

      .media-viewer-close {
        margin-right: 1.5rem;
      }
    }

    body.is-electron.is-macos & {
      -webkit-app-region: drag;
    }

    body.is-electron.is-macos #Main:not(.is-fullscreen) & {
      padding-left: 5rem;
    }
  }

  & > .Transition,
  & > .pan-wrapper {
    grid-area: 1 / 1 / -1 / -1;
  }

  & > .Transition,
  & > .pan-wrapper .Transition {
    position: relative;
    justify-self: center;
    text-align: center;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
  }

  .navigation {
    position: fixed;
    top: 4rem;
    width: 10vw;
    bottom: 0;
    border: none;
    padding: 0;
    margin: 0;
    appearance: none;
    background: transparent no-repeat;
    background-size: 1.25rem;
    opacity: 0;
    transition: opacity 0.15s;
    outline: none;
    cursor: var(--custom-cursor, pointer);
    z-index: 1;

    @media (max-width: 600px) {
      width: 20vw;
    }

    &:hover,
    .is-touch-env & {
      opacity: 1;
    }

    &.prev {
      background-image: url("../../assets/media_navigation_previous.svg");
      background-position: 1.25rem calc(50% - 2rem);

      left: env(safe-area-inset-left);

      &[dir="rtl"] {
        left: auto;
        right: env(safe-area-inset-right);
        transform: scaleX(-1);
      }
    }

    &.next {
      right: env(safe-area-inset-right);
      background-image: url("../../assets/media_navigation_next.svg");
      background-position: calc(100% - 1.25rem) calc(50% - 2rem);

      &[dir="rtl"] {
        right: auto;
        left: env(safe-area-inset-left);
        transform: scaleX(-1);
      }
    }

    &.inline {
      top: calc(50% - 3rem);
      bottom: unset;
      height: 6rem;
      background-position-y: center;

      @media (max-width: 600px) {
        opacity: 0;
        transition: opacity 0.15s ease-in;
        pointer-events: none;

        .video-controls-visible & {
          opacity: 1;
          pointer-events: auto;
        }
      }
    }
  }

  .is-protected {
    user-select: none;
    -webkit-touch-callout: none;
    pointer-events: none;
  }
}

.ghost {
  position: absolute;
  z-index: var(--z-media-viewer);
  will-change: transform, opacity;
  overflow: hidden;
  border-radius: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;

  &.transition-circle {
    transition: transform 0.2s ease, opacity 0.2s ease, border-radius 0.2s ease;
  }

  &.rounded-corners {
    border-radius: var(--border-radius-messages);
  }

  &.circle {
    border-radius: 50%;
  }

  body.is-ios & {
    transition: transform 0.2s ease, opacity 0.2s ease, border-radius 0.2s ease !important;
  }

  img,
  video {
    width: 100%;
    height: 100%;
    user-select: none;
    -webkit-user-select: none;
    object-fit: cover;
  }
}