.modal-content {
    display: none;
}

.modal .modal-content {
    display: block;
}

.modal-inner {
    overflow-y: auto;
}

.modal[open] {
    max-width: var(--wp--style--global--content-size);
    width: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 0.5rem;
    border: none;
    box-shadow: 0 1rem 1rem rgb(0 0 0 / 50%);
    background-color: white;
    padding: 0;
    /*
    z-index: 9999;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-height: 100vh;
    */
}

.modal[open].modal-wide {
    max-width: var(--wp--style--global--wide-size);
}

.modal[open].modal-full {
    max-width: 100%;
}

.modal .modal-titlebar button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 1rem;
    font-size: var(--wp--preset--font-size--heading-3);
}

.modal .modal-content {
    padding: 0rem;
}

.modal .modal-titlebar {
    padding: 0 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: white;
}

dialog::backdrop {
    background: rgb(0 0 0 / 50%);
}

[data-has-modal] {
    cursor: pointer;
}