/**
 * Title: Shape Metal
 * Slug: emulsion/shape-metal
 * Categories: contents, emulsion, recently-added
 * Viewport Width: 1280
 * Inserter: yes
 * Keywords: shape
 * Description: Show blocks as metal shapes
 */

.is-style-metal-shape[class] {
    box-sizing:border-box;
    padding-right:var( --wp--custom--padding--content, .75rem );
    padding-left:var( --wp--custom--padding--content, .75rem );
    margin:1.5rem auto;
    font-weight:700;
    color:#fff;
    background:url(../images/metal.jpg);
    border: 18px solid transparent;
    border-radius: 18px;
    -moz-border-image: url(../images/border-image.png) 30 30 30 30 repeat repeat;
    -webkit-border-image: url(../images/border-image.png) 30 30 30 30 fill repeat;
    -o-border-image: url(../images/border-image.png) 30 30 30 30 fill repeat;
    border-image: url(../images/border-image.png) 30 30 30 30 fill repeat;
    p{
        //is-presentation-theme
        color:#fff;
    }

}
.is-style-metal-text-shadow{
    text-shadow: 1px 4px 6px #000, 0 0 0 #000, 1px 4px 6px #000;
    .has-text-color{
        text-shadow:none;
    }
}
.is-presentation-theme .is-style-metal-shape p

/**
 * Title: Shape Receipt
 * Slug: emulsion/shape-receipt
 * Categories: contents, emulsion, recently-added
 * Viewport Width: 1280
 * Inserter: yes
 * Keywords: shape
 * Description: emulsion test
 */
.is-presentation-theme .is-style-receipt-shape,
.is-style-receipt-shape {
    position: relative;
    flex: none;
    padding:1rem;
    clip-path: polygon(100% 0, 100% calc(100% - 6px), 98% 100%, 96% calc(100% - 6px), 94% 100%, 92% calc(100% - 6px), 90% 100%, 88% calc(100% - 6px), 86% 100%, 84% calc(100% - 6px), 82% 100%, 80% calc(100% - 6px), 78% 100%, 76% calc(100% - 6px), 74% 100%, 72% calc(100% - 6px), 70% 100%, 68% calc(100% - 6px), 66% 100%, 64% calc(100% - 6px), 62% 100%, 60% calc(100% - 6px), 58% 100%, 56% calc(100% - 6px), 54% 100%, 52% calc(100% - 6px), 50% 100%, 48% calc(100% - 6px), 46% 100%, 44% calc(100% - 6px), 42% 100%, 40% calc(100% - 6px), 38% 100%, 36% calc(100% - 6px), 34% 100%, 32% calc(100% - 6px), 30% 100%, 28% calc(100% - 6px), 26% 100%, 24% calc(100% - 6px), 22% 100%, 20% calc(100% - 6px), 18% 100%, 16% calc(100% - 6px), 14% 100%, 12% calc(100% - 6px), 10% 100%, 8% calc(100% - 6px), 6% 100%, 4% calc(100% - 6px), 2% 100%, 0 calc(100% - 6px), 0 0);
    color:#eee;
    background:#000;
}
.is-presentation-theme .is-style-receipt-shape p{
    color:#eee;
}


/**
 * Title: Columns footer
 * Slug: emulsion/footer-columns
 * Categories: pattern-footer, emulsion
 * Viewport Width: 1280
 * Block Types: core/template-part/footer
 * Inserter: yes
 * Keywords: emulsion
 * Description: emulsion test
 */
.is-root-container .emulsion-columns-footer{
    width:100%;
    margin:0 auto;
}

.emulsion-columns-footer{
    overflow:auto !important;
    background: var(--wp--custom--color--banner-bg);

    ul{
        padding:0;
        margin-top:-.5rem
    }
    .wp-block-site-title{
        margin:1.5rem auto;
    }
}

.emulsion .emulsion-columns-footer .wp-block-site-title{
    margin:1.5rem auto;
}
.emulsion .emulsion-columns-footer .wp-block-search{
    padding:1.5rem;
}

/**
 * Title: Speech Bubble
 * Slug: emulsion/shape-speech-bubble
 * Categories: contents, emulsion, recently-added
 * Viewport Width: 1280
 * Inserter: yes
 * Keywords: shape
 * Description: Show blocks as metal shapes
 */

