/* Keep entry fields readable inside the dialog as well as on the editor page. */
.menu-entry-fields {
    container: menu-entry-fields / inline-size;
    grid-template-columns: minmax(0, 1fr);
}

.menu-entry-fields :is(fieldset, legend, .field-grid, .field-grid > div, .variant-list, .variant-row, .optional-section-content, .checkbox-line, .checkbox-line label, .price-mode label) {
    min-width: 0;
    max-width: 100%;
}

.menu-entry-fields :is(label, legend, summary, .form-section-heading, .help-text, button) {
    overflow-wrap: anywhere;
}

.menu-entry-fields :is(input, textarea, select) {
    min-width: 0;
    max-width: 100%;
}

.menu-entry-kind {
    display: block;
    color: var(--muted);
    font-size: .82rem;
}

.menu-entry-fields .form-section-heading:has(.menu-entry-kind) {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .35rem 1rem;
}

.menu-entry-fields .variant-row {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, .9fr) auto;
}

.menu-entry-fields button {
    white-space: normal;
}

@container menu-entry-fields (max-width: 40rem) {
    .menu-entry-fields .variant-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .menu-entry-fields .variant-row > div:first-of-type {
        grid-column: 1 / -1;
    }

    .menu-entry-fields .variant-row button {
        justify-self: start;
    }
}

@container menu-entry-fields (max-width: 26rem) {
    .menu-entry-fields :is(.field-grid, .variant-row, .choice-grid) {
        grid-template-columns: minmax(0, 1fr);
    }

    .menu-entry-fields :is(.variant-row, .optional-section-content, .confirmation-line) {
        padding-inline: min(.85rem, 3vw);
    }

    .menu-entry-fields .price-mode label {
        flex: 1 1 100%;
    }
}