:root {

  --scrollbar-size: 10px;
  --color-scrollbar: #424242;

  --toolbar-height: 65px;
  --output-hehgit: 350px;

  --color-toolbar-bg: #1b1b1b;
  --color-code-example-title: #ffffff99;
  --color-editor: #a9b7c6;
  --color-output: #afb1b3;
  --color-output-bg: #313336;
  --color-toolbar-border: #424242;
  --color-editor-bg: #1b1b1b;
  --color-output-error: #ec5424;

  --fs-editor: 20px;
  --fs-code-example-title: 12px;
}

/* Scroll bar override (Not works with Firefox and IE) */
::-webkit-scrollbar {
  width:  var(--scrollbar-size);
  height: var(--scrollbar-size);
}
::-webkit-scrollbar-thumb { background: var(--color-scrollbar)  } /* Handle */


/* Override navbar color for the dark theme. */
#navbar {
  background-color: #27282C;
}

body {
  background-color: var(--color-editor-bg);
}

/*****************************************************************************/
/* TOOLBAR                                                                   */
/*****************************************************************************/

#toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  color: white;
  height: var(--toolbar-height);
  background-color: var(--color-toolbar-bg);
  border-bottom: 2px solid var(--color-toolbar-border);
}

#run-button {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 20px;
  color: white;
  background-color: var(--color-toolbar-bg);
  border: 1px solid white;
  transition: .2s;
  cursor: pointer;
}

#run-button:hover {
  background-color: white;
  color: var(--color-toolbar-bg);
}

#code-example-titles {
  color: var(--color-code-example-title);
  display: flex;
}

.code-example-title {
  cursor: pointer;
  padding: 20px 10px;
  font-size: var(--fs-code-example-title);
}

.code-example-title:hover,
.code-example-title.active {
  color: white;
}

.code-example-title h2 {
  font-weight: normal;
}
.code-example-title.active h2 {
  font-weight: bolder;
}

/*****************************************************************************/
/* CODE EDITOR                                                               */
/*****************************************************************************/

#code-area {
  display: flex;
  width: 100%;
  height: calc(100vh - var(--navbar-height) - var(--toolbar-height));
}

.codejar-wrap {
  height: 100%;
  flex-basis: 50%;
}

#code-editor {
  resize: none !important;
  background-color: var(--color-editor-bg);
  height: 100%;
  color : var(--color-editor);
  font-size: var(--fs-editor);
  line-height: calc(var(--fs-editor) * 1.4);
  font-weight: 400;
  padding: 10px;
  tab-size: 2;
}

#code-output {
  flex-basis: 50%;
  overflow-x: scroll;
  font-size: var(--fs-editor);
  background-color: var(--color-output-bg);
  color: var(--color-output);
  padding: 16px 32px;
}

#code-output.has-error {
  color: var(--color-output-error);
}


/*****************************************************************************/
/* MEDIA SIZE OVERRIDE                                                       */
/*****************************************************************************/

@media screen and (max-width: 995px) {
  :root {
    --fs-editor: 14px;
    --fs-code-example-title: 10px;
  }
}