.ui-form {
    container: ui-form-area / inline-size;
    --ui-form-max-width: none;
}

.ui-form--friendly {
    --ui-form-max-width: var(--ui-form-friendly-width);
}

.ui-form .ui-form-width {
    min-width: 0;
    width: 100%;
    max-width: var(--ui-form-max-width);
}

.ui-form .ui-gap-form, .ui-form.ui-gap-form {
    gap: var(--ui-form-block-gap);
}

.ui-form-static {
	padding-top: var(--ui-form-label-offset-top);
	line-height: var(--ui-input-line-height);
	font-size: var(--ui-input-font-size);
}

/* Respond to the form width, independently of the page layout. */
@container ui-form-area (max-width: 32rem) {
    .ui-form-block {
        --ui-form-direction: column;
        --ui-form-responsive-gap: var(--ui-form-vertical-gap);
        --ui-form-label-flex: none;
        --ui-form-label-offset-top: 0px;
        --ui-form-label-align: left;
        --ui-form-content-flex: none;
        --ui-form-content-width: 100%;
    }
}

/* Standalone fields also stack on small screens. */
@media (max-width: 640px) {
    .ui-form-block {
        --ui-form-direction: column;
        --ui-form-responsive-gap: var(--ui-form-vertical-gap);
        --ui-form-label-flex: none;
        --ui-form-label-offset-top: 0px;
        --ui-form-label-align: left;
        --ui-form-content-flex: none;
        --ui-form-content-width: 100%;
    }

    .ui-input {
        --ui-input-font-size: 1rem;
        --ui-input-height: 44px;
    }

    .ui-input .ui-input-checkbox__control {
        padding-block: 0.125rem;
    }
}