// -----------------------------------------------------------------------------
// Image Block (for Draw! cards)
// =============================================================================
// > Some styles can be found in `figure.less`.
//
// #! An `.gl-ImageBlock` should (ideally) be ONLY for images, but sometimes
// it can be handy to have minimal code underneath an image. For that reason,
// you can add the `.gl-CodeBlock` class to `<figure>`.
//
// 1. Otherwise the `box-shadow` will spill over into keypoint notes
// 2. #! `hwb(from green h w b / 0.5)` doesn't work in Anki's browser
//    - So use a simpler color instead (add a `--color` var for this?)
//
// Anki mobile screen size -> iPad portrait
// ----------------------------------------
// See `globals/card.less` for more details.

.gl-ImageBlock {
  background: radial-gradient(circle,rgba(225, 225, 225, 1) 0%, rgba(255, 255, 255, 1) 100%);
  overflow: hidden; // (1)

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

  .nightMode & {
    background: radial-gradient(circle,var(--color-nightmode-background-dddd) 0%, var(--color-nightmode-background-dd) 100%);
  }

  figcaption {
    border-bottom: 1px solid #E5E4E2; // (2)


  }

  img {
    box-shadow: 5px 10px 12px -12px rgba(0, 0, 0, 0.5), -5px 10px 12px -12px rgba(0, 0, 0, 0.5);
  }

  pre {
    margin: 0; // #! Should this be here?
  }
}
