/* Neutral defaults; a design restyles .consent and its parts as it likes */
dialog.consent {
    box-sizing: border-box;
    width: calc(100% - 2rem);
    max-width: 40rem;
    max-height: calc(100% - 2rem);
    padding: 0;
    border: none;
    border-radius: 0.5rem;
    background: #fff;
    color: #222;
    font: inherit;
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.25);
    overflow-y: auto;
}

/* The dialog itself takes the focus when it opens; its links and buttons show theirs */
dialog.consent:focus {
    outline: none;
}

dialog.consent::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

.consent-dialog {
    padding: 1.5rem;
}

.consent-heading {
    margin: 0 0 1rem;
}

.consent-text p:first-child,
.consent-category-text p:first-child {
    margin-top: 0;
}

.consent-categories {
    margin: 1rem 0;
}

.consent-category {
    padding: 0.75rem 0;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
}

.consent-category-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.consent-category-label input {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
}

.consent-category-state {
    margin-left: auto;
    font-size: 0.875em;
    opacity: 0.7;
}

.consent-category-text {
    margin-top: 0.5rem;
    font-size: 0.9em;
}

.consent-links a + a {
    margin-left: 1rem;
}

.consent-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.consent-controls button {
    flex: 1 1 10rem;
    cursor: pointer;
}

.consent-controls button[hidden] {
    display: none;
}

/* Open, the dialog is in the browser's top layer above everything else, and closed it shows
   nothing, so its block takes no room and shows no frame or options, on the site as in the
   admin. Its options are under Blocks in the admin toolbar. */
.block:has(> dialog.consent):not(:has(> .consent-settings-link)) {
    position: absolute !important;
    width: 0 !important;
    min-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.block:has(> dialog.consent):not(:has(> .consent-settings-link)) > :is(.block-button, .block-options, .block-frame) {
    display: none !important;
}