.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;
}

iframe.kb-pattern-preview.kbsd-animating {
    transition: width 0.35s ease-in-out, height 0.35s ease-in-out, transform 0.35s ease-in-out;
}


/* 
.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;
}


/* Viewport Switcher */

.kbsd-viewport-switcher {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-start: 1.5rem;
    margin-block-end: 0.5rem;
    max-width: var(--wp--style--global--wide-size);
    margin-bottom: -.5em;
}

.kbsd-viewport-group,
.kbsd-lang-switcher {
    display: flex;
    position: relative;
    background: #e0e0e0;
    border-radius: 0.625rem;
    padding: 3px;
}

.kbsd-viewport-group::before,
.kbsd-lang-switcher::before {
    content: '';
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc((100% - 6px) / var(--button-count, 1));
    background: #fff;
    border-radius: 0.45rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14);
    transform: translateX(calc(var(--active-index, 0) * 100%));
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.kbsd-viewport-group button.wp-element-button,
.kbsd-lang-switcher button.wp-element-button {
    position: relative;
    z-index: 1;
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    padding: 0.4em 0.875em;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    color: #666;
    border-radius: 0.45rem;
    transition: color 0.22s;
    white-space: nowrap;
    cursor: pointer;
}

.kbsd-viewport-group button.wp-element-button.is-active,
.kbsd-lang-switcher button.wp-element-button.is-active {
    color: #111;
}

.kbsd-viewport-group button.wp-element-button:hover,
.kbsd-lang-switcher button.wp-element-button:hover {
    background-color: transparent !important;
    background-image: none !important;
    color: #333;
}

.kbsd-lang-switcher {
    margin-inline-start: auto;
}

.kbsd-viewport-switcher .kbsd-open-link {
    display: inline-flex;
    align-items: center;
    gap: .25em;
    font-size: 0.875rem;
}


/* 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);
    }
}