//- ----------------------------------
//- 💥 LAYOUT
//- ----------------------------------

//- Layout

body
    background: $page-bg
    padding: 3rem

//- Objects

.o-container
    font: #{$type-base}/#{1.375} $font-primary
    background: $color-back

.o-slide
    background: $color-back
    font-size: 2.25rem

    &.o-slide--center
        text-align: center

    a
        border-bottom: 2px solid $color-theme

.o-block,
p
    margin-bottom: 3rem

.o-icon
    vertical-align: middle
    margin-right: 0.75rem


//- Utilities

.u-color-theme
    color: $color-theme

.u-color-subtle
    color: $color-subtle-dark

.u-text-small.u-text-small
    font-size: 1.75rem

.u-text-tiny.u-text-tiny
    font-size: 1rem

.u-heading
    margin-bottom: 2rem

@each $level, $size in (1: 6, 2: 4, 3: 3, 4: 2.8, 5: 2.5)
    .u-heading-#{$level}
        font: normal bold #{$size}rem/#{1.25} $font-primary


//- Components


//- List Container

.c-list
    @each $type, $counter in (numbers: decimal, letters: upper-latin, roman: lower-roman)
        &.c-list--#{$type}
            counter-reset: li

            .c-list__item:before
                content: counter(li, #{$counter}) '.'


//- List Item

.c-list__item
    padding-left: 2rem
    margin-bottom: 0.5em
    margin-left: 1.25rem

    &:before
        color: $color-theme
        content: '\25CF'
        display: inline-block
        font-size: 1em
        font-weight: bold
        padding-right: 1.25rem
        margin-left: -3.75rem
        text-align: right
        width: 2.5rem
        counter-increment: li

    & > .o-block
        margin-top: 2rem


//- Code block

.c-code-block
    background: $color-front
    color: $color-back
    padding: 0.75em 0
    border-radius: 2px
    overflow: auto
    width: 100%
    max-width: 100%
    white-space: pre
    direction: ltr


//- Code block content

.c-code-block__content
    display: block
    font: normal 600 1.5rem/#{2} $font-code
    padding: 1em 2em


//- Inline code

*:not(.c-code-block) > code
    font: normal 600 0.8em/#{1} $font-code
    background: $color-subtle
    color: $color-front
    padding: 0.1em 0.5em
    margin: 0
    border-radius: 1px
    text-shadow: none


//- 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
