.stream__header {
  padding: var(--space--base);
  border-bottom: var(--border--light);
  border-color: var(--color--grayscale--08);
}

.stream__video-container {
  padding-inline: var(--space--base);
}

.stream__video {
  margin: 0 auto;
  border-radius: var(--border-radius--base);
  aspect-ratio: 12 / 9;
  height: auto;
  width: 100%;

  background-color: var(--color--grayscale--08);
  display: flex;
  align-items: center;
  justify-content: center;
}

.stream__video--placeholder {
  padding: var(--space--base);
  text-align: center;
}

.stream__video--constrain-width {
  max-width: 65vh;
}

.stream__log-header {
  padding: var(--space--base);

  border-bottom: var(--border--light);
  border-color: var(--color--grayscale--08);
}

.stream__log-scroll {
  padding: var(--space--base);

  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color--grayscale--05) transparent;

  /* Constrain height in non-split layouts */
  max-height: 14rem;

  overflow-wrap: break-word;
}

.stream__log-scroll--bottom-to-top {
  display: flex;
  flex-direction: column-reverse;
}

@container layout-main (width >=700px) {
  .stream__log-scroll {
    max-height: none;
    min-height: 10rem;
  }
}

/* For screens above 700px wide, use container query to control the layout of the stream elements */
@media screen and (min-width: 700px) {

  /* Parent element of .stream used for the container query */
  .stream {
    container: stream / size;
  }

  @container stream (width > 900px) or (height < 600px) {
    .stream__main {
      display: flex;
      flex-direction: row;
    }

    .stream__video-container {
      flex: 1;
    }

    .stream__log {
      max-width: 40%;

      border-left: var(--border--base);
      border-left-color: var(--color--grayscale--08);
    }

    .stream__video--constrain-width {
      max-width: none;
    }
  }
}