html {
    --wp--preset--spacing--05: calc((7px * 0.5) + ((7vw * 0.5) / 3.2));
    --wp--preset--spacing--10: calc((10px * 0.5) + ((10vw * 0.5) / 3.2));
    --wp--preset--spacing--20: calc((15px * 0.55) + ((15vw * 0.45) / 3.2));
    --wp--preset--spacing--30: calc((22px * 0.75) + ((22vw * 0.25) / 3.2));
    --wp--preset--spacing--40: calc((30px * 0.75) + ((30vw * 0.25) / 3.2));
    --wp--preset--spacing--50: calc((40px * 0.8) + ((40vw * 0.2) / 3.2));
    --wp--preset--spacing--60: calc((60px * 0.75) + ((60vw * 0.25) / 3.2));
    --wp--preset--spacing--70: calc((100px * 0.8) + ((100vw * 0.2) / 3.2));
    --wp--preset--spacing--80: calc((200px * 0.8) + ((200vw * 0.2) / 3.2));
    --wp--preset--spacing--mega: calc((425px * 0.8) + ((425vw * 0.2) / 3.2));
    --nav-height: 0px;
    --wp--preset--spacing--nav-height: 0px;
}

:root {
    --trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23000' d='M216 48h-40v-8a24 24 0 0 0-24-24h-48a24 24 0 0 0-24 24v8H40a8 8 0 0 0 0 16h8v144a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16V64h8a8 8 0 0 0 0-16M96 40a8 8 0 0 1 8-8h48a8 8 0 0 1 8 8v8H96Zm96 168H64V64h128Zm-80-104v64a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0m48 0v64a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0'/%3E%3C/svg%3E");

    --wp--image-height--xx-short: 175px;
    --wp--image-height--x-short: 210px;
    --wp--image-height--short: 250px;
    --wp--image-height--regular: 300px;
    --wp--image-height--tall: 340px;
    --wp--image-height--hero: 375px;

    --wp--icon--x-small: 30px;
    --wp--icon--small: 50px;
    --wp--icon--medium: 75px;
    --wp--icon--large: 110px;
    --wp--icon--extra-large: 150px;
}
@media screen and (min-width:600px) {
    :root {
        --wp--image-height--xx-short: 200px;
        --wp--image-height--x-short: 250px;
        --wp--image-height--short: 300px;
        --wp--image-height--regular: 350px;
        --wp--image-height--tall: 400px;
        --wp--image-height--hero: 450px;

        --wp--icon--x-small: calc(.75rem + 30px);
        --wp--icon--small: calc(1rem + 50px);
        --wp--icon--medium: calc(1.5rem + 75px);
        --wp--icon--large: calc(2rem + 110px);
        --wp--icon--extra-large: calc(2.5rem + 150px);
    }
}
@media screen and (orientation:portrait) {
    :root {
        --wp--image-height--xx-short: calc( var(--view-height, 100vh) * .2 );
        --wp--image-height--x-short: calc( var(--view-height, 100vh) * .225 );
        --wp--image-height--short: calc( var(--view-height, 100vh) * .275 );
        --wp--image-height--regular: calc( var(--view-height, 100vh) * .35 );
        --wp--image-height--tall: calc( var(--view-height, 100vh) * .45 );
        --wp--image-height--hero: calc( var(--view-height, 100vh) * .6 );
    }
}
@media screen and (min-width:768px) and (orientation:portrait) {
	body {
        --wp--image-height--xx-short: calc( var(--view-height, 100vh) * .225 );
        --wp--image-height--x-short: calc( var(--view-height, 100vh) * .25 );
        --wp--image-height--short: calc( var(--view-height, 100vh) * .325 );
        --wp--image-height--regular: calc( var(--view-height, 100vh) * .4 );
        --wp--image-height--tall: calc( var(--view-height, 100vh) * .45 );
        --wp--image-height--hero: calc( var(--view-height, 100vh) * .5 );
	}
}
@media screen and (min-width:900px) and (orientation: landscape) {
    body {
        --wp--image-height--xx-short: calc( var(--view-height, 100vh) * .3 );
        --wp--image-height--x-short: calc( var(--view-height, 100vh) * .4 );
        --wp--image-height--short: calc( var(--view-height, 100vh) * .5 );
        --wp--image-height--regular: calc( var(--view-height, 100vh) * .6 );
        --wp--image-height--tall: calc( var(--view-height, 100vh) * .7 );
        --wp--image-height--hero: calc( var(--view-height, 100vh) * .95 );;
    }
}

