//- ----------------------------------
//- 💫 COMPONENTS > CODE
//- ----------------------------------

//- Code block

.c-code-block
    background: $color-subtle-light
    padding: 1em 0
    border-left: 5px solid $color-theme
    overflow: auto
    width: 100%
    max-width: 100%
    white-space: pre
    direction: ltr

    :not(.o-block)
        margin-bottom: 2rem


//- Code block content

.c-code-block__content
    display: block
    padding: 2em 2.5em


//- Code block label

.c-code-block__label
    display: inline-block
    background: $color-theme
    color: $color-back
    padding: 1rem
    margin-bottom: 1.5rem


//- Inline code

:not(.c-code-block) > code
    @extend .u-code-small

    background: $color-subtle-light
    box-shadow: 1px 1px 0 $color-subtle
    color: $color-front
    padding: 0.15em 0.5em
    margin: 0 0.25em
    border-radius: 2px
    text-shadow: 1px 1px 0 $color-back


//- Syntax Highlighting

[class*="language-"] .token
    &.comment, &.prolog, &.doctype, &.cdata, &.punctuation
        color: map-get($syntax-highlighting, comment)

    &.property, &.tag, &.constant, &.symbol, &.deleted
        color: map-get($syntax-highlighting, tag)

    &.boolean, &.number
        color: map-get($syntax-highlighting, number)

    &.selector, &.attr-name, &.string, &.char, &.builtin, &.inserted
        color: map-get($syntax-highlighting, selector)

    @at-root .language-css .token.string,
    &.operator, &.entity, &.url, &.variable
        color: map-get($syntax-highlighting, operator)

    &.atrule, &.attr-value, &.function
        color: map-get($syntax-highlighting, function)

    &.regex, &.important
        color: map-get($syntax-highlighting, regex)

    &.keyword
        color: map-get($syntax-highlighting, keyword)

    &.italic
        font-style: italic