@layer dialog {
    [data-open-dialog]:hover { cursor: pointer; }

    dialog {
        border: 0;
        padding: var(--half-space);
        position: relative;

        &::backdrop {
            background-color: rgb(0 0 0 / .75);
        }

        .close-btn:hover { cursor: pointer; }

        .close-icon {
            height: 20px;
            inset: var(--quarter-space) var(--quarter-space) auto auto;
            position: absolute;
            width: 20px;
        }

        body:has(&[open]) { overflow: hidden; }
    }
}