pico/docs/scss/content/_code.scss

/**
 * Docs: Code
 */

// Code block inside article
article > footer.code {
  background: var(--article-code-background-color);
}
article pre,
article pre code {
  margin-bottom: 0;
  background: transparent;
}

// Code block outside article
// Horizontally aligned with <article> content
section > pre {
  margin: var(--block-spacing-vertical) 0;
  padding: calc(var(--block-spacing-vertical) / 1.5)
    var(--block-spacing-horizontal);
  background: var(--article-code-background-color);
  box-shadow: var(--card-box-shadow);
}

// Badge for Valid & Invalid code
[data-theme="invalid"],
[data-theme="valid"] {
  position: relative;
  margin-bottom: 0 !important;

  // Label
  &:before {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.375rem 0.75rem;
    border-radius: 0;
    color: var(--primary-inverse);
    font-size: 14px;
    line-height: 1;

    @media (min-width: map-get($breakpoints, "lg")) {
      top: var(--spacing);
      right: var(--spacing);
    }
  }

  // Spacing for Valid & Invalid badge
  code {
    padding: calc(var(--block-spacing-vertical) / 1.5 + 14px + 0.75rem)
      var(--block-spacing-horizontal);
  }
}

// Color for Valid & Invalid code
[data-theme="invalid"] {
  &:before {
    background: var(--invalid-color);
    content: "Not so great";
  }
}

[data-theme="valid"] {
  &:before {
    background: var(--valid-color);
    content: "Great";
  }
}