/* ---------------------------------
 *    Article Summary and Content
 * --------------------------------- */
$article-font-size ?= 1.1rem

article
    &.media
        color: $text-light

        a
            color: inherit

            &:hover
                color: $primary

        .image
            width: 64px
            height: 64px

            img
                object-fit: cover
                width: 100%
                height: 100%

        .title
            @extend .is-size-6
            margin-bottom: .25em

        .date, .categories
            @extend .is-size-7

        .categories
            @extend .is-uppercase

        .media-content
            color: $text-light

            .title
                margin: 0
                line-height: inherit

    &.article
        .article-meta, .article-tags
            color: $text-light

        .article-meta
            overflow-x: auto
            margin-bottom: .5rem

        .article-more
            @extend .button.is-light

        .content
            word-wrap: break-word
            font-size: $article-font-size

            h1
                font-size: 1.75em

            h2
                font-size: 1.5em

            h3
                font-size: 1.25em

            h4
                font-size: 1.125em

            h5
                font-size: 1em

            pre
                font-size: .85em

            code
                padding: 0
                background: transparent
                overflow-wrap: break-word

            blockquote
                &.pullquote
                    float: right
                    max-width: 50%
                    font-size: 1.15rem
                    position: relative

                footer
                    strong + cite
                        margin-left: .5em

            .message.message-immersive
                border-radius: 0
                margin: 0 0 - $card-content-padding $card-content-padding 0 - $card-content-padding

                .message-body
                    border: none

.rtl
    direction: rtl

    .level
        &, &.is-mobile
            .level-item:not(:last-child)
                margin-left: .75rem
                margin-right: 0

// Overflow table
.table-overflow
    overflow-x: auto

    table
        width: auto !important

        th
            word-break: keep-all

// Video container
.video-container
    position: relative
    padding-bottom: 56.25%
    padding-top: 25px
    height: 0

    iframe
        position: absolute
        top: 0
        left: 0
        width: 100%
        height: 100%

.article-licensing
    position: relative
    z-index: 1
    box-shadow: none
    background: $white-ter
    border-radius: $radius
    overflow: hidden

    &:after
        position: absolute
        z-index: -1
        right: -50px
        top: -87.87px
        content: '\f25e'
        font-size: 200px
        font-family: 'Font Awesome 5 Brands'
        opacity: .1

    .level-left
        flex-wrap: wrap
        max-width: 100%

    .licensing-title
        @extend .mb-3
        line-height: 1.2

        p:not(:last-child)
            @extend .mb-1

        a
            @extend .is-size-7, .has-text-grey

    .licensing-meta
        .level-item
            @extend .mr-4

        .icon
            @extend .mr-1
            width: 1.2em
            height: 1.2em
            font-size: 1.2em
            vertical-align: bottom

        h6
            @extend .is-size-7

        a
            color: inherit

a
    &.article-nav-prev
        span
            text-align: left
            flex-shrink: 1
            word-wrap: break-word
            white-space: normal

    &.article-nav-next
        span
            text-align: right
            flex-shrink: 1
            word-wrap: break-word
            white-space: normal