@import "typography";

$lightBackground: WHITE;
$dividerColor: #EBEBEB;

html[data-bs-theme="light"] {
  background: $lightBackground;

  code:not([class*="hljs"]) {
    // ^ don't apply these styles to highlightJS blocks of code.
    color: #CC0000;
  }

  .navbar {
    background: $lightBackground;
    border-bottom: 1px solid $dividerColor;
  }

  nav.main {
    a {
      color: #666666;

      &:hover {
        color: #222222;
      }
    }

    .link-group {
      ol {
        border-left: 2px solid #FF8888;
      }
    }

    .contributors {
      .remaining-count {
        .bubble {
          background: #F0F0F0;
        }
      }
    }
  }

  main {
    header {
      background: rgba(0, 0, 0, 0.02);

      color: #222222;
    }

    font-family: $fontSerif;
    letter-spacing: 0.03em;

    p {
      font-size: 16px;
    }

    p, li {
      code:not([class*="hljs"]):not(a *) {
        // ^ don't apply these styles to highlightJS blocks of code.
        margin-left: 2px;
        margin-right: 2px;

        padding-left: 4px;
        padding-right: 4px;
        padding-top: 2px;
        padding-bottom: 2px;

        color: BLACK;

        background: #EEE;
        border-radius: 4px;
        border: 1px solid #CCC;
      }
    }

    a {
      color: #444;

      &:hover {
        color: BLACK;
      }

      code:not([class*="hljs"]) {
        color: #444;

        // ^ don't apply these styles to highlightJS blocks of code.
        &:hover {
          color: BLACK;
        }
      }
    }
  }

  .right-pane {
    .content {
      border-left: 1px solid #EBEBEB;

      .table-of-contents {
        ol ol {
          border-left: 1px solid #EBEBEB;
        }

        ol {
          li {
            a {
              color: #666666;

              &:hover {
                color: BLACK;
              }
            }
          }
        }
      }

      ol.organization-links {
        a {
          background: rgba(0, 0, 0, 0.02);

          &:hover {
            background: rgba(0, 0, 0, 0.10);
          }
        }
      }

      .organization-nav-divider {
        background: $dividerColor;
      }
    }
  }

  footer {
    background: #F8F8F8;

    color: #888888;

    .built-with {
      a {
        color: #CCCC00;
      }
    }
  }
}
