@import "../_variables.css";

.ckeditor-content {
    .mce-content-body {
        line-height: 1.5;
        margin: 0.769rem; /* 1rem = 13px / 13 */
        font-size: var(--font-size-18); /* 16px / 13 */

        small {
            font-size: 1.077rem; /* 14px / 13 */
        }

        blockquote {
            font-size: initial;
        }

        strong,
        strong em,
        em strong {
            font-weight: bold;
        }

        em {
            font-style: italic;
        }

        h1, h2, h3, h4, h5, h6 {
            font-weight: bold;
            line-height: 1.2em;
            text-transform: none;
            margin: 0.769rem 0; /* 1rem = 13px / 13 */
        }

        h1 {
            font-size: 2.0rem;
        }

        h2 {
            font-size: 1.7rem;
        }

        h3 {
            font-size: 1.5rem;
        }

        h4 {
            font-size: 1.3rem;
        }

        h5 {
            font-size: 1.2rem;
        }

        h6 {
            font-size: 1.1rem;
        }

        hr {
            border-style: solid;
            border-width: 1px 0 0 0;
        }

        code {
            border-radius: 0.231rem; /* 3px / 13 */
            padding: 0.077rem 0.154rem; /* 1px / 13, 2px / 13 */
            background-color: #f5f2f0;
            color: #222;
            font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
        }

        a {
            color: #0782C1;
            text-decoration: underline;
        }

        &:not([dir="rtl"]) blockquote {
            border-left: 0.154rem solid; /* 2px / 13 */
            margin-left: 1.154rem; /* 1.5rem = 20px / 13 */
            padding-left: 0.769rem; /* 1rem = 13px / 13 */
        }

        &[dir="rtl"] blockquote {
            border-right: 0.154rem solid; /* 2px / 13 */
            margin-right: 1.154rem; /* 1.5rem = 20px / 13 */
            padding-right: 0.769rem; /* 1rem = 13px / 13 */
        }

        figure {
            display: table;
            margin-top: 0.769rem; /* 1rem = 13px / 13 */
            margin-bottom: 0.769rem; /* 1rem = 13px / 13 */

            &:first-child {
                margin-top: 0;
            }

            figcaption {
                margin-top: 0.385rem; /* 5px / 13 */
                display: table-caption;
                caption-side: bottom;
                line-height: 1.3em;
                font-size: 1.077rem; /* 14px / 13 */
                color: #777;
            }
        }

        .align_right, .align-right, .right {
            text-align: right;
            float: none;
        }

        .align_left, .align-left, .left {
            text-align: left;
            float: none;
        }

        .align_center, .align-center, .center {
            text-align: center;
        }

        .align_full, .align-full, .full {
            text-align: justify;
        }

        img, figure, table {
            &.align_right, &.align-right, &.right {
                text-align: initial;
                float: right;
                margin-left: 0.769rem; /* 1rem = 13px / 13 */
                margin-right: 0;
                margin-top: 0;
            }

            &.align_left, &.align-left, &.left {
                text-align: initial;
                float: left;
                margin-top: 0;
                margin-left: 0;
                margin-right: 0.769rem; /* 1rem = 13px / 13 */
            }

            &.align_center, &.align-center, &.center {
                text-align: initial;
                display: block;
                margin-left: auto;
                margin-right: auto;
            }

            &.align_full, &.align-full, &.full {
                text-align: initial;
                width: 100%;
            }
        }

        img {
            max-width: 100%;

            &.align_center, &.align-center, &.center {
                display: block;
            }

            &:hover {
                opacity: .9;
                filter: alpha(opacity=90);
            }

            a > & {
                padding: 0.077rem; /* 1px / 13 */
                margin: 0.077rem; /* 1px / 13 */
                border: none;
                outline: 0.077rem solid #0782C1; /* 1px / 13 */
            }
        }

        pre {
            color: #333;
            border: 0.077rem dashed #ccc; /* 1px / 13 */
            padding: 0.385rem 0.769rem !important; /* 0.5rem = 6.5px / 13, 1rem = 13px / 13 */
            white-space: pre-wrap;
            word-wrap: break-word;
            -moz-tab-size: 4;
            -o-tab-size: 4;
            -webkit-tab-size: 4;
            tab-size: 4;

            code {
                background-color: initial;
            }

            &[class*=language-] {
                font-size: 0.721rem; /* 0.9375rem = 12px / 13 */
                background: #f5f2f0;
                margin: 0.385rem 0; /* 0.5em = 6.5px / 13 */
                padding: 0.385rem 0.769rem; /* 0.5rem = 6.5px / 13, 1rem = 13px / 13 */
                color: #777;
            }
        }
    }
}

