// -----------------------------------------------------------------------------
// Code block
// =============================================================================
// I've split this into it's own file, as it seems a pretty important chunk
// of CSS that should live on its own. There's a few variations ..
//
// Slight differences between card types
// -------------------------------------
// Neither one of these card types really does much with their wrappers, but
// a couple things to note:
//
// (a) Simple card is a just basic `pre` code block
// (b) Missing! card requires a `{{cloze}}` field, but is essentially the same.
//
// Anki mobile screen size -> iPad portrait
// ----------------------------------------
// See `globals/card.less` for more details.
//
// Minor bugs
// ----------
// 1. Without `code` padding, `.cloze` tags get "clipped" top/bottom.
//     - #! AnkiMobile treats `rem` units slightly differently, so uglify
//       the code to add `1px` extra padding.
//     - Compensate the `pre` accordingly (minus `1px`) to fit `4px` grid.

.gl-CodeBlock {

  pre {
    margin: 0;
    padding: calc(var(--spacing) - var(--spacing-micro)) var(--spacing); // #! 1
  }

  pre,
  pre code {
    text-align: left;
    color: var(--color-code-dark-text-color);
    font-family: var(--font-family-mono);
    background: var(--color-code-dark-background);
  }

  code {
    padding: var(--spacing-micro) 0; // #! 1
  }

  @media screen and (max-width: 768px) {
    font-size: var(--font-size-m);
  }
}


// Missing! `.cloze` tag styles ------------------------------------------------
//
// 1. `.cloze` is an Anki-specific class for cloze deletion types
// 2. I prefer them a bit more chunky than default `<code>` padding.
//    - #! AnkiMobile is a f* pain and treats `rem` units slightly different
//    - #! So we have to reduce the padding by `1px` somehow! (We set padding
//      in `code.less` for `pre` and `code`; avoids "clipping" top/bottom.
//    - It's an "inbetweeny" size that's not quite on our `4px` grid, but it's
//      a tradeoff to get chunky while maintaining legibility for adjacent lines
//      with our regular `line-height`.
// 3. Make the `--code-` colours more "punchy" on the `.cloze` background
//    all `.sourceCode` classes are spans (such as `.at`tributes)

.gl-CodeBlock .cloze {
  color: var(--color-code-cloze);
  font-weight: 700;
  background: var(--color-code-cloze-background); // 1
  padding:
    calc(var(--spacing-micro) + var(--spacing-px))
    calc(var(--spacing-quarter) + var(--spacing-micro))
    var(--spacing-quarter); // 2
  border-radius: var(--border-radius);

  > span {
    filter: brightness(65%) contrast(220%); // 3
  }
}
