.pre
    position: relative
    background: var(--color-front)
    color: var(--color-subtle)
    border-radius: var(--border-radius)
    overflow: auto
    width: 100%
    max-width: 100%
    white-space: pre
    direction: ltr
    margin-bottom: var(--spacing-md)

.max-height
    height: 450px

.code,
.juniper-input pre,
.juniper-output
    font: var(--font-size-code)/var(--line-height-code) var(--font-code) !important
    font-variant-ligatures: none !important
    -webkit-font-smoothing: subpixel-antialiased
    -moz-osx-font-smoothing: auto

.code,
.juniper-input pre
    display: block
    padding: 1.75em 1.5em

.code
    &[data-prompt]:before,
        content: attr(data-prompt)
        margin-right: 0.65em
        display: inline-block
        vertical-align: middle
        opacity: 0.5

.inline-code
    color: var(--color-inline-code-text)
    font-size: 90%
    background-color: var(--color-inline-code-bg)
    padding: 0.2rem 0.4rem
    border-radius: 0.25rem
    font-family: var(--font-code)
    margin: 0
    box-decoration-break: clone
    white-space: nowrap
    text-shadow: none
    font-variant-ligatures: none
    -webkit-font-smoothing: subpixel-antialiased
    -moz-osx-font-smoothing: auto

    a &
        color: inherit

.inline-code-dark
    --color-inline-code-text: var(--color-back)
    --color-inline-code-bg: var(--color-dark-secondary)

.type-annotation,
    white-space: pre-wrap
    font-family: var(--font-code)

    &.wrap
        word-wrap: break-word

    a
        border: 0

    // Special style for types in API tables
    td > &:last-child
        display: block
        border-top: 1px dotted var(--color-subtle)
        border-radius: 0
        background: none
        width: calc(100% + 2rem)
        margin-left: -1rem
        padding-left: 1rem
        padding-top: 5px
        margin-top: 5px
        margin-bottom: -5px

        &:before
            content: "Type: "
            opacity: 0.75
            font-family: var(--font-primary)
            color: var(--color-dark-secondary)
            font-weight: bold
            text-transform: uppercase
            margin-right: 5px

.type-annotation-meta
    font-size: 90%
    color: var(--color-subtle-dark)

.wrap
    white-space: pre-wrap
    word-wrap: anywhere

.title,
.juniper-button
    font: bold var(--font-size-lg)/var(--line-height-md) var(--font-secondary)
    text-transform: uppercase
    display: inline-block
    border-radius: 1em
    padding: 0 1rem 0.15rem
    color: var(--color-back)

.title
    box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25)
    background: var(--color-dark)
    margin: 1.5rem 0 0 2rem

.header
    width: 100%
    background: var(--color-front)
    position: sticky
    top: -0.75rem
    margin-top: -0.75rem
    border-top-left-radius: var(--border-radius)
    border-top-right-radius: var(--border-radius)
    padding: 1.25rem 1rem 1rem
    font-size: var(--font-size-sm)

.juniper-wrapper
    background: var(--color-dark-secondary)
    padding: 5px

.juniper-title
    font: bold var(--font-size-sm)/var(--line-height-sm) var(--font-primary)
    text-align: center
    padding: 0.25rem 1rem 0.5rem
    display: flex
    justify-content: space-between

.juniper-cell
    border: 0
    background: var(--color-front)
    padding: 1rem 0

.juniper-input
    padding-top: 1rem
    padding-bottom: 2rem
    padding-left: 2rem
    background: var(--color-front)

    & > div
        padding: 0
        height: auto

.juniper-output
    font: var(--font-size-xs) var(--font-code)

.juniper-button
    transition: background-color 0.15s ease
    background: var(--color-theme)
    margin: 0.5rem 0 1rem 2rem

    &:hover
        background: var(--color-theme-dark)

.juniper-meta
    font-size: var(--font-size-xs)
    font-weight: normal
    padding-top: 0.1rem
    color: var(--color-subtle-dark)