/**
 * 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;
}
.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: Recipe
 * Block Types: core/post-content
 * Slug: emulsion/shape-recipe
 * Categories: contents, emulsion, recently-added
 * Viewport Width: 1280
 * Inserter: yes
 * Keywords: shape
 * Description: Show blocks as metal shapes
 */
.has-content-pattern-shape-recipe{
    .post-header{
        color:#fff;
        background:#EB1D36;
        a{
            color:#ccc;
        }
    }

}

.shape-recipe{

    [role="tab"]{
        font-weight:700;
        color:#fff;
        background:#EB1D36;
        &[aria-selected="true"].active{
            color:#fff;
            background:#000;
        }
        ul{
            color:#000;

        }

    }
}