/* 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";
@import "./components/results.css";
@import "./themes/light.css";

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

main {
  display: flex;
  flex: 1;
}

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

.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 .spacer {
  flex: 1;
}

.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);
}

.bundle .tabs a.show-results {
  inherit: .icon-base;
  background-image: url(/icons/chevron-left.svg);
  display: block;
  margin: var(--gutter-half);
  margin-right: var(--gutter);
}

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

.editor {
  flex: 1;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}

.editor.active {
  display: block;
}

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

.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;
}