html.block-editor-block-preview__content-iframe body.block-editor-iframe__body {
    --wp--image-height--x-short: 175px;
    --wp--image-height--short: 250px;
    --wp--image-height--regular: 300px;
    --wp--image-height--tall: 340px;
    --wp--image-height--hero: 375px;
    .wp-block-slate-responsive-header {
        padding: 15px 5vw !important;
    }
}

/* /////////// */
/* Editor Wrapper Div */
/* /////////// */
.wp-site-blocks, .editor-styles-wrapper {
  container-name: body-container;
  container-type: inline-size;
}

/* @container body-container (max-width:900px) {
    div {
        color: red !important
    }
} */

/* ///////////
// Icons
//////////// */
svg.slate-block-icon {
    color: #4be992;
}

/* ///////////////////
// Remove Image 
//////////////////// */
button.has-button-icon::after {
    width: 1.2em;
    height: 1.2em;
    min-width: 1.2em;
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    mask-position: center center;
}
button.icon-trash::after {
    content: '';
    --svg: var(--trash);
}
button.remove-image {
    background: red;
    border: 1px solid firebrick;
    color: snow;
    padding: .5em 1em;
    display: inline-flex;
    gap: .7ch;
    transition: background .3s ease, color .3s ease;
}
button.remove-image:hover,
button.remove-image:focus {
    background: snow;
    color: red;
}
.has-remove-image-button {
    position: relative;

    button.remove-image {
        position: absolute;
        left: 0px;
        display: none;
        bottom: 0;
        transform: translateY(50%);
    }
    &.is-selected {
        overflow: visible;
    }
    &.is-selected button.remove-image {
        display: flex;
        z-index: 9;
    }
    button.remove-image:hover {
        cursor: pointer;
    }
}
.wp-block-slate-responsive-image.is-selected > .block-editor-media-placeholder {
    height: max-content;
}

/* ///////////
// Sliders
//////////// */
/* ////// Content Area ////// */
.components-button.add-images-button {
    display: none;
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: snow;
    z-index: 99;
}

.is-selected {
    .swiper-wrapper {
        overflow-x: auto;
    }
    .components-button.add-images-button {
        display: block;
    }
}

.has-child-selected {
    .swiper-wrapper {
        overflow-x: auto;
    }
    .components-button.add-images-button {
        display: block;
    }
}

/* ////// Sidebar ////// */
.sidebar-thumbnail-container {
    display: grid;
    gap: 10px;
    margin-top: 24px;
}
.sidebar-thumbnail-container>h3 {
    margin-bottom: 0;
}
.sidebar-thumbnails:not(:empty) {
    display: grid;
    gap: 20px;
    padding: 12px;
    border: 1px solid #a3a3a3;
    border-radius: 8px;
}
.sidebar-thumbnail {
    display: grid;
    gap: 5px;
}
.sidebar-thumbnail img {
    height: 30px;
    width: auto;
}
.sidebar-thumbnail button {
    font-size: .9em;
}
.sidebar-thumbnails+button {
    justify-content: center;
}


/* ////// Slide Preview ////// */
.editor-styles-wrapper {
    .wp-block-slate-image-slider .swiper-slide img {
        aspect-ratio: 16/9;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
}

/* ////// Rich text ////// */
.rich-text [data-rich-text-placeholder] {
    opacity: .5;
}

/* ////// No Media ////// */
span.no-media {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    background: grey;
    color: snow;
    padding: 50px;
}