// Vars
@image-margin: 5px;
@table-border: 1px solid #DDD;
@blockquote-level1-color: #5E35B1;
@blockquote-level2-color: #00BCD4;
@blockquote-level3-color: #43A047;
@editor-text: #000;

.image-style() {
    img {
        position: relative;
        max-width: 100%;

        &.fr-dib {
            margin: @image-margin auto;
            display: block;
            float: none;
            vertical-align: top;

            &.fr-fil {
                margin-left: 0;
            }

            &.fr-fir {
                margin-right: 0;
            }
        }

        &.fr-dii {
            display: inline-block;
            float: none;
            vertical-align: bottom;
            margin-left: @image-margin;
            margin-right: @image-margin;
            max-width: calc(100% - (2 * @image-margin));

            &.fr-fil {
                float: left;
                margin: @image-margin @image-margin @image-margin 0;
                max-width: calc(100% - @image-margin);
            }

            &.fr-fir {
                float: right;
                margin: @image-margin 0 @image-margin @image-margin;
                max-width: calc(100% - @image-margin);
            }
        }
    }
}

.video-style() {
    .fr-video {
        text-align: center;
        position: relative;

        > * {
            .box-sizing(content-box);
            max-width: 100%;
            border: none;
        }

        &.fr-dvb {
            display: block;
            clear: both;

            &.fr-fvl {
                text-align: left;
            }

            &.fr-fvr {
                text-align: right;
            }
        }

        &.fr-dvi {
            display: inline-block;

            &.fr-fvl {
                float: left;
            }

            &.fr-fvr {
                float: right;
            }
        }
    }
}

.fr-view {
    strong {
        font-weight: 700;
    }

    table {
        border: none;
        border-collapse: collapse;
        empty-cells: show;
        max-width: 100%;

        td, th {
            border: @table-border;

            &:empty {
                height: 20px;
            }
        }

        th {
            background: mix(white, @editor-text, 90%);;
        }
    }

    hr {
        clear: both;
        .user-select(none);
        page-break-after: always;
    }

    .fr-file {
        position: relative;

        &::after {
            position: relative;
            content: "\1F4CE";
            font-weight: normal;
        }
    }

    pre {
        white-space: pre-wrap;
        word-wrap: break-word;
    }

    blockquote {
        border-left: solid 2px @blockquote-level1-color;
        margin-left: 0;
        padding-left: 5px;
        color: @blockquote-level1-color;

        blockquote {
            border-color: @blockquote-level2-color;
            color: @blockquote-level2-color;

            blockquote {
                border-color: @blockquote-level3-color;
                color: @blockquote-level3-color;
            }
        }
    }

    span.fr-emoticon {
        font-weight: normal;
        font-family: "Apple Color Emoji","Segoe UI Emoji","NotoColorEmoji","Segoe UI Symbol","Android Emoji","EmojiSymbols";
        display: inline;
        line-height: 0;

        &.fr-emoticon-img {
            background-repeat: no-repeat !important;
            font-size: inherit;
            height: 1em;
            width: 1em;
            min-height: 20px;
            min-width: 20px;
            display: inline-block;
            margin: -.1em .1em .1em;
            line-height: 1;
            vertical-align: middle;
        }
    }

    .image-style();

    .video-style();
}