.shape-speech-bubble{
    .wp-block-column{
        position:relative;
        .wp-block-image{
            background:transparent;
            img{
                margin:auto;
            }
        }
        &.text:before{
            position: absolute;
            display: inline-block;
            width: 1rem;
            height: 1rem;
            content: '';
            background: inherit;
        }

        &.text:last-child{
            &:before{
                top:calc(50% - 0.5rem);
                left:-.9rem;
                clip-path: polygon(100% 0, 0 50%, 100% 100%);
            }
        }
        &.text:first-child{
            &:before{
                top:calc(50% - 0.5rem);
                right:-.9rem;
                clip-path: polygon(0 0, 0 100%, 100% 50%);
            }
        }

        @media screen and ( max-width : 600px ) {
            &.text:last-child{
                &:before{
                    top:-.9rem;
                    left:calc(50% - 0.5rem);
                    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
                }
            }
            &.text:first-child{
                order:1;
                &:before{
                    top:-.9rem;
                    left:calc(50% - 0.5rem);
                    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);


                }
            }


        }

    }
}


/**
 * Title: Presentation TAB
 * Slug: emulsion/block-pattern-list-tab
 * Categories: contents, emulsion
 * Viewport Width: 1280
 * Inserter: yes
 * Keywords: shape
 * Description: Tabs on the front end
 *
 * front end only style
 * class that transforms a nested list into a tab view
 */
.editor-styles-wrapper .emulsion-block-pattern-list-tab.is-selected{
    border:1px dashed;
    &:before{
        display:inline-block;
        padding:var( --wp--custom--padding--content, .75rem );
        margin-bottom:1rem;
        color:white;
        content:'emulsion block pattern list tab';
        background:#333;
    }
}
.list-style-tab{
    margin:1.5rem auto .75rem;
    &.success-js{
        position:relative;
        margin-top:1.5rem;
        margin-bottom:.75rem;
        overflow:hidden;
        list-style:none;
        & > li{
            float:left;
            padding:.75rem 1rem;
            margin-top:0;
            margin-right:3px;
            margin-bottom:0;
            clear:none;
            text-indent:0;
            list-style:none;
            visibility:visible;
            border:var(--wp--custom--border--common);
            &:before{
                visibility:hidden;
                outline:none;
            }
            &:hover{
                cursor:pointer;
            }
            &:focus,
                &.active{
                visibility:visible;
                outline:none;
            }
            &:after{
                position:absolute;
                top:calc(var(--wp--preset--font-size--medium,20px) * 3);
                right:0;
                left:0;
                box-sizing:inherit;
                display:block;
                content:'';
                border-top:var(--wp--custom--border--common);
            }
            ol,
            ul{
                position:absolute;
                left:0;
                width:100%;
                padding:var( --wp--custom--padding--content, .75rem );
                margin-top:.75rem;
                list-style-type:none;
                visibility:hidden;
                li{
                    text-indent:0;
                    &:before{
                        display:none;
                    }
                }
            }
            &:focus{
                ul{
                    top:calc(clamp(var(--wp--preset--font-size--normal), calc( 100vw / 72 * 1.5), var(--wp--preset--font-size--medium)) * 3);
                    visibility:visible;
                    &:before,
                        &:after {
                        display: table;
                        content: " ";
                    }
                    &:after {
                        clear: both;
                    }
                }
            }
        }
        &.has-background{
            & > li{
                &:after{
                    top:4rem;
                }
            }
        }
    }
}
.list-style-tab.success-js{
    & > li{
        &.active{
            background:rgba(188, 188, 188, 0.5);
        }
    }
}
.emulsion{
    div:not(.fse-columns){
        .wp-block-column:not(.is-style-main)  .list-style-tab > li{
            padding:.75rem 1rem;
        }
    }
}
/**
 * Title: Presentation Modal Box
 * Slug: emulsion/block-pattern-modal
 * Categories: contents, emulsion
 * Viewport Width: 1280
 * Inserter: yes
 * Keywords: shape
 * Description: Modal Box on the front end
 */
/**
        * .modal
 */
