$web-figures: true !default;
@if $web-figures {

    // Figures

    .figure {
        clear: both;
        page-break-inside: avoid;
        background-color: inherit;
        font-family: $font-text-secondary;
        font-size: inherit;
        font-weight: inherit;
        margin: $line-height-default 0;
        padding: 0;
        p {
            clear: both;
            text-align: left;
            page-break-inside: avoid;
            page-break-before: avoid;
            hyphens: none;
            &:last-of-type {
                margin-bottom: 0;
            }
        }
        img, p img {
            display: block;
            margin: 0 auto;
            width: 100%;
        }

        // Enable removing max-height on a figure's images
        &.web-max-height-none {
            img, p img {
                max-height: none;
            }
        }

        .figure-body {
            .figure-images {
                text-align: center;
                margin-bottom: $line-height-default;
            }
            .figure-html, .figure-md {
                margin-bottom: $line-height-default;
            }
            .title {}
            // Descriptions are hidden by default, and used for image alt text
            .description {
                display: none;
            }
            .caption {
                line-height: $line-height-default;
                margin: 0;
                text-align: left;
                text-indent: 0;
                .figure-reference {
                    font-weight: bold;
                }
            }
        }
        // Paragraphs following the image inside the blockquote
        // Allow for up to five
        .caption,
        p:nth-child(2),
        p:nth-child(2) + p,
        p:nth-child(2) + p + p,
        p:nth-child(2) + p + p + p,
        p:nth-child(2) + p + p + p + p {
            padding: 0;
            text-align: left;
            text-indent: 0;
        }
        // Deprecated classes commented out, here for reference
        // &.x-small, &.small, &.large {
        //     p img, img {
        //         max-height: inherit;
        //     }
        // }
        // @media screen and (min-width: $break-width-small) {
        //     &.large {
        //         img, p img {
        //             max-height: $break-width-small;
        //         }
        //     }
        // }

        // Thumbnail figures
        &.thumbnail, &.web-thumbnail {
            max-width: 25%;
            float: right;
            margin: 0 0 0 $paragraph-indent;
            padding: 0;
            img {
                padding: 0;
            }
        }
    }

    // Paragraphs that start with an image
    .image-with-caption {
        font-size: $font-size-default * $font-size-smaller;
        margin: $line-height-default 0;
        text-align: left;
        img {
            display: block;
            margin: $line-height-default auto;
            max-height: 80vh;
            max-width: 100%;
        }
        & + p {
            text-indent: 0;
        }
    }

}
