/* Presentation for rendered Scratch block diagrams and the lab page furniture
 * they sit in. Installed by the scratch-lab-generator skill. */

/* Before scratchblocks.js runs, a pre.blocks is raw text. Keep it from
   flashing as a code block on slow connections. */
pre.blocks {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0.4rem 0;
  overflow-x: auto;
  font-family: inherit;
}

pre.blocks .scratchblocks svg {
  max-width: 100%;
  height: auto;
}

/* Side-by-side starter/solution comparison on wide screens. */
.lab-compare {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.lab-compare > div {
  flex: 1 1 20rem;
  min-width: 0;
}

/* Download row for the .sb3 files attached to a lab. */
.lab-downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0.8rem 0 1.2rem 0;
}
.lab-downloads a {
  display: inline-block;
  padding: 0.35rem 0.8rem;
  border-radius: 0.4rem;
  background: #642580;
  color: #fff !important;
  font-weight: 600;
  text-decoration: none;
}
.lab-downloads a:hover {
  background: #41bac1;
}

/* Lab metadata strip under the page title. */
.lab-meta {
  font-size: 0.8rem;
  color: var(--md-default-fg-color--light);
  margin-top: -0.6rem;
  margin-bottom: 1.2rem;
}