.horizontal-form {
    display: grid;
    grid-template-columns: minmax(auto, var(--label-width, 100px)) 1fr;
    gap: 1rem;
    align-items: start;
}

@media screen and (max-width: 300px) {
    .horizontal-form {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;

    }
}

.horizontal-form > * {
    grid-column: 2;
}


.horizontal-form > h2,
.horizontal-form > h3,
.horizontal-form > .stretch-to-row {
    grid-column: 1/3;
}
.horizontal-form > label:not(:has(input)) {
    grid-column: 1;
    padding-block: 0.5rem;
}

.horizontal-form > fieldset {
    display: grid;
    grid-template-columns: min-content auto;
    gap: 0.5rem;
}

.horizontal-form > fieldset > label:has(input) {
    grid-column: span 2;
}

.horizontal-form {
    --label-width: 100px;
    --gap-width: 1rem;
}

.horizontal-form > *::part(form-control) {
    display: grid;
    grid: auto / var(--label-width) 1fr;
    gap: var(--sl-spacing-3x-small) var(--gap-width);
    align-items: center;
}

.horizontal-form > *::part(form-control-label) {
    text-align: left;
}

.horizontal-form > *::part(form-control-help-text) {
    grid-column-start: 2;
}

.horizontal-form > *:is(sl-switch, sl-select, sl-range, sl-textarea, sl-input, sl-radio-group) {
    grid-column: 1 / 3;
}

/***********************************************/

.vertical-form {
    display: flex;
    flex-direction: column;
}

.vertical-form > label + label {
    margin-top: inherit;
}

.vertical-form > fieldset {
    display: grid;
    grid-template-columns: min-content auto;
    gap: 0.5rem;
}

.vertical-form > fieldset > label:has(input) {
    grid-column: span 2;
}

label:has(+ input[required]):after {
    content: '*';
    color: red;
}


.query-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    --min: 10ch;
}

lit-flatpickr {
    background: inherit;
}

.query-form > *:not(input[type=hidden]):not(script) {
    flex: 1 1 var(--min);

    display: flex;
    flex-direction: column;
}

.query-form > fieldset {
    display: grid;
    grid-template-columns: min-content auto;
    gap: 0.5rem;
}

.query-form > fieldset > label:has(input) {
    grid-column: span 2;
}

.vertical-form label:has(input) > * + * {
    margin-left: 1ch;
}

.vertical-form label:has(input) > * {
    vertical-align: middle;
}
/*******************/
sl-option::part(label) {
    margin-left: var(--indent, unset);
}