#platform #page-wrapper:has(#viewer-editor.fullscreen) {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
}

#platform:has(#viewer-editor.fullscreen) #library {
  display: none;
}

#viewerinspector.loading {
  opacity: 0.25;
  * {
    pointer-events: none !important;
  }
}

.viewer-selection {
  display: grid;
  place-items: center;
  padding: var(--panel-padding);
}

.viewer-selection-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-size: 0.9em;
  .icon {
    font-size: 1.25em;
  }
}

#ratio-preview {
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%) translateY(-105%);
  z-index: 2;

  font-size: 0.9em;
  width: fit-content;
  padding: 0.25em 1em;
  background: #282828;
  color: #f6f6f6;
  color-scheme: dark;

  border-bottom-right-radius: var(--inner-border-radius);
  border-bottom-left-radius: var(--inner-border-radius);

  box-shadow:
    0 0 0.25em rgba(0, 0, 0, 0.2),
    inset 0 0 1px rgba(255, 255, 255, 0.22),
    inset 0 -3px 3px rgba(255, 255, 255, 0.05);
  margin-top: -2px;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  opacity: 0;
  pointer-events: none;

  transition:
    transform var(--spd-insp) ease,
    opacity var(--spd-insp) ease;
}

#viewer-editor:hover #ratio-preview,
#ratio-preview:not(.fullratio) {
  transform: translateX(-50%) translateY(0%);
  opacity: 1;
  pointer-events: all;
}

#ratio-preview select {
  font-family: var(--primary-font);
  font-weight: 600;
  background: inherit;
  color: inherit;
  border: none;
  cursor: pointer;
  padding: 0.25em 0.5em 0.25em 0;
  font-size: 0.9em;
  width: 10ch;
}

#ratio-preview .icon {
  color: inherit;
  font-size: 1.25em;
}

#custom-packshot-size {
  display: grid;
  grid-template-columns: 1.5em 1fr;
  align-items: center;
  justify-content: start;
  margin: 0 0 0 2em;
}

#custom-packshot-size .icon {
  font-size: 1em;
}
.diminput {
  box-sizing: border-box;
  min-width: 5em;
  padding: 0.25em 0.5em 0.2em 0.5em;
  background-color: #353535;
  border: 1px solid #555;
  color: #f6f6f6;
  font-weight: 600;
  font-size: 0.85em;
}

#vstudio {
  position: absolute;
  display: grid;
  grid-template-columns: var(--quicktools-width) 1fr;

  container-type: size;
  container-name: viewer;
  overflow: hidden;
}

#vstudio-scene {
  position: relative;
}

#vstudio-scene.full {
  grid-column: span 2;
}

#studio-grid {
  position: absolute;
  pointer-events: none;
  background: none;
  z-index: 15;
  --grid-opacity: 1;
  --grid-color: #000000;
  --grid-thick: 1px;

  --tier-one: 33.33%;
  --tier-two: 66.66%;

  opacity: var(--grid-opacity);

  &.thirds,
  &.phi {
    background:
      linear-gradient(
        180deg,
        transparent var(--tier-one),
        var(--grid-color) var(--tier-one),
        var(--grid-color) calc(var(--tier-one) + var(--grid-thick)),
        transparent calc(var(--tier-one) + var(--grid-thick))
      ),
      linear-gradient(
        180deg,
        transparent var(--tier-two),
        var(--grid-color) var(--tier-two),
        var(--grid-color) calc(var(--tier-two) + var(--grid-thick)),
        transparent calc(var(--tier-two) + var(--grid-thick))
      ),
      linear-gradient(
        90deg,
        transparent var(--tier-one),
        var(--grid-color) var(--tier-one),
        var(--grid-color) calc(var(--tier-one) + var(--grid-thick)),
        transparent calc(var(--tier-one) + var(--grid-thick))
      ),
      linear-gradient(
        90deg,
        transparent var(--tier-two),
        var(--grid-color) var(--tier-two),
        var(--grid-color) calc(var(--tier-two) + var(--grid-thick)),
        transparent calc(var(--tier-two) + var(--grid-thick))
      );
  }

  &.phi {
    --tier-one: 38.196601125%;
    --tier-two: 61.803398875%;
  }
}

#iframe-container {
  --w: 100%;
  --h: 100%;

  width: var(--w);
  height: var(--h);

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  z-index: 1;

  display: block;
  box-shadow: none;

  transition:
    width var(--spd-insp) ease,
    height var(--spd-insp) ease;
}

#iframe-container:not(.fullratio) {
  box-shadow:
    0 0 1em 0 rgba(0, 0, 0, 0.33),
    0 0 10em 0 rgba(0, 0, 0, 0.66),
    0 0 500em 500em rgba(0, 0, 0, 0.81);
}

/* @improve bad UX: 3d quicktool and inspector editor tab are in the same comp,
in the same place, and does not the same thing,

hence this differenciator rule to keep legacy figma design
while we work on a new one
(we'll put the inspector tabs in the left next) */
#vstudio .quicktools {
  background-color: var(--background-main);
  gap: 0;
  .quicktool.active {
    background-color: transparent;
    .quicktool-button .icon {
      color: var(--power-primary-color);
    }
  }
}