.kb-pattern-preview {
    /* transition: .15s width ease-in-out;
     */
    margin-block: 2em;
    margin-inline: auto;
    position: relative;
    z-index: 1;
    /* max-width: calc(100vw - 2em) !important;
    max-height: calc(100vh - 8em) !important; */
    min-width: 100px;
    box-shadow: 0 10px 20px 2px rgb(0 0 0 / 20%), 0 2px 80px 10px rgb(0 0 0 / 10%);
    border: none;
    margin-bottom: 2em !important;
    margin-top: 1em !important;
    resize: both; /* Ermöglicht Größenänderung in beide Richtungen */
            overflow: auto; /* Stellt sicher, dass der Inhalt gescrollt wird, falls er größer als der Div ist */
}

div.kb-pattern-preview {
    padding: 1em;
}

iframe.kb-pattern-preview {
    width: 100%;
    max-width: 1280px;
    min-width: 320px;
    min-height: 120px;
    box-sizing: border-box;
    padding: 0;
    border-radius: 1rem;
}


/* 
.kb-pattern-preview > * {
    overflow: hidden;
}

.kb-pattern-preview .resizer {
    width: .5em;
    height: calc(100% - 4em);
    background: #999;
    border-radius: 100px;
    position: absolute;
    top: 2em;
    bottom: 2em;
    right: -1.5em;
    cursor: ew-resize;
}

.kb-pattern-preview .resizer:hover, 
.kb-pattern-preview .resizer:focus {
    background: #666;
}  */

h2 + iframe {
    margin-block-start: 0 !important;
}

iframe[src*="figma.com"] {
  max-width: 100% !important;
}


/* highlight dynamic patterns */

.single-patterns,
.single-template,
[class*="page-template-single-template-demo"] {

    .wp-block-query,
    .wp-block-comment-template {
        outline: 1px solid #c28af3;
        outline-offset: .25rem;
        position: relative;

        &::before {
            content: 'Loop';
            position: absolute;
            top: calc(-.25rem - 1px);
            right: calc(-.25rem - 1px);
            background: #c28af3;
            color: white;
            font-size: 10px;
            padding: .25em .5em;
            font-family: sans-serif;
            z-index: 2;
        }
    }

    .wp-block-site-logo img,
    .wp-block-avatar img,
    .wc-block-cart-item__image img {
        outline: 1px solid #c28af370;
        position: relative;
        outline-offset: 1px;
    }

    .wp-block-post-featured-image,
    .wc-block-components-product-image {
        outline: 1px solid #c28af370;
        position: relative;

        &::before {
            content: 'Featured Image';
            position: absolute;
            display: block;
            background: #c28af370;
            color: white;
            font-size: 10px;
            padding: .25rem .5rem;
            font-family: sans-serif;
            z-index: 2;
        }
    }

    .wp-block-navigation,
    .wp-block-navigation-custom,
    .wp-block-site-title,
    .wp-block-site-tagline,
    .wp-block-post-title,
    .wp-block-post-date,
    .wp-block-post-content,
    .wp-block-post-terms,
    .wp-block-post-author,
    .wp-block-post-author-name,
    .wp-block-post-author-biography,
    .wp-block-post-excerpt__excerpt,
    .wp-block-comment-author-name,
    .wp-block-comment-date,
    .wp-block-comment-content,
    .logged-in-as,
    .wp-block-comments-title, 
    .wc-block-components-product-price,
    .wc-block-components-product-summary,
    .wc-block-components-product-metadata__description,
    .wc-block-components-product-name,
    .wc-block-components-formatted-money-amount,
    .tag-cloud-link  {
        background-image: repeating-linear-gradient(135deg, #c28af370, #c28af370 1px, transparent 1px, transparent 4px);
    }
}