dialog.modal-embed::backdrop {
    animation: kf-modal-backdrop 1s linear forwards;
    /* animation-delay: 2s; */
    background-color: rgb(0 0 0 / 50%);
}

@keyframes kf-modal-backdrop {
    0% {
        backdrop-filter: blur(0);
    }
    100% {
        backdrop-filter: blur(4px);
    }
}

dialog.modal-embed {
    box-sizing: border-box;
    border: var(--border-thickness) solid var(--background-primary);
    background-color: var(--background-tertiary);
    width: 1024px;
}

dialog.modal-embed:open {
    display: flex;
    justify-content: space-around;
}

dialog.modal-embed > div.wrapper {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 32px;
    width: 100%;
    height: 100%;
}

dialog.modal-embed > div.wrapper > div.preview {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    width: 640px;
    height: 640px;
}

dialog.modal-embed > div.wrapper > div.preview > img.background {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
}

dialog.modal-embed > div.wrapper > div.toggles {
    display: grid;
    flex-basis: 100%;
    align-content: start;
    align-items: start;
    max-width: 300px;
    height: 100%;
    overflow-y: scroll;
}

dialog.modal-embed > div.wrapper > div.toggles > textarea {
    box-sizing: border-box;
    border: var(--border-thickness) solid var(--background-primary);
    background-color: var(--background-tertiary);
    padding: 8px;
    min-height: 120px;
    resize: none;
}