/* Copyright 2015 The Vanadium Authors. All rights reserved. */
/* Use of this source code is governed by a BSD-style */
/* license that can be found in the LICENSE file. */

@import "./variables.css";
@import "./reset.css";
@import "./typography.css";
@import "./icons.css";
@import "./components/buttons.css";
@import "./components/header.css";
@import "./components/footer.css";

body, .playground {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

main {
  display: flex;
  flex: 1;
}

.bundle {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}

.bundle .code,
.bundle .results {
  flex: 1;
}

.bundle .code {
  display: flex;
  flex-direction: column;
  background-color: var(--grey-50);
}

.bundle .tabs {
  display: flex;
  background-color: var(--cyan-700);
}

.bundle .tabs .tab {
  padding: calc(var(--gutter-half) - 2px) var(--gutter);
  border-bottom: 4px solid transparent;
  color: var(--white-54);
}

.bundle .tabs .tab.active {
  border-bottom-color: var(--deeporange-A200);
  color: var(--white);
}

.editors {
  flex: 1;
  display: flex;
  position: relative;
}

.editor {
  flex: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  visibility: hidden;
}

.editor.active {
  visibility: visible;
}

.ace_editor {
  width: 100%;
  height: 100%;
}

.results {
  display: flex;
  flex-direction: column;
  background-color: var(--grey-50);
}

.results .controls {
  background-color: var(--cyan-600);
  padding: var(--gutter-half) var(--gutter);
  color: var(--white);
}

.results .controls a {
  color: var(--blue-grey-700);
}

.results .console {
  flex: 1;
  position: relative;
}

.scroller {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  padding: var(--gutter);
}

.log {
  margin-bottom: var(--gutter);
}

.log .meta {
  display: flex;
}

.log .meta .source {
  flex: 1;
  font-weight: bold;
}

.log .meta .source .stream {
  font-weight: normal;
}

.log .message {
  font-family: "Source Code Pro", monospace;
  padding-left: var(--gutter-half);
  overflow: hidden;
  overflow-y: scroll;
}

.log .message pre {
  padding: 0;
  margin: 0;
  white-space: pre-wrap;       /* CSS 3 */
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  word-wrap: break-word;
}

.log.debug pre {
  color: #00B9F7;
}

.log.stdout {

}

.log.stderr pre {
  color: #F03A76;
}

.log.debug {
  display: none;
}

.console.debug .log.debug {
  display: block;
}

.error {
  margin: var(--gutter) auto;
  padding: var(--gutter);
}

.error .details {
  border: 4px solid red;
}

.error .details.hide {
  border: 4px solid green;
}

.loading {
  margin: var(--gutter) auto;
}