// /**
//  * Copyright Â© Magento, Inc. All rights reserved.
//  * See COPYING.txt for license details.
//  */

.lib-font-face(
    @family-name: @font-family-name__base,
    @font-path: '@{baseDir}fonts/opensans/light/opensans-300',
    @font-style: normal,
    @font-weight: @font-weight__light
);

.lib-font-face(
    @family-name: @font-family-name__base,
    @font-path: '@{baseDir}fonts/opensans/regular/opensans-400',
    @font-style: normal,
    @font-weight: @font-weight__regular
);

.lib-font-face(
    @family-name: @font-family-name__base,
    @font-path: '@{baseDir}fonts/opensans/semibold/opensans-600',
    @font-style: normal,
    @font-weight: @font-weight__semibold
);

.lib-font-face(
    @family-name: @font-family-name__base,
    @font-path: '@{baseDir}fonts/opensans/bold/opensans-700',
    @font-style: normal,
    @font-weight: @font-weight__bold
);

body {
    .lib-typography(
        @_color: @text__color,
        @_font-family: @font-family__base,
        @_font-size: @font-size__base,
        @_font-style: @font-style__base,
        @_font-weight: @font-weight__regular,
        @_line-height: @line-height__base
    );
}

.pagebuilder-stage {
    //
    //  Headings
    //  ---------------------------------------------

    h1 {
        margin: 0 0 40px;

        .lib-typography(
            @_color: @color-gray20,
            @_font-family: false,
            @_font-size: 40px,
            @_font-style: false,
            @_font-weight: @font-weight__light,
            @_line-height: 44px
        );
    }

    h2 {
        margin: 25px 0 20px;

        .lib-typography(
            @_color: @color-gray20,
            @_font-family: false,
            @_font-size: 26px,
            @_font-style: false,
            @_font-weight: @font-weight__light,
            @_line-height: 1.1
        );
    }

    h3 {
        margin: 20px 0 10px;

        .lib-typography(
            @_color: @color-gray20,
            @_font-family: false,
            @_font-size: 18px,
            @_font-style: false,
            @_font-weight: @font-weight__semibold,
            @_line-height: 1.1
        );
    }

    h4 {
        margin: 20px 0;

        .lib-typography(
            @_color: @color-gray20,
            @_font-family: false,
            @_font-size: 14px,
            @_font-style: false,
            @_font-weight: @font-weight__bold,
            @_line-height: 1.1
        );
    }

    h5 {
        margin: 20px 0;

        .lib-typography(
            @_color: @color-gray20,
            @_font-family: false,
            @_font-size: 12px,
            @_font-style: false,
            @_font-weight: @font-weight__bold,
            @_line-height: 1.1
        );
    }

    h6 {
        margin: 20px 0;

        .lib-typography(
            @_color: @color-gray20,
            @_font-family: false,
            @_font-size: 10px,
            @_font-style: false,
            @_font-weight: @font-weight__bold,
            @_line-height: 1.1
        );
    }

    //
    //  Text
    //
    p {
        color: @color-gray20;
        font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: 14px;
        font-style: normal;
        font-weight: @font-weight__regular;
        line-height: 20px;
        margin: 0 0 10px;
    }

    pre {
        background-color: @color-white-smoke;
        border: @pre__border-width solid @color-gray80;
        color: @color-black;
        font-family: @font-family__monospace;
        font-size: @code__font-size;
        font-style: normal;
        font-weight: @font-weight__regular;
        line-height: 1.1;
        margin-bottom: 10px;
        padding: 10px;
    }

    .cms-content-important {
        background-color: @color-white-smoke;
        color: @color-gray20;
        font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: 22px;
        font-style: normal;
        font-weight: 300;
        line-height: 1.1;
        margin: 0 0 35px;
        padding: 20px;
    }

    .magento-placeholder {
        background: @placeholder-background;
        box-sizing: initial;
        color: @color-black;
        cursor: pointer;
        display: inline-block;
        font-size: 14px;
        font-style: normal;
        font-weight: normal;
        height: 20px;
        margin: 0 5px;
        outline: 2px solid @placeholder-outline;
        padding: 2px 4px;
        vertical-align: bottom;
        word-break: break-all;
    }

    .magento-placeholder-error {
        display: inline-block;
        height: 20px;
        margin: 0 5px;
        outline: 2px solid @placeholder-error-outline;
        padding: 2px 4px;
        vertical-align: bottom;

        img {
            display: none;
        }

        &:before {
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABWUlEQVR42qVTS07DMBD1pggqcQAQEofINbrNvh977Au04gJtxZYiVZwLJJasAhJJ3LBrI4Xwxm3SKErCz9Koqec9e/xmnhBYdjK5tlo/R8ZsI63XIdGFqK1QSg+5MNY6scbMXobDU5eIpbyKiaZIpLExOX4/cdg6IOoXZP6OlbpDPjtgUks0y4l6An8esbl1iUPghgyA5ZPvnzAo0XphC/IRkyZKKVEnl8GVEK04+LsRY8yb4HJbAVpnLprJmVVqIcLx+DIieqiX2Bl8ITQB93wv0mDQb3pnGxkXLqsiu8WCufd2H5KBfM/Yepv/d0Du+2c/fQJjIilvyyfwhLEgvxHR7itZORFjHs82clcbuRNazwXm/uOvg4RKAoFSbkofVMjJN6MMzG5DNBI5XAVDTeG0XaE0a9JpJviADejM5LrgeT1UMsJmAOC8nLCqnbG3QQ6Y13ciWbTyC+DUOUqNY1A2AAAAAElFTkSuQmCC);
            background-position-x: 1px;
            background-position-y: 1px;
            background-repeat: no-repeat;
            content: '';
            display: inline-block;
            height: inherit;
            margin-right: 4px;
            vertical-align: middle;
            width: 20px;
        }

        &[data-mce-selected] {
            outline: 2px solid @placeholder-error-outline-mce;
        }
    }
    
    .magento-placeholder-error,
    .magento-placeholder {
        img {
            display: inline-block;
            margin-right: 5px;
            max-height: 20px;
            vertical-align: middle;
        }
    }
}
