@layer components {
  pre,[is-~=pre] {
    --pre-background: var(--background1);
    background-color:var(--pre-background);
    white-space:pre-wrap;
    color:var(--foreground0);
    font-family:var(--font-family);
    font-size:var(--font-size);
    font-weight:var(--font-weight-normal);
    line-height:var(--line-height);
    outline:none;
    border:none;
    padding:1lh 1ch
  }

  pre[size-=small],[is-~=pre][size-=small] {
    padding:0 1ch
  }

  pre:not([size-]),[is-~=pre]:not([size-]) {
    background-color:transparent;
    background-image:linear-gradient(to bottom,transparent,transparent .5lh,var(--pre-background) .5lh,var(--pre-background) calc(100% - .5lh),transparent calc(100% - .5lh),transparent)
  }
}