@use 'json-editor';

:root {
  --gap: 8px;
  --gap2: calc(var(--gap) * 2);
  --blue-0: #D0EBFF;
  --blue-1: #A5D8FF;
  --red-0: #FFE3E3;
  --red-1: #FFC9C9;
  --yellow-0: #FFF3BF;
  --yellow-1: #FFEC99;
  --green-0: #D3F9D8;
  --green-1: #B2F2BB;
  --font-default: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  --font-mono: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace;
}


html {
  font-family: var(--font-default);
}

body {
  margin: 0;
}

#main {
  display: grid;
  grid-template-columns: 150px 1fr 1fr;
  grid-template-rows: 100vh;

  > .column {
    overflow-y: auto;
  }

  .sidebar {
    padding: var(--gap);
  }
  .middle {
    padding-right: var(--gap2);
    margin-left: var(--sidebar-width);
  }
  .right {
    background-color: #eee;
  }
}

.editor-container {
  [data-schemapath]:target {
    animation: bgFade 1s forwards;
  }
}

.editor-toc {
  ul {
    margin: 0;
    padding: 4px 0 4px 14px;

    a {
      text-decoration: none;
      color: #333;
      &:hover {
        text-decoration: underline;
      }
    }
  }
}

.output-html {
  width: 100%;
  height: 100%;
}

.output-json {
  padding: var(--gap);
}

.code-block {
  font-size: 12px;
  font-family: var(--font-mono);
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-x: auto;
}


@keyframes bgFade {
  0% {
    background-color: #FFF3BF;
  }
  50% {
    background-color: #FFF9DB;
  }
  100% {
    background-color: transparent;
  }
}