/*
 * GS Forms – base styles for assets/form.js: the topic button, the topic dialog and the error texts.
 * Enqueued with the form (includes/form.php). Neutral on purpose: the site's theme gives them its look; these
 * keep them usable without it.
 */

/* The button that replaces the topic list. */
.gs-form__choice { display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%; padding: .75rem 1rem; border: 1px solid rgba(0, 0, 0, .25); border-radius: 8px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.gs-form__choice::after { content: ""; flex-shrink: 0; width: .45rem; height: .45rem; margin-top: -.2rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.gs-form__choice.is-empty .gs-form__choice-text { opacity: .6; }

/* Error texts, by the field's label. */
.gs-form__error { color: #b42318; font-size: .85em; }
.gs-form .is-invalid input, .gs-form .is-invalid textarea { border-color: #b42318; }

/* The page behind an open dialog. */
html.gs-form-dialog-open { overflow: hidden; }

/* The dialog: centred on wide screens, a sheet from the bottom on phones. */
.gs-form-dialog { width: min(30rem, calc(100% - 2rem)); max-height: calc(100% - 2rem); padding: 0; border: 0; border-radius: 12px; background: #fff; color: #111; box-shadow: 0 20px 60px rgba(0, 0, 0, .25); }
.gs-form-dialog::backdrop { background: rgba(0, 0, 0, .45); }
.gs-form-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid rgba(0, 0, 0, .1); }
.gs-form-dialog__title { margin: 0; font-size: 1.1rem; }
.gs-form-dialog__close { flex-shrink: 0; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.gs-form-dialog__options { display: grid; gap: .5rem; padding: 1rem 1.25rem 1.25rem; }
.gs-form-dialog__option { width: 100%; padding: .85rem 1rem; border: 1px solid rgba(0, 0, 0, .15); border-radius: 8px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.gs-form-dialog__option[aria-pressed="true"] { border-color: currentColor; font-weight: 600; }

@media (max-width: 600px) {
	.gs-form-dialog { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 16px 16px 0 0; }
}