//  Variables
// ============================================================================

$code-background            : color(grey, light)
$code-background-dark       : color(black)
$code-block-border          : 4px solid color($theme)
$code-block-padding         : 2em 3em
$code-block-padding-small   : 1em 1.5em
$code-inline-margin         : 0.25em 0.5em 0 0.5em
$code-inline-padding        : 0 0.25rem
$code-line-height           : 2.25
$code-text-shadow           : 1px 1px 0 color(white)


//  Style
// ============================================================================

//  General code style
//  .code-inline - source code
//  .code-small  - smaller style

.code-inline
    @extend .text-code
    direction: ltr
    text-shadow: $code-text-shadow
    white-space: pre
    word-spacing: normal
    word-break: normal

.code-small
    @extend .text-small
    padding-top: 0
    padding-bottom: 0


//  Inline Code
//  :not(.code-block) - style for items outside of code blocks

code
    @extend .code-inline

:not(.code-block) > .code-inline
    background: $code-background
    display: inline
    line-height: inherit
    margin: $code-inline-margin
    padding: $code-inline-padding


//  Code blocks in preformatted text
//  .code-block       - block of source code
//  .code             - text content of code blocks
//  [data-label]      - style of code labels
//  .code-block-small - smaller style
//  .code-block-dark  - alternative dark style

.code-block
    @extend .block
    background: $code-background
    border-left: $code-block-border
    max-width: 100%
    overflow: auto
    padding: 1em 0
    white-space: pre
    width: 100%

    .code-inline
        display: block
        padding: $code-block-padding

    &[data-label]:before
        @extend .label-box

.code-block-small
    @extend .code-small

    .code-inline
        padding: $code-block-padding-small

.code-block-dark
    @extend .code-block
    background: $code-background-dark
    border: none
    color: color(white)

    .code-inline
        text-shadow: none