/* This file is part of Dream, released under the MIT license. See LICENSE.md
  for details, or visit https://github.com/aantron/dream.

  Copyright 2021 Anton Bachin */

/*

Playground layout: 2 panels with normal element and fluid
┌──────────────────────────────────────────────────┐
│                                                  │
│ body (desktop)                                   │
│                                                  │
│ ┌───────────────────────┐ ┌────────────────────┐ │
│ │                       │ │                    │ │
│ │ ┌───────────────────┐ │ │ ┌────────────────┐ │ │
│ │ │                   │ │ │ │                │ │ │
│ │ │ .panel-element    │ │ │ │ .panel-element │ │ │
│ │ ├───────────────────┤ │ │ ├────────────────┤ │ │
│ │ │                   │ │ │ │                │ │ │
│ │ │ .panel-fluid      │ │ │ │ .panel-fluid   │ │ │
│ │ │                   │ │ │ │                │ │ │
│ │ │                   │ │ │ │                │ │ │
│ │ │                   │ │ │ │                │ │ │
│ │ │                   │ │ │ │                │ │ │
│ │ │                   │ │ │ │                │ │ │
│ │ │                   │ │ │ │                │ │ │
│ │ │                   │ │ │ │                │ │ │
│ │ │                   │ │ │ │                │ │ │
│ │ │                   │ │ │ │                │ │ │
│ │ │                   │ │ │ │                │ │ │
│ │ │                   │ │ │ │                │ │ │
│ │ │                   │ │ │ │                │ │ │
│ │ │                   │ │ │ │                │ │ │
│ │ └───────────────────┘ │ │ └────────────────┘ │ │
│ │                       │ │                    │ │
│ │                       │ │                    │ │
│ └───────────────────────┘ └────────────────────┘ │
│                                                  │
└──────────────────────────────────────────────────┘

This is on mobile or when pressing Change
┌──────────────────────────────────────────────────┐
│                                                  │
│ body (mobile/Change view actived)                │
│ ┌──────────────────────────────────────────────┐ │
│ │                                              │ │
│ │ ┌──────────────────────────────────────────┐ │ │
│ │ │ .panel-element                           │ │ │
│ │ │                                          │ │ │
│ │ ├──────────────────────────────────────────┤ │ │
│ │ │ .panel-fluid                             │ │ │
│ │ │                                          │ │ │
│ │ │                                          │ │ │
│ │ │                                          │ │ │
│ │ │                                          │ │ │
│ │ └──────────────────────────────────────────┘ │ │
│ │                                              │ │
│ ├──────────────────────────────────────────────┤ │
│ │                                              │ │
│ │ ┌──────────────────────────────────────────┐ │ │
│ │ │ .panel-element                           │ │ │
│ │ │                                          │ │ │
│ │ ├──────────────────────────────────────────┤ │ │
│ │ │ .panel-fluid                             │ │ │
│ │ │                                          │ │ │
│ │ │                                          │ │ │
│ │ │                                          │ │ │
│ │ └──────────────────────────────────────────┘ │ │
│ │                                              │ │
│ └──────────────────────────────────────────────┘ │
│                                                  │
└──────────────────────────────────────────────────┘
 */
body {
  margin: 0;
  font-size: 14px;
  line-height: 21px;
  color: #ddd;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
  display: flex;
  height: 100vh;
  overflow-y: hidden;
}

@supports (-webkit-touch-callout: none) {
  body {
    /* The hack for Safari Mobile hack */
    height: -webkit-fill-available;
  }
}

.panel {
  flex: 0 0 50%;
  width: 50%;
  display: flex;
  flex-direction: column;
}
.panel-fluid {
  flex: 1 0 auto;
  min-height: 300px;
}

/*
 * Change view activation and mobile mode is the same
 * Please ensure that they are in perfect sync
 */
body.full-editor {
  flex-direction: column;
  overflow-y: auto;
  height: auto;
}

.full-editor .panel {
  width: 100%;
}

@media (max-width: 1100px) {
  body {
    flex-direction: column;
    overflow-y: auto;
    height: auto;
  }
  .panel {
    width: 100%;
  }
}

#textarea {
  position: relative;
}
#textarea .CodeMirror {
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

header {
  height: 64px;
  display: flex;
  align-items: center
}
/* Editor */

h1 {
  margin: 0;
  display: inline-block;
  margin-left: 24px;
  font-weight: normal;
}

#log {
  height: 100px;
  margin: 0;
  overflow-x: hidden;
  padding-left: 34px;
  padding-top: 14px;
  overflow: auto;
}

.CodeMirror, #log {
  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
}

#editor button {
  font: inherit;
  color: inherit;
  margin-left: 2em;
  background-color: #4338CA;
  font-weight: bold;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
}

#editor button:hover {
  cursor: pointer;
  background-color: #3730A3;
}

#editor header > a {
  color: inherit;
  text-decoration: none;
  flex: 1;
  text-align: right;
  margin-right: 24px;
}

@media (max-width: 550px) {
  #editor header > a {
    display: none;
  }
}

/* width */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  opacity: 0.2;
}

/* Track */
::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.2);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Client */

#client header {
  background-color: #eee;
  box-sizing: border-box;
  border-bottom: 1px solid #ccc;
  padding: 16px;
}

#client input {
  width: 100%;
  height: 100%;
  background: none;
  border: none;
  border: 1px solid #aaa;
  padding: 8px;
}

#client input:focus {
  outline: none;
}

#client iframe {
  border: 0;
  width: 100%;
  background-color: white;
}


/* Syntax */

.cm-s-dream.CodeMirror, body {
  background-color: #181b1e;
}

.cm-s-dream.CodeMirror, #editor > header {
  border-bottom: 1px solid #263838;
  box-sizing: border-box;
}

.cm-s-dream.CodeMirror {
  color: #ddd;
  border-bottom: 1px solid #2a2a26;
}

#log {
  color: #ddd;
}

.cm-s-dream .CodeMirror-gutters {
  background: none;
  border-right: 1px solid #262626;
}

.cm-s-dream .CodeMirror-linenumber {
  color: #999;
}

.cm-s-dream .cm-keyword, .t-magenta {
  color: #ff6c9b;
}

.cm-s-dream .cm-operator, .t-cyan {
  color: #8dc5ff;
}

.cm-s-dream .cm-string, .t-yellow {
  color: #e3db7a;
}

.cm-s-dream .cm-variable {
  color: #ddd;
}

.cm-s-dream .cm-variable-2, .t-green {
  color: #70df5c;
}

.t-dim {
  color: #999;
  display: none;
}

.t-white {
  color: #ddd;
}

.t-red {
  color: #ff2300;
}

.t-blue {
  color: #81a2ff;
}
