// main: ../../css/editor-style.scss
@import '../global/font-import';
@import "../global/variables";
@import "../global/mixins";
@import '../global/colors';
@import "../helpers/helpers";
@import "../application/components/blog";

.wp-block {
    max-width: 1200px;
}

.wp-block[data-align=full] {
    max-width: none;
}

.wp-block[data-align=wide] {
    max-width: 1500px;
}

.wp-block-group.has-background {
    padding: 0;
}

.container-fluid {
    padding-left : 0;
    padding-right: 0;
}

.edit-post-visual-editor__post-title-wrapper {

    .wp-block-post-title {
        font-size  : 40px;
        font-family: $heading-font-family;
    }
}

.editor-styles-wrapper {
    padding               : 0 !important;
    font-size             : 10px !important;
    color                 : $base-font-family !important;
    text-rendering        : optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    font-family: $base-font-family;

    .section-heading {
        margin-bottom: 2em;
        border-bottom: 1px solid var(--grey-20-color );
        padding-bottom: 1em;

        .title {
            position      : relative;
            display: inline-block;
            float: left;
            margin        : 0;
            font-size     : 2.8rem;
            line-height   : 3rem;
            font-family   : 'Oswald', sans-serif;
            text-transform: uppercase;
        }
        .cat-link {
          position      : relative;
          display: inline-block;
          float: right;
          font-size     : 1.2rem;
          line-height   : 3rem;
          color: var(--grey-60-color );
          font-weight: 600;
          a {
            color: inherit;
          }
        }

        &:after {
          content: '';
          display: block;
          clear: both;
          width: 100%;
        }
    }


    .block-editor-block-list__layout {
        .h1,
        .h2,
        .h3,
        .h4,
        .h5,
        .h6 {
            color      : $heading-color;
            font-family: $heading-font-family;
            font-weight: $heading-font-weight;
        }

        .paragraph-text {
            font-family: $base-font-family;
            font-size  : $base-font-size;
            line-height: $base-font-line-height;
            font-weight: $base-font-weight;
            @media only screen and (min-width: 46em) {
                font-size  : 1.4em;
                line-height: $base-font-line-height;
            }
            @media only screen and (min-width: 61em) {
                font-size  : 1.6em;
                line-height: $base-font-line-height;
            }
        }

        .h1,
        h1 {
            @extend .h1;
            font-size: 4em;
        }

        .h2,
        h2 {
            @extend .h2;
            font-size: 3.5em;
        }

        .h3,
        h3 {
            @extend .h3;
            font-size: 3em;
        }

        .h4,
        h4 {
            @extend .h4;
            font-size: 2.5em;
        }

        .h5,
        h5 {
            @extend .h5;
            font-size: 1.6em;
        }

        .h6,
        h6 {
            @extend .h6;
            font-size: 1.4em;
        }

        ol,
        p,
        ul,
        textarea,
        input {
            @extend .paragraph-text;
        }
    }
}