/* Embedded content
   ========================================================================== */

/**
 * Add the correct display in IE 11.
 */

audio,
video {
    display: inline-block;
}

/**
 * Make embedded elements responsive.
 */

img,
video {
    max-width: 100%;
    height: auto;
}

/**
 * Images.
 *
 * 1. Remove the gap between images and the bottom of their containers.
 *
 * Image alignment (compatible with Textile markup syntax).
 *
 * Example HTML:
 *
 * <img class="align-left">
 * <img class="align-right">
 * <img class="align-center">
 */

img {
    /* 1 */
    vertical-align: middle;

    &.align-left {
        margin: 1em 1em 1em 0;
        float: left; // TODO: use CSS Text Module Level 3 `start` value when browser support is widespread.
    }

    &.align-right {
        margin: 1em 0 1em 1em;
        float: right; // TODO: use CSS Text Module Level 3 `end` value when browser support is widespread.
    }

    &.align-center {
        display: block;
        margin: 1em auto;
    }
}

/**
 * Swap image alignment right/left positions in RTL languages.
 */

[dir="rtl"] img {
    &.align-left {
        margin: 1em 0 1em 1em;
        float: right;
    }

    &.align-right {
        margin: 1em 1em 1em 0;
        float: left;
    }
}

/**
 * Content images and content images with links.
 *
 * Example HTML:
 *
 * <a>
 *     <img class="content-image">
 * </a>
 */

.content-image {
    border: solid 1px $color-border;
    background: $color-background;

    a:hover & {
        border-color: $color-link-hover;
    }

    a:focus & {
        border-color: $color-link-focus;
    }
}

@include dark-mode {
    .content-image {
        border-color: $dark-color-border;
        background-color: $dark-color-background;

        a:hover & {
            border-color: $dark-color-link-hover;
        }

        a:focus & {
            border-color: $dark-color-link-focus;
        }
    }
}

/**
 * Limit vertical height of fullsize images.
 */

.fullsize-image .content-image {
    max-height: 85vh;
    object-fit: contain;
}