/* Extends https://github.com/picocss/pico/blob/main/scss/content/_code.scss
<!--section:docs-->

### Code

The `<pre><code>` blocks are Prism-compatible and support captions via `data-caption="..."` attribute:

```treeview {data-caption="Blades CSS:"}
./assets/
├── blades.core.css     # reusable class-light utilities, unthemed
├── blades.theme.css    # minimal opinionated theme
└── blades.css          # above two together
```
How it works:
```css */
pre {
  padding: 1rem 1.5rem;
  padding-inline-end: 2rem;

  @media (max-width: 767px) {
    border-radius: 0;
  }
}

code {
  /* Code block caption via data-attr (to display filename, etc.) */
  &[data-caption] {
    &::before {
      content: attr(data-caption);
      display: block;
      margin-bottom: 1rem;
      opacity: 50%;
      font-style: italic;
    }
  }

  &:where(pre > *) {
    padding: 0;
  }
}

/* Extends https://github.com/PrismJS/prism/blob/master/plugins/treeview/prism-treeview.css */
.token.treeview-part {
  .entry-line {
    width: 2.5em !important;
    opacity: 25%;
  }
  .entry-name:last-child {
    opacity: 50%;

    &::before {
      display: none !important;
    }
  }
}
/*```
<!--section--> */