---
# Only the main Sass file needs front matter (the dashes are enough)
---

// Import partials from `sass_dir` (defaults to `_sass`)
@import "bootstrap";
@import "syntax-highlighting";
@import "syntax-highlighting-dark";

body {
  --bs-body-font-size: 1.15em;
}

#site-title {
  text-align: center;
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: black;
  padding: 0.5em 0;
  margin: 0;
}

#site-footer {
  border-width: 1px 0 0 0;
  border-style: solid;
  border-color: black;
  margin: 0;
  padding: 1.4em 0;

  p { margin: 0; }
}

#page-content {
  margin: 1em 0;
}

table {
  thead {
    --bs-table-bg: #dddddd;
  }

  td.current {
    background-color: rgb(142, 250, 147);
    --bs-link-color-rgb: 35, 35, 194;
    --bs-link-hover-color-rgb: 35, 35, 194;
  }

  td.previous {
    background-color: rgb(231, 250, 232);
    --bs-link-color-rgb: 69, 69, 221;
    --bs-link-hover-color-rgb: 69, 69, 221;
  }
}

.full-width {
  width: 100%;
}

.ext {
  font-weight: bold;
  color: #919191;
  display: inline-block;
  padding: 0 2px;
}

.beta {
  font-weight: bold;
  display: inline-block;
  padding: 0 2px;
  color: #cc9300;
}

.strong {
  font-weight: bold;
}

.soft {
  opacity: 0.7;
}

ul {
  list-style-type: none;
  padding: 0rem;

  li:before { content: "— " };
}

.with-placeholders {
  line-height: 2em;
  .placeholder {
    border: 1px solid rgb(196, 212, 241);
    border-radius: 1em;
    background: rgb(233, 239, 250);
    margin: 2px 2px;
    padding: 2px 5px;
  }
}

#uihex {
  width: 100%;

  #results {
    display: none; /* Overridden by JS */
  }

  #input-container {
    text-align: center;
    padding: 1em 0;
  }

  input {
    text-align: center;
    font-size: 1.5em;
    padding: 0.5em;
    width: 7.5em;
    color: #399CD3;
  }

  .btn {
    float: right;
    padding: 7.5px 14px;
    margin: 0 0 10px 5px;
  }

  .color-preview {
    display: inline-block;
    width: 2em;
    height: 2em;
    border-radius: 1em;
    border: 1px solid white;
    margin: -0.5em 0.5em;
  }

  pre {
    font-size: 0.7em !important;
  }

  h3, h4 {
    padding: 0.2em 0;
  }

  h4 {
    font-weight: normal;
  }

  @media screen and (max-width: 767px) {
    body {
      font-size: 1.6em;
      line-height: 1.8em;
    }

    .content {
      margin-top: 0;
    }
  }
}

pre {
  font-size: 0.9rem;
  padding: 9.5px;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 4px;
}

#markdown-toc {
  font-weight: bold;
  font-size: 0.8em;
  display: inline-block;
  padding: 0.2em;
  border: 1px solid #999;
  border-radius: 5px;
  background: #fafafa;
  list-style-type: none;
  color: #999;
  margin: 0.5em 0;

  code {
    color: inherit;
    background-color: inherit;
  }
}

#compact-toc {
  #markdown-toc {
    li:before { content: "" };

    li {
      display: inline-block;
      padding: 0 0.4em;

      ul {
        display: none;
      }
    }
  }
}

@media screen and (min-width: 767px) {
  .nowrap {
    white-space: nowrap;
  }
}

@include color-mode(dark) {
  #site-title {
    border-color: $textDark;
  }

  #site-footer {
    border-color: $textDark;
  }

  #markdown-toc {
    background: #333;
    border: 1px solid #999;
  }

  table {
    thead {
      --bs-table-bg: #333333;
    }
    
    th,
    td {
      border: 1px solid #999;
    }

    td.current {
      background-color: rgb(13, 131, 33);
      --bs-link-color-rgb: 245, 245, 255;
      --bs-link-hover-color-rgb: 245, 245, 255;
    }

    td.previous {
      background-color: rgb(13, 77, 20);
      --bs-link-color-rgb: 246, 246, 253;
      --bs-link-hover-color-rgb: 246, 246, 253;
    }
  }

  pre {
    background-color: #333;
    border: 1px solid #ccc;
    color: white;
  }

  .with-placeholders {
    .placeholder {
      border: 1px solid #999;
      background: #666;
    }
  }

  .color-preview {
    border: 1px solid #222 !important;
  }
}
