@import url("normalize.css");
@import url("cm-syntax.css");

/* Based on the theme at http://bonsaiden.github.com/JavaScript-Garden */

/* based on the theme midnight in the std distro */

:root {
  --c64-black: #000000;
  --c64-white: #FFFFFF;
  --c64-red: #880000;
  --c64-cyan: #AAFFEE;
  --c64-violet: #CC44CC;
  --c64-green: #00CC55;
  --c64-blue: #0000AA;
  --c64-yellow: #EEEE77;
  --c64-orange: #DD8855;
  --c64-brown: #664400;
  --c64-lightred: #FF7777;
  --c64-darkgrey: #333333;
  --c64-grey: #777777;
  --c64-lightgreen: #AAFF66;
  --c64-lightblue: #0088FF;
  --c64-lightgrey: #BBBBBB;

  --panel-border-color: var(--c64-grey);
  --panel-border-width: 2px;
  --panel-background-color: var(--c64-darkgrey);
  --panel-text-color: var(--c64-white);

  --button-background-color: var(--c64-red);
  --button-text-color: var(--c64-white);

  --editor-activeline-color: var(--c64-lightgreen);
  --editor-activeline-background: var(--c64-black);
  --editor-activeline-gutter: var(--c64-black);

  --editor-background-color: var(--c64-darkgrey);
  --editor-text-color: var(--c64-white);
  --editor-gutter-background-color: var(--c64-black);
  --editor-gutter-text-color: var(--c64-cyan);
}

.active-lines,
.breakpoints {
  width: 0.8em;
}

@font-face {
  font-family: 'PixelOperatorMono';
  src: url('../font/PixelOperatorMono.woff') format('woff');
}

body,
pre,
.CodeMirror-linenumber,
.CodeMirror-line {
  font-family: 'PixelOperatorMono', 'Courier New', Courier, monospace !important;
  /* letter-spacing: -2px !important;  */
  letter-spacing: 0px;
}

.loading-popup {
  z-index: 100;
  background: navy;
  color: white;
  height: 1vh;
  width: 1vw;
}

.emscripten {
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

div.emscripten {
  text-align: center;
}

canvas.emscripten {
  border: 0px none;
  background-color: black;
}

.spinner {
  height: 50px;
  width: 50px;
  margin: 0px auto;
  -webkit-animation: rotation .8s linear infinite;
  -moz-animation: rotation .8s linear infinite;
  -o-animation: rotation .8s linear infinite;
  animation: rotation 0.8s linear infinite;
  border-left: 10px solid rgb(0, 150, 240);
  border-right: 10px solid rgb(0, 150, 240);
  border-bottom: 10px solid rgb(0, 150, 240);
  border-top: 10px solid rgb(100, 0, 200);
  border-radius: 100%;
  background-color: rgb(200, 100, 250);
}

@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@-moz-keyframes rotation {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
  }
}