.emulsion:not(.block-editor-page){
    &:not(.agent-mobile-phone){
        .modal-open-link + .modal,
        [id|="modal-group"].is-opened,
        [id|="modal-group"].modal{
            visibility:hidden;
            .emulsion-modal-title{
                visibility:visible;
            }
            .modal-close-link{
                visibility:hidden;
            }
        }
        .modal-open-link a{
            pointer-events:none;
        }
        .modal-open-link:focus-within + .modal,
            [id|="modal-group"].is-opened,
            [id|="modal-group"]:target.modal{
            position:fixed;
            top:100px;
            right:0;
            bottom:auto;
            left:0;
            z-index:10000;
            max-height:var(--wp--custom--min-height--3-quarters, 75vh);
            overflow-y:auto;
            visibility:visible;
            filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.3));
            &.alignwide{
                position:fixed;
            }
            &.alignfull{
                position:fixed;
            }
            .modal-close-link{
                visibility:visible;
            }
        }
    }
    &.agent-mobile-phone{
        .modal-open-link{
            display:none;
        }
        .wp-block-group.modal{
            position:static;
            overflow:visible;
            visibility:visible;
            .emulsion-modal-title{
                display:none;
            }
        }
    }
    .wp-block-group.modal{
        position:absolute;
        left:-9999px;
        padding:0;
        overflow:hidden;
        color:#333;
        visibility:hidden;
        background:#fff;
        border:1px solid;
        .emulsion-modal-title{
            width:100%;
            padding:.5rem;
            margin:var(--wp--custom--margin--container);
            border:none;
            border-color:transparent;
            .modal-close-link{
                padding-left:1.5rem;
                &:hover{
                    cursor:pointer;
                }
            }
        }
        .emulsion-modal-content{
            width:100%;
            margin-top:0;
        }
    }
}
[amp]{
    .article-wrapper{
        box-sizing:border-box;
        padding-right:var( --wp--custom--padding--content, .75rem );
        padding-left:var( --wp--custom--padding--content, .75rem );
        margin:var(--wp--custom--margin--block);
    }
    .emulsion{
        .modal-open-link{
            display:none;
        }
        &:not(.block-editor-page):not(.agent-mobile-phone) [id|="modal-group"].modal{
            visibility:visible;
            .emulsion-modal-title{
                display:none;
            }
        }
        .wp-block-group.modal{
            position:relative;
            left:0;
            padding:0;
            overflow:hidden;
            color:#333;
            visibility:visible;
            background:#fff;
        }
    }
}
/**
 * Title: Sticky posts
 * Slug: emulsion/block-pattern-query-sticky
 * Categories: sub-query
 * Viewport Width: 1280
 * Inserter: yes
 * Keywords: sticky posts, emulsion
 * Description: Sticky posts query
 */
.emulsion{
    /**
         * Sticky Posts
      * After the second page name, there seems to be a problem that the .sticky class is not added
      * It is not possible to determine if this behavior is intentional in the core
      */
    /**
     * block-pattern-query-sticky.php
     */
    .is-root-container{
        .pattern-sticky-posts{
            &:before{
                content:'Sticky Posts';
            }
        }
    }
    .wp-block-query.pattern-sticky-posts{
        .is-flex-container,
        .is-layout-flex{
            //width:100%;
        }
        .wp-block-query-pagination{
            //Inheriting a query prevents front-end display
            display:none;
        }
    }
    .pattern-sticky-posts{
        .wp-block-post-title{
            &:before{
                position:relative;
                display:inline-block;
                font-size:1.15rem;
                color:currentColor;
                vertical-align:top;
                content:'\1f4cc';
            }
        }
    }
    .pattern-sticky-posts{
        .is-flex-container,
        .is-layout-flex{
            padding:0!important;
            overflow:visible;
            .wp-block-post-title{
                &:before{
                    position:absolute;
                    top:0;
                    right:0;
                    bottom:0;
                    display:inline-block;
                    font-size:1.15rem;
                    color:currentColor;
                    vertical-align:top;
                    content:'\1f4cc';
                }
            }
        }
    }
    .pattern-sticky-posts{
        & ~ main .wp-block-query{
            padding-top:0;
        }
        &.wp-block-query{
            & > ul:not(.is-flex-container):not(.is-layout-flex):not(.specificity){
                .loop-item{
                    position:static;
                    margin:0;
                }
                .post-header{
                    display:block;
                    width:100%;
                    min-height:0;
                }
                .wp-block-post-featured-image{
                    display:block;
                    width:100%;
                    min-height:0;
                }
            }
            .is-flex-container,
            .is-layout-flex{
                min-height: var(--wp--custom--min-height--quarter);
                overflow:hidden;
                article{
                    .post-header{
                        min-height:0;
                        margin:0;
                        .post-header-content{
                            margin:0
                        }
                    }
                }
            }
            & > ul{
                padding:0;
            }
        }
        .post-header{
            min-height:0;
        }
        .loop-item{
            .wp-block-post-featured-image img{
                padding:0;
            }
        }
        .has-post-thumbnail{
            .wp-block-post-excerpt{
                display:none;
            }
        }
        .is-flex-container,
        .is-layout-flex{
            gap:var(--wp--style--block-gap, .75rem);
        }
    }
    &.paged .pattern-sticky-posts{
        display:none;
    }
}

