@import url("hydrogen.css");

html,
body {
  height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 1.4rem;
  margin: 0;
  padding: 0;
}

a {
  color: #66b;
}

/**
 * The playroom app has two main areas: a video panel, and a chat panel.
 */
.playroom-root {
  display: grid;
  height: 100%;
}
.stream-panel {
  grid-area: video;
}
.chat-panel {
  grid-area: chat;
}

/**
 * On wide screens, the video and chat areas are a horizontal two-column view.
 */
@media (min-width: 1025px) {
  .playroom-root {
    grid-template-areas: "video chat";
    grid-template-columns: 1fr 450px;
  }
}

/**
 * On narrow screens, the video and chat areas are vertically stacked as two
 * rows. We give it a min-height, so that instead of scrunching if it gets too
 * small, it gets a scroll bar.
 */
@media (max-width: 1024px) {
  .playroom-root {
    grid-template-areas:
      "video"
      "chat";
    grid-template-rows: 50% 50%;
    min-height: 400px;
  }
}

/**
 * The stream panel has both a controls area for the streamer, and a content
 * area for everyone.
 */
.stream-panel {
  display: grid;
  grid-template-areas:
    "controls"
    "content";
  grid-template-rows: auto 1fr;
}

/**
 * The stream controls are hidden for most users, but offer important stream
 * controls for the streamer once they've logged in at <yoursite>.com/admin !
 * These controls appear at the top of the stream panel.
 */
.stream-controls {
  grid-area: controls;
  background: #336;
  color: white;
  padding: 0.5em 1em;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

/**
 * The stream content area has a dark background, and centers its contents. It\
 * will be covered by the iframe once it loads.
 */
.stream-content {
  grid-area: content;
  background: #223;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/**
 * The stream state form lets you start or end the stream.
 */
.stream-state-form {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5em;
}

/**
 * The embed HTML input and its label are arranged as a row.
 */
.stream-state-form label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5em;
}

/**
 * Add a colon after the Stream URL label.
 */
.stream-state-form label > div::after {
  content: ":";
}

/**
 * The Stream URL input has smaller font size, because URLs looks annoying and
 * code-y and there's a lot of it. But extra padding to make up for it!
 */
.stream-state-form input[name="streamPageUrl"] {
  font-size: 0.8em;
  padding: 0.25em;
}

/**
 * The embedded iframe takes up the whole area.
 */
.stream-panel iframe {
  width: 100%;
  height: 100%;
}

/**
 * The stream idle indicator appears when there's no stream.
 */
.stream-idle-indicator {
  text-align: center;
}

/**
 * .chat-panel is the main chat container. It has a header area, and a content
 * area.
 */
.chat-panel {
  display: grid;
  grid-template-rows: auto minmax(min-content, 1fr);
  grid-template-areas:
    "header"
    "content";
  min-height: 100%;
}

/**
 * The chat header sits above the main chat area, with settings etc.
 */
.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
}

/**
 * All three content types take up the whole chat content area, and are column
 * flex containers.
 */
.chat-main,
.chat-loading-message,
.chat-error-message {
  grid-area: content;
  display: flex;
  flex-direction: column;
}

/**
 * The loading and error messages center their content.
 */
.chat-loading-message,
.chat-error-message {
  justify-content: center;
  text-align: center;
}

/**
 * Chat loading messages have big typographical styles!
 */
.chat-loading-message {
  font-size: 1.5em;
}

/**
 * Chat error messages have medium typographical styles.
 */
.chat-error-message {
  font-size: 1.2em;
}

/**
 * The chat title should be large, but not as large as most h1s.
 */
.chat-header h1 {
  font-size: 1.4em;
}

/**
 * The "Display name" form flows horizontally.
 */
.display-name-form {
  display: flex;
  gap: 0.25em;
  align-items: flex-end;
}

/**
 * Add some space between the "Display name" label and the input!
 */
.display-name-form label {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}

/**
 * While the page is still loading JS, hide all elements with v-if or v-show
 * conditions, unless they're also tagged with v-show-while-page-loading.
 *
 * That way, we can show loading UI while the JS is loading, but hide it once
 * the page starts up.
 *
 * NOTE: This code depends on the templating engine to remove `v-scope` once
 *       it loads.
 */
.playroom-root[v-scope] :is([v-if], [v-show]):not([v-show-while-page-loading]) {
  display: none;
}