axis-test.sss

:root
  // font stack
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif
  --helvetica: 'Helvetica Neue', Helvetica, Arial, sans-serif
  --helvetica-neue: 'Helvetica Neue', HelveticaNeue, Helvetica, Arial, sans-serif
  --serif: Georgia, Cambria, 'Times New Roman', Times, serif
  --monospace: Monaco, Menlo, Consolas, 'Courier New', monospace

  // defaults
  --base-font-size: 16px
  --global-border-radius: 3px

  // colors
  --base-gray:       #767d84  // allows all grays to have consistent tint
  --color-primary:   #0074D9
  --color-secondary: #D13F19
  --color-accent:    #c25

  --code
    background-color: color(var(--base-gray) lightness(96%))
    border: 1px solid color(var(--base-gray) lightness(85%))
    border-radius: var(--global-border-radius)
    color: var(--color-accent)
    font-family: var(--monospace)
    font-size: .72rem
    line-height: .72rem
    padding: 1px 3px
    white-space: normal

  --pre
    background-color: color(var(--base-gray) lightness(96%))
    border: 1px solid color(var(--base-gray) lightness(80%))
    border-radius: var(--global-border-radius)
    display: block
    font-family: var(--monospace)
    font-size: .75rem
    line-height: 1.15rem
    margin: 0 0 12px
    padding: .5rem
    white-space: pre-wrap

  // Additive Apply: Code blocks
  --code-blocks
    & code
      @apply --code
    & pre
      @apply --pre