pico/docs/scss/content/_code.scss

/**
 * Docs: Code
 */

// Custom spacings for <pre> (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-color: var(--card-sectionning-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: .375rem .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: 1rem 0;
  }
}

// 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';
  }
}