popup-window {
    position: fixed;
    left: 0;
    top: 0;

    min-width: 100vw;
    min-height: 100vh;

    display: grid;

    z-index: 20000;

    &::part(root) {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto 1fr auto;
        background-color: canvas;
        margin: auto;
        box-shadow: 0 0 6px 6px #c0c0c050;
        padding: 20px;
        border-radius: 10px;
    }

    &::part(title) {
        grid-column: 1 / span 2;
        grid-row: 1;
    }
    &::part(close) {
        grid-column: 3;
        grid-row: 1;
        cursor: pointer;
        box-sizing: border-box;
        margin: 10px;
        font: var(--fa-font-solid);
        font-size: 2rem;
        place-self: center;
        z-index: 2;
        &::after {
            content: "\f057"
        }

    }

    &[hide-close] {
        &::part(close) {
            display: none;
        }
    }

    &::part(content) {
        display: flex;
        flex-direction: column;
        grid-column: 1 / span 3;
        grid-row: 2;
    }

}