@-o-keyframes rotation {
  from {
    -o-transform: rotate(0deg);
  }
  to {
    -o-transform: rotate(360deg);
  }
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.CodeMirror-gutters {
  background-color:var(--editor-gutter-background-color) !important;
  color: var(--editor-gutter-text-color) !important;
  border-left: var(--panel-border-width) solid var(--panel-border-color);
  border-right: 0;
}

.CodeMirror-activeline {
  color: var(--editor-activeline-color);
}

.CodeMirror-activeline-background {
  background:var(--editor-activeline-background) !important;
}
.CodeMirror-activeline-gutter {
  background:var(--editor-activeline-gutter) !important;
  color:var(--editor-gutter-text-color) !important;
  border-left: var(--panel-border-width) solid var(--panel-border-color);
}
.CodeMirror-linenumber {
  color:var(--editor-gutter-text-color) !important;
}

.cm-s-dasm .CodeMirror-cursor {
  border-left: .25em solid var(--c64-lightred);
}


button {
  background: var(--button-background-color);
  color: var(--button-text-color);
  border: 1px solid var(--button-text-color);
  padding: 0 .25em 0 .25em;
  cursor: pointer;
}

button:disabled,
button[disabled] {
  background: var(--c64-grey);
  color: var(--c64-white);
}

.container {
  display: grid;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  grid-template-columns: minmax(auto,auto) 1fr 1fr 1fr;
  grid-template-rows: minmax(auto, auto) 1fr 1fr 12ex;
  /* grid-gap: 1rem; */
  grid-template-areas:
   "header   header    header     header"
   "sidebar  content-1 content-1  system"
   "w6502    content-1 content-1  system"
   "footer   footer    footer     footer";
}
.system {
  grid-area: system;
  background-color: #8a2be2;
  color: white;
}

.system iframe {
  width: 100%;
  height: 100%;
  border: 0;
  overflow: hidden;
}

.header {
  grid-area: header;
  color: var(--panel-text-color);
  background: var(--panel-background-color);
  border-bottom: var(--panel-border-width) solid var(--panel-border-color);
}

.sidebar {
  grid-area: sidebar;
}

header {
  color: var(--panel-background-color);
  background: var(--panel-text-color);
  text-align: center;
  font-weight: bold;
}

.sidebar input[type="radio"] {
  display: none;
}

.sidebar span {
  color: var(--c64-violet);
  background: var(--c64-black);
  width: 100%;
  display: block;
  text-align: center;
  cursor: pointer;
}

.sidebar span:hover {
  color: var(--c64-white);
  background: var(--c64-black);
}

.sidebar :checked+span {
  color: var(--c64-lightgreen);
  background: var(--c64-black);
}

.w6502 {
  grid-area: w6502;
}

.content-1 {
  grid-area: content-1;
}

.footer {
  grid-area: footer;
}

#output {
  width: 100%;
  height: 100%;
}

.w6502 .label {
  width: 3rem;
  display: inline-block;
}

.w6502 .value,
.w6502 .line {
  display: inline-block;
}

.filelist {
  background: var(--panel-background-color);
  color: var(--panel-text-color);
}

.filelist-item {
  min-height: 1rem;
}

.filelist a {
  text-decoration: none;
  color: var(--c64-white);
}

.filelist a:hover {
  color: var(--c64-blue);
  background: var(--c64-yellow);
}

.filelist a:active {
  color: var(--c64-lightred);
}

.filelist a:visited {
  color: var(--c64-white);
}

section {
  background: var(--panel-background-color);
  color: var(--panel-text-color);
}

body.section,
section.page {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--c64-lightgrey);
  background: var(--c64-darkgrey);
  background-image: url('tile.png');
}

section.page {
  display: flex;
  align-items: center;
}

.page-contents {
  max-width: 40em;
  min-width: 10em;
  margin: auto;
  padding: 0 2em 0 2em;
  border: var(--panel-border-width) solid var(--panel-border-color);
  background: var(--c64-darkgrey);
}

section.popup-container {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c64-darkgrey);
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  z-index: 10000;
}

.popup-container>div {
  background: var(--c64-blue);
  color: var(--c64-yellow);
  border: var(--panel-border-width) solid var(--c64-lightblue);
  padding: 1em;
  max-width: 40em;
}

section a {
  color:var(--c64-white);
  text-decoration: underline;
}

a:hover {
  text-decoration: underline;
  color:var(--c64-yellow);
}

a:active {
  color: var(--c64-black);
}

a:visited {
  color: var(--c64-violet);
}

.main-logo {
  text-align: center;
}

.button-row {
  text-align: center;
}

#assemble-output {
  height: 100%;
  overflow: scroll;
  width: 100%;
  border-top: var(--panel-border-width) solid var(--panel-border-color);
}

#assemble-output a {
  color: var(--c64-white);
}

.error-no-wasm {
  background: var(--c64-red);
  color: var(--c64-white);
  border: var(--panel-border-width) solid var(--c64-white);
  overflow: auto;
}