.layout {
  display: flex;
  height: 100vh;
  height: 100lvh;
  position: relative;
  overflow: hidden;
  background-color: var(--np-slate-200);
  transition: background-color 200ms var(--np-ease-in-out-cubic);
}

.layout.-connected {
  background-color: var(--np-slate-400-alt);
}

.layout__viewport {
  display: flex;
  flex-direction: row;
  flex: 1 1 0%;
  min-width: 0;
  pointer-events: none;
  height: 100%;
  position: relative;
  opacity: 1;
  transition: opacity 100ms var(--np-ease-in-out-cubic);
}

.layout.-connected .layout__viewport {
  opacity: 0.25;

  @media (width >= calc(25rem + 31.5rem)) {
    opacity: 1;
    pointer-events: initial;
  }
}

.layout__viewport iframe {
  opacity: 0;
  transition: opacity 750ms 250ms var(--np-ease-in-out-cubic);
}

.layout.-connected .layout__viewport iframe {
  opacity: 1;
}

.layout__viewport > * {
  min-width: 25rem;
}

.layout__sidebar {
  display: flex;
  flex-direction: column;
  width: 31.5rem;
  flex-shrink: 0;
  background-color: var(--np-slate-200);
  z-index: 1;
  clip-path: polygon(
    7px 0,
    100% 0,
    100% 30%,
    100% 70%,
    100% 100%,
    30% 100%,
    0 100%,
    -1px 3rem
  );

  @media (width >= 90rem) {
    width: 33rem;
  }
}