/**
 * Title: Relate posts
 * Slug: emulsion/block-pattern-relate-posts
 * Categories: sub-query
 * Viewport Width: 1280
 * Inserter: yes
 * Keywords: emulsion, relate posts
 * Description: Relate posts the front end
 */
/**
         * Relate posts
 */
/**
        * .emulsion-block-pattern-relate-posts
 */
.emulsion .emulsion-block-pattern-relate-posts,
.emulsion .wrap-emulsion_relate_posts{
    .relate-posts-title{
        padding-right:var(--wp--custom--padding--content);
        padding-left:var(--wp--custom--padding--content);
        margin:1.5rem auto;
    }
    .relate-posts{
        padding-right:var(--wp--custom--padding--content);
        padding-left:var(--wp--custom--padding--content);
        margin:0 auto;
        li{
            display:flex;
            height:48px;
            margin-bottom:6px;
            vertical-align:middle;
            list-style:none;
            &:not(#specificity):before{
                display:none;
            }
            img{
                width:auto;
                max-width:48px;
                height:48px;
                padding-right:0;
                padding-left:0;
                margin-right:0;
                margin-left:0;
                vertical-align:middle;
            }
            .relate-post-no-icon + a,
            img + a{
                display:inline-block;
                max-width:calc( 100% - 48px - 2rem );
                height:100%;
                margin-left:var(--wp--custom--padding--content, .75rem);
                overflow: hidden;
                font-weight:700;
                line-height:48px;
                text-overflow: ellipsis;
                white-space: nowrap;
                vertical-align:middle;
            }
            .relate-post-no-icon{
                display:inline-block;
                width:46px;
                height:46px;
                padding:0;
                font-size:1.5rem;
                line-height:46px;
                text-align:center;
                text-transform: uppercase;
                vertical-align:middle;
                border:var(--wp--custom--border--common);
                background:var(--wp--preset--color--base);
            }
        }
    }
    &:empty{
        display:none;
    }
}
.post-footer{
    clear:both;
    .emulsion-block-pattern-relate-posts,
    .wrap-emulsion_relate_posts{
        box-sizing:border-box;
        padding:0 0 0 0;
        margin:var(--wp--custom--margin--container);
        overflow:hidden;
        width:100%;
    }
}
.emulsion .wp-block-post-content{
    .emulsion-block-pattern-relate-posts,
    .wrap-emulsion_relate_posts{
        box-sizing:border-box;
        padding:0 0 0 0;
        margin:var(--wp--custom--margin--container);
        overflow:hidden;
        padding:0;
    }
}
.wp-block-post-content{
    & > .emulsion-block-pattern-relate-posts.is-style-list-style-inline{
        @media (min-width: 48rem){
            &:not(.specificity){
                max-width:calc( 100% - var(--wp--custom--padding--content,.75rem) * 2);
                margin-right: calc(50% - var(--wp--style--global--content-size) / 2 );
                margin-left: calc(50% - var(--wp--style--global--content-size) / 2 );
                &.wp-block-table{
                    width:calc(  var(--wp--style--global--content-size) - var(--wp--custom--padding--content,.75rem) * 2);
                }
                &.alignfull{
                    width:var(--wp--custom--width--full);
                    margin-left:0;
                }
                &.alignwide{
                    max-width:calc( var(--wp--style--global--wide-size) - var(--wp--custom--padding--content,.75rem) * 2);
                    margin-right: calc(50% - var(--wp--style--global--wide-size) / 2 );
                    margin-left: calc(50% - var(--wp--style--global--wide-size) / 2 );
                    &.wp-block-table{
                        width:calc(  var(--wp--style--global--content-size) - var(--wp--custom--padding--content,.75rem) * 2);
                    }
                }
                &.is-layout-default:not(.is-root-container),
                    &.is-layout-flow:not(.is-root-container),
                    &.has-fluid-children{
                    margin-right:auto;
                    margin-left:auto;
                }
                &.alignleft{
                    width:var(--wp--custom--width--float);
                    margin:var(--wp--custom--margin--alignleft);
                }
                &.alignright{
                    width:var(--wp--custom--width--float);
                    margin:var(--wp--custom--margin--alignright);
                }
                &.aligncenter{
                    margin-right:auto;
                    margin-left:auto;
                }
                .wp-block-columns{
                    margin:auto;
                    .wp-block-column{
                        .wp-block-separator{
                            margin:auto;
                            border:1px solid;
                        }
                        .wp-block-buttons{
                            margin:auto;
                        }
                    }
                }
                & > .alignfull,
                & > .alignwide{
                    margin:auto;
                }
            }
        }
        @media (min-width: 968px){
            &:not(.specificity){
                &.alignwide{
                    max-width:var(--wp-custom--width--wide,57.5rem);
                    margin-right:calc(50% - var(--wp-custom--width--wide,57.5rem) / 2);
                    margin-left:calc(50% - var(--wp-custom--width--wide,57.5rem) / 2);
                    &.wp-block-table{
                        width:var(--wp-custom--width--wide,57.5rem);
                    }
                    & > .alignfull,
                    & > .alignwide{
                        margin:auto;
                    }
                }
            }
        }
        &:not(.wp-block-table):not(.fse-header-content){
            &.alignfull{
                float:none;
                width:auto;
                margin:var(--wp--custom--margin--container);
                clear:both;
                & > .alignfull,
                & > .alignwide{
                    margin:auto;
                }
            }
        }
    }
}
.emulsion .emulsion-block-pattern-relate-posts{
    box-sizing:border-box;
    padding:0 0 0 0;
    margin:var(--wp--custom--margin--container);
    overflow:hidden;
    width:100%;
    .relate-posts{
        overflow:visible;
        li{
            .relate-post-no-icon{
                position:relative;
                &:before{
                    position: absolute;
                    top: 0;
                    left: 0;
                    z-index:2;
                    width: 100%;
                    height: 100%;
                    content: "";
                    background-image: linear-gradient(to right bottom, transparent 49.9%, var(--wp--custom--border--common-color) 50%, transparent 50.1%);
                }
            }
        }
        &.is-style-list-style-inline{
            display:flex;
            flex-wrap:wrap;
            .columns-default{
                flex-wrap:nowrap;
            }
            &.is-nowrap{
                flex-wrap:nowrap;
            }
            gap:var(--wp--style--block-gap, .75rem);
            --wp--style--block-gap:var(--wp--custom--margin--gap, .75rem);
            li{
                margin:0;
            }
        }
    }
}
.emulsion .is-root-container .emulsion-block-pattern-relate-posts{
    .relate-posts li{
        padding:0;
        [role="textbox"]{
            width:100%;
        }
    }
}
.wp-block-post-content{
    .wrap-emulsion_relate_posts{
        background:transparent;
    }
}
/**
 * Title: Call to action
 * Slug: emulsion/call-to-action
 * Categories: contents, emulsion
 * Viewport Width: 1280
 * Inserter: yes
 * Description: Call to action block','Block pattern description
 */
#emulsion .is-style-call-to-action{
    & > *{
        margin-top:1.5rem;
        margin-bottom:1.5rem;
    }
}
/**
 * Title: File Not Found
 * Slug: emulsion/page-404
 * Categories: contents, emulsion, recently-added
 * Viewport Width: 1280
 * Inserter: no
 * Keywords: shape
 * Description: Message page if file not found
 */

/**
 * Title: Magic Layout
 * Block Types: core/post-content
 * Slug: emulsion/magic-layout
 * Categories: recently-added, layout, emulsion
 * Inserter: yes
 * Keywords: page
 * Description: Custom Layout Pattern
 */
.emulsion-pattern-magic-layout{
    .wp-block-image:not(.alignleft):not(.alignright){
        background: var(--wp--custom--color--featured-image-bg);
    }
}