@import "./variables.css";
@import "../../diffuse/colors.css";
@import "../../diffuse/fonts.css";

/***********************************
 * Base
 ***********************************/
body {
  background-color: oklch(from var(--bg-color) calc(l - 0.025) c h);
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100dvh;
}

iframe {
  border: 0;
}

/***********************************
 * Applets (No UI)
 ***********************************/
iframe[src*="/configurator/"],
iframe[src*="/engine/"],
iframe[src*="/input/"],
iframe[src*="/orchestrator/"],
iframe[src*="/processor/"],
iframe[src*="/output/"] {
  height: 0;
  left: 110vw;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  top: 110vh;
  width: 0;
}

/* Audio is a special case, iframe needs to be "visible" in order to play the audio. */
#applet__engine__audio {
  height: 1px;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 1px;
}

/***********************************
 * Main
 ***********************************/
main {
  display: grid;
  gap: var(--space-2xs);
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  height: 100dvh;
  overflow: hidden;
  padding: var(--space-md) var(--space-md);

  & iframe {
    border-radius: 6px;
  }
}

/***********************************
 * Applets
 ***********************************/

iframe[src*="/artwork-controller/"] {
  grid-column: 3;
  height: 100%;
  justify-self: end;
  max-width: var(--container-3xs);
  width: 100%;
}