// Dark theme by default
:root {
  --background-color: #{$background-color-dark}; // body
  --background-color1: #{$background-color1-dark}; // blockquote, code block, border, table, hr
  --foreground-color: #{$foreground-color-dark}; // text
  --foreground-color3: #{$foreground-color3-dark}; // figcaption
  --accent-color: #{$accent-color-dark}; // link, blockquote
}

// Override variables for light theme
@media (prefers-color-scheme: light) {
  :root {
    --background-color: #{$background-color-light};
    --background-color1: #{$background-color1-light};
    --foreground-color: #{$foreground-color-light};
    --foreground-color3: #{$foreground-color3-light}; // figcaption
    --accent-color: #{$accent-color-light};
  }
}

// Set color
.body {
  background-color: var(--background-color);
  color: var(--foreground-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--foreground-color);
}

a {
  color: var(--accent-color);
}

.header {
  border-bottom: 1px solid var(--background-color1);
}

.brand {
  display: flex;
  align-items: center;
  gap: 6.9px;
  margin-bottom: -18px;
}

.brand img {
  height: 37px;
  padding: 0px;
}

.footer {
  border-top: 1px solid var(--background-color1);
}

blockquote {
  background-color: var(--background-color1);

  [dir=rtl] & {
    border-right: 0.5rem solid var(--accent-color);
  }    

  [dir=ltr] & {
    border-left: 0.5rem solid var(--accent-color);
  }
}

// Don't apply inline code's style to code block
:not(pre)>code {
  background-color: var(--background-color1);
}

hr {
  background: var(--background-color1);
}

// Table
table {
  background-color: var(--background-color1);
}

td,
th {
  border: 1px solid var(--background-color);
}

// Figure
figcaption {
  color: var(--foreground-color3);
}
