// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC

@use "refactor/common-refactor.scss" as deprecated;

.viewer-layout {
  height: 100vh;
  display: grid;
  grid-template-rows: deprecated.$s-48 auto;
  grid-template-columns: 1fr;
  user-select: none;
}

.viewer-content {
  overflow: hidden;
  grid-row: 2 / span 1;
  display: grid;
  grid-template-rows: deprecated.$s-252 auto;
  grid-template-columns: 1fr;
  background-color: var(--viewer-background-color);
}

.empty-state {
  @include deprecated.body-small-typography;

  color: var(--empty-message-foreground-color);
  display: grid;
  place-items: center;
  height: 100%;
  width: 100%;
}

.viewer-header {
  grid-row: 1 / span 1;
}

.inspect-layout {
  display: grid;
  grid-template-rows: deprecated.$s-48 auto;
  grid-template-columns: 1fr;
  height: 100vh;
  margin-top: 0;
  user-select: none;
}

.thumbnails-close {
  @include deprecated.button-style;

  grid-row: 1 / span 2;
  grid-column: 1 / span 1;
  z-index: deprecated.$z-index-10;
  background-color: var(--overlay-color);
}

.thumbnails-close.invisible {
  display: none;
}

.viewer-section {
  @extend %new-scrollbar;

  grid-row: 1 / span 2;
  grid-column: 1 / span 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  height: calc(100vh - deprecated.$s-48);
  overflow: auto;
}

.inspect-layout .viewer-section {
  flex-wrap: nowrap;
  margin-top: 0;
  height: 100%;
  overflow: hidden;
}

.viewer-go-prev,
.viewer-go-next {
  @extend %button-secondary;
  @include deprecated.flex-center;

  position: absolute;
  right: deprecated.$s-8;
  height: deprecated.$s-64;
  width: deprecated.$s-32;
  top: calc(50vh - deprecated.$s-32);
  z-index: deprecated.$z-index-2;
  background-color: var(--viewer-controls-background-color);
  transition: transform 400ms ease 300ms;

  svg {
    @extend %button-icon;

    stroke: var(--icon-foreground);
  }
}

.viewer-go-next.comment-sidebar {
  right: deprecated.$s-280;
}

.viewer-go-prev {
  left: deprecated.$s-8;
  right: unset;

  svg {
    transform: rotate(180deg);
  }
}

.viewer-bottom {
  position: fixed;
  bottom: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  height: deprecated.$s-40;
  padding-right: 0 deprecated.$s-8 deprecated.$s-40 deprecated.$s-8;
  transition: transform 400ms ease 300ms;
  z-index: deprecated.$z-index-2;
  pointer-events: none;
}

.reset-button {
  @extend %button-secondary;
  @include deprecated.flex-center;

  height: deprecated.$s-32;
  width: deprecated.$s-28;
  margin-left: deprecated.$s-8;
  background-color: var(--viewer-controls-background-color);
  pointer-events: all;

  svg {
    @extend %button-icon;

    stroke: var(--icon-foreground);
  }
}

.counter {
  @include deprecated.flex-center;
  @include deprecated.body-small-typography;

  border-radius: deprecated.$br-8;
  width: deprecated.$s-64;
  height: deprecated.$s-32;
  color: var(--viewer-thumbnails-control-foreground-color);
  background-color: var(--viewer-controls-background-color);
}

.viewer-wrapper {
  position: relative;
  margin: 0 auto;
}

.viewer-clipper {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  place-items: center center;
  overflow: hidden;
}

.viewer-overlay-background {
  position: absolute;
  top: 0;
  left: 0;

  &.visible {
    background-color: rgb(0 0 0 / 0.2);
  }
}

.viewer-overlay {
  position: absolute;
}

.viewport-container {
  clip-path: inset(0 0 0 0);
  grid-column: 1 / 1;
  grid-row: 1 / 1;

  .not-fixed {
    position: absolute;
  }

  .fixed {
    position: fixed;
    pointer-events: none;

    .frame-children g {
      pointer-events: auto;
    }
  }
}

/** FULLSCREEN */
[data-fullscreen="true"] .viewer-bottom {
  transform: translateY(deprecated.$s-40);
}

[data-force-visible="true"] .viewer-bottom {
  transform: translateY(0);
}

[data-fullscreen="true"] .viewer-go-next {
  transform: translateX(deprecated.$s-40);
}

[data-fullscreen="true"] .viewer-go-prev {
  transform: translateX(-#{deprecated.$s-40});
}

[data-fullscreen="true"] .viewer-content {
  transform: translateY(-#{deprecated.$s-48});
  height: 100vh;
}

[data-fullscreen="true"] .viewer-section {
  height: 100vh;
}

[data-force-visible="true"] .viewer-go-next {
  transform: translateX(0);
}

[data-force-visible="true"] .viewer-go-prev {
  transform: translateX(0);
}