// Media
//
// A media is either an image or a video, displayed with caption and/or credit mention.
// - **Video**: videos are made responsive, on the basis of a 16/9 ratio
// - **Empty media**: if the media (image or video) is not available for any reason, the block display a default N/A image instead
//
// Markup: media.twig
//
// Styleguide: Elements.Media

// Media Video
//
// Videos are made responsive, on the basis of a 16/9 ratio
//
// .media-wrap-video-1_1 - 1/1 video ratio
// .media-wrap-video-4_3 - 4/3 video ratio
// .media-wrap-video-5_3 - 5/3 video ratio
//
// Markup: media-video.twig
//
// Styleguide: Elements.Media.Video

// Media Empty
//
// If the media (image or video) is not available for any reason, the block display a default N/A image instead
//
// Markup: media-empty.twig
//
// Styleguide: Elements.Media.Empty
/:root
/[data-theme=light]
/[data-theme] [data-theme=light]
    --media-bg-color lighten($color-theme-default, 80%)

/[data-theme=dark]
/[data-theme] [data-theme=dark]
    --media-bg-color $color-black

.media
    position relative

    iframe
        display block
        width 100%

    img
        display block
        width 100%
        height auto
        background-color var(--media-bg-color)
        background-image svgImport($mediaPlaceholder, $mediaPlaceholder-style)
        background-size 65% 65%
        background-position 50%
        background-repeat no-repeat

    &-caption
    figcaption
        _pt(.5)
        font-size .85em
        color var(--color-primary)
        line-height 1.2

    &-wrap
        position relative

        &-video
            width 100%
            height 0
            padding-bottom 56.25% // 16/9

            > iframe
                position absolute
                top 0
                left 0
                height 100%

            &-1_1
                padding-bottom 100% // 1/1

            &-4_3
                padding-bottom 75% // 4/3

            &-5_3
                padding-bottom 60% // 5/3