@layer components {
    /* Looks like part of the page, not a widget: it answers the question the page explained. */
    .cookie-choice {
        display: grid;
        gap: var(--space-s);
        max-inline-size: var(--measure);
        margin: var(--space-xl) auto;
        padding: var(--space-m);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-m);
        background-color: var(--color-surface);
    }

    .cookie-choice__title {
        margin: 0;
        font-size: var(--text-l);
    }

    .cookie-choice__state,
    .cookie-choice__note {
        margin: 0;
    }

    .cookie-choice__note {
        color: var(--color-text-muted);
        font-size: var(--text-s);
    }

    .cookie-choice__form {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-xs);
    }

    .cookie-choice__action {
        flex: 1 1 12rem;
        min-block-size: 3rem;
        padding-inline: var(--space-m);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-full);
        background-color: transparent;
        cursor: pointer;
    }

    .cookie-choice__action--primary {
        border-color: transparent;
        background-color: var(--color-accent);
        color: var(--color-accent-contrast);
        font-weight: 600;
    }
}