:root {
  $rhap_theme-color: hsl(var(--foreground));
  $rhap_background-color: hsl(var(--card));
  $rhap_bar-color: hsl(var(--muted-foreground));
  $rhap_time-color: hsl(var(--foreground));
  --jp-private-toolbar-height: 64px;
}

.mdx-content {

  p,
  table {
    code {
      padding-top: 0.15rem;
      padding-bottom: 0.15rem;
      border: 1px solid hsl(var(--border));
    }
  }

  section[data-footnotes] {
    h2 {
      display: block;
      width: 100%;
      height: fit-content;
      color: hsl(var(--foreground));
      background-color: hsl(var(--background));
      font-size: 1.2rem;
      font-weight: 600;
      position: initial;
    }
  }

  /* h1, */
  /* h2, */
  /* h3, */
  /* h4, */
  /* h5, */
  /* h6 { */
  /*   mjx-container { */
  /*     margin-left: 0.3ch; */
  /*     margin-right: 0.3ch; */
  /*   } */

  /*   mjx-math { */
  /*     margin-top: auto; */
  /*     margin-bottom: auto; */
  /*   } */
  /* } */
}

// -- Audio Player --
div.rhap_container {
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 4px;

  .rhap_current-time,
  .rhap_total-time {
    color: hsl(var(--foreground));
  }

  .rhap_progress-filled,
  .rhap_progress-indicator,
  .rhap_volume-indicator {
    background-color: hsl(var(--primary));
  }

  svg path {
    fill: hsl(var(--card-foreground));
  }
}

/* --- Small --- */

.mdx-small {
  padding-left: 1rem;
  padding-right: 1rem;

  h1 {
    font-size: 1.2rem;
  }

  h2 {
    font-size: 1.15rem;
  }

  h3 {
    font-size: 1rem;
  }

  h4,
  h5,
  h6 {
    font-size: 1rem;
  }

  p,
  li {
    font-size: 12px;
  }
}