.ckeditor-content {
    .ckeditor-content-description {
        ul {
            display: block;
            list-style-type: disc;
            margin-block-start: 1em;
            margin-block-end: 1em;
            padding-inline-start: 3.077rem; /* 40px / 13 */
            unicode-bidi: isolate;
        }

        ol {
            display: block;
            list-style-type: decimal;
            margin-block-start: 1em;
            margin-block-end: 1em;
            padding-inline-start: 3.077rem; /* 40px / 13 */
            unicode-bidi: isolate;
        }

        li {
            display: list-item;
            text-align: -webkit-match-parent;
            unicode-bidi: isolate;
        }

        blockquote {
            display: block;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 3.077rem; /* 40px / 13 */
            margin-inline-end: 3.077rem; /* 40px / 13 */
            unicode-bidi: isolate;
            border-color: #ccc;
            font-style: italic;
            margin: 0;
            padding: 0 0.769rem; /* 1rem = 13px / 13 */
            border-left: 0.154rem solid; /* 2px / 13 */
            margin-left: 1.154rem; /* 1.5rem = 20px / 13 */
            padding-left: 0.769rem; /* 1rem = 13px / 13 */
        }

        a {
            color: #0782C1;
            text-decoration: underline;
        }

        table:not([cellpadding]) td,
        table:not([cellpadding]) th {
            padding: 0.308rem; /* 4px / 13 */
        }

        table[border]:not([border="0"]):not([style*="border-width"]) td,
        table[border]:not([border="0"]):not([style*="border-width"]) th {
            border-width: 0.077rem; /* 1px / 13 */
        }

        table[border]:not([border="0"]):not([style*="border-style"]) td,
        table[border]:not([border="0"]):not([style*="border-style"]) th {
            border-style: solid;
        }

        table[border]:not([border="0"]):not([style*="border-color"]) td,
        table[border]:not([border="0"]):not([style*="border-color"]) th {
            border-color: #ccc;
        }

        span[lang] {
            font-style: italic;
        }

        table {
            border-collapse: collapse;
        }

        small {
            font-size: 1.077rem; /* 14px / 13 */
        }

        ol, ul, dl {
            *margin-right: 0;
            padding: 0 3.077rem; /* 40px / 13 */
        }

        h1, h2, h3, h4, h5, h6 {
            font-weight: bold;
            line-height: 1.2em;
        }

        hr {
            border: 0;
            border-top: 0.077rem solid #ccc; /* 1px / 13 */
        }

        figure {
            display: table;
            margin: 0.769rem 0; /* 1em = 13px / 13 */
        }

        figure figcaption {
            display: table-caption;
            caption-side: bottom;
            line-height: 1.3em;
            color: #777;
            font-size: 1rem; /* 13px / 13 */
        }

        img {
            max-width: 100%;
        }

        img.right,
        img.align_right,
        img.align-right,
        figure.align_right,
        figure.align-right {
            float: right;
            margin-left: 1.154rem; /* 15px / 13 */
            margin-right: 0;
            margin-top: 0;
        }

        img.left,
        img.align_left,
        img.align-left,
        figure.align_left,
        figure.align-left {
            float: left;
            margin-top: 0;
            margin-left: 0;
            margin-right: 1.154rem; /* 15px / 13 */
        }

        img.align_center,
        img.align-center,
        figure.align_center,
        figure.align-center {
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

        img.hidpi {
            /* RCD */
        }

        img:hover {
            opacity: .9;
            filter: alpha(opacity=90);
        }

        pre {
            color: #333;
            border: 0.077rem dashed #ccc; /* 1px / 13 */
            padding: 0.385rem 0.769rem !important; /* 0.5rem = 6.5px / 13, 1rem = 13px / 13 */
            white-space: pre-wrap;
            word-wrap: break-word;
            -moz-tab-size: 4;
            -o-tab-size: 4;
            -webkit-tab-size: 4;
            tab-size: 4;
            font-size: initial;
        }

        .marker {
            background-color: Yellow;
        }

        span[lang] {
            font-style: italic;
        }

        code {
            border-radius: 0.231rem; /* 3px / 13 */
            padding: 0.077rem 0.154rem; /* 1px / 13, 2px / 13 */
            background-color: #f5f2f0;
            color: #222;
            font-size: initial;
            font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
        }

        a > img {
            padding: 0.077rem; /* 1px / 13 */
            margin: 0.077rem; /* 1px / 13 */
            border: none;
            outline: 0.077rem solid #0782C1; /* 1px / 13 */
        }

        sub {
            vertical-align: sub;
            font-size: smaller;
            bottom: 0;
            line-height: normal;
        }

        sup {
            vertical-align: super;
            font-size: smaller;
            bottom: 0;
            top: 0;
            line-height: normal;
        }
    }
}