// -----------------------------------------------------------------------------
// Code (inline and basic code blocks)
// =============================================================================
// > See `variables` folder for colours and themes
//
// It seems I'm basically resetting to a default here, and we're doing the
// heavy lifting of styles elsewhere. Inherited `--color-code-light-*` theme
// as default, so some styles need to be overriden.
//
//    #! Should some styles be edited/moved here?
//       I feel as much as possible, `code` and `pre` stuff should be set here
//       for light and dark mode (user settings).
//
// 1. Some specific settings for Recursive font (see `typography.less`)
// 2. Make sure there's a tiny whitespace gap if inline code overlaps vertically.
//    - Ugh, each of the browsers treat `rem` units slightly differently ...
//    - MacOS Safari 17.6 / Brave 1.79.126 are good with `--spacing-micro` bottom ..
//    - iOS and iPad Safari need `--spacing-px`.


code,
kbd,
samp {
  background: var(--color-ll);
  border-color: transparent;
  font-family: var(--font-family);
  font-variation-settings: 'MONO' 1, 'CASL' 0;  // #! (1)
  padding: 0 var(--spacing-quarter) var(--spacing-micro); // (2)

  .nightMode & {
    background: var(--color-nightmode-background-l);
  }

  &:empty {
    margin: 0;
    padding: 0;
    background: transparent;
    border-color: transparent;
  }
}

pre {
  color: var(--font-color);
  padding: var(--spacing-one);

  .nightMode & {
    background: var(--color-nightmode-background-l);
  }
}
