@import '../../../scss/vendor/modularscale';
@import '../../../scss/variables.scss';
@import '../../../scss/mixins.scss';


.editor > .editor-inner {
    font-size: var(--editor-font-size);

    & > .wrapper > div {
        color: var(--text-primary-color);
        -webkit-font-smoothing: antialiased;
        font-family: var(--editor-font-family);
        font-size: 1em;
        font-weight: var(--font-weight-normal);
        line-height: $line-height;
       
        a:not(.btn):not(.publii-block-toc a) {
            @include links (var(--link-invert-color), var(--link-invert-color), var(--link-invert-color), var(--link-invert-color));
        }

        p,
        ul,
        ol,
        dl,
        table,
        hr,
        blockquote,
        figure,
        pre,
        table,
        script {
            margin: 0;
        }


        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            color: var(--headings-color);
            font-family: var(--font-base);
            font-weight: var(--font-weight-bold);
            letter-spacing: var(--letter-spacing);
            line-height: 1.3;
            margin: 0;
            text-transform: none;
        }

        h1 {
            font-size: $h1;
            margin: 0;
        }
        
        h2 {
            font-size: $h2;
        }
        
        h3 {
            font-size: $h3;
        }
        
        h4 {
            font-size: $h4;
        }
        
        h5 {
            font-size: $h5;
        }
        
        h6 {
            font-size: $h6;
        }
        

        b,
        strong {
            color: var(--headings-color);
            font-weight: var(--font-weight-bold);
        }

        blockquote {
            border-left: 2px solid var(--gray-3);
            font-family: var(--font-serif);
            font-style: italic;
            padding: 0 0 0 baseline(5,em);
        }

        ul,
        ol {
            padding: 0 0 0 2em;

            & > li {
                list-style: inherit;
                padding-left: baseline(2,em);
            }

            ul,
            ol {
                margin-bottom: baseline(2,em);
                margin-top: baseline(2,em);
            }
        }

        code {
            background-color: rgba(var(--warning-rgb), .15);
            border-radius: 2px;
            color: var(--warning);
            font-size: ms(-1);
            font-family: var(--font-monospace);
            padding: baseline(1,em) baseline(2,em);
        }

        pre {
            font-size: ms(-1);
            padding: baseline(6,em);
            white-space: pre-wrap;
            word-wrap: break-word;
            width: 100%;

            code {
                color: inherit !important;
            }
        }

        figcaption {
            color: var(--text-light-color);
            font-size: ms(-1);
            text-align: center;
        }
        
        label {
            color: var(--label-color);
            font-weight: var(--font-weight-normal);
        }
        
        .msg {
            border: 1px solid transparent;
            border-radius: 3px;
            padding: baseline(4,em);

            &--highlight {
                background-color: rgba(var(--yellow), .1);
                border-color: rgba(var(--yellow), .5);
            }
        
            &--info {
                background-color: rgba(var(--color-primary-rgb), .1);
                border-color: rgba(var(--color-primary-rgb), .5);
            }
        
            &--success {
                background-color: rgba(var(--success-rgb), .1);
                border-color: rgba(var(--success-rgb), .51);
            }
        
            &--warning {
                background-color: rgba(var(--warning-rgb), .1);
                border-color: rgba(var(--warning-rgb), .5);
            }
        }
    }
}
