pico/docs/scss/content/_code.scss

/**
 * Docs: Code
 */

// Custom spacings for <pre> (vertically aligned with <article> content)
pre {

  @if map-get($breakpoints, "sm") and
    $enable-responsive-spacings {

    @media (min-width: map-get($breakpoints, "sm")) {
      padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm));
    }
  }

  @if map-get($breakpoints, "md") and
    $enable-responsive-spacings {

    @media (min-width: map-get($breakpoints, "md")) {
      padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md));
    }
  }

  @if map-get($breakpoints, "lg") and
    $enable-responsive-spacings {

    @media (min-width: map-get($breakpoints, "lg")) {
      padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg));
    }
  }

  @if map-get($breakpoints, "xl") and
    $enable-responsive-spacings {

    @media (min-width: map-get($breakpoints, "xl")) {
      padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl));
    }
  }
}

// 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-gutter);
      right: var(--spacing-gutter);
    }
  }

  // Spacing for Valid & Invalid badge
  code {
    padding: 1rem 0;
  }
}

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

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