.ui-input {
    min-width: 0;
    width: 100%;
}

.ui-input--horizontal {
    display: flex;
    align-items: flex-start;
    gap: var( --ui-form-column-gap );
}

.ui-input--vertical {
    display: flex;
    flex-direction: column;
    gap: var( --ui-form-vertical-gap );
}

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

.ui-input--full {
    max-width: none;
}

.ui-input--hide-label .ui-input__label-wrap {
    display: none;
}

.ui-input__label-wrap {
    min-width: 0;
}

.ui-input__label {
    display: block;
    margin: 0;
}

.ui-input--required .ui-input__label::after {
    content: "*";
    color: var(--ui-color-error);
    padding-left: 5px;
}

.ui-input--error .ui-input__label {
    color: var(--ui-color-error);
}

.ui-input--horizontal .ui-input__label-wrap {
    flex: 0 0 var( --ui-form-label-width );
    padding-top: var( --ui-form-label-offset-top );
}
.ui-input--horizontal .ui-input__label {
	text-align: right;
}

.ui-input__content {
    min-width: 0;
}

.ui-input__control {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    flex: 1 1 auto;
    min-width: 0;
}

.ui-input--horizontal .ui-input__content {
    flex: 1 1 auto;
}

.ui-input-textarea,
.ui-input-text,
.ui-input-password,
.ui-input-select {
    width: 100%;
}

.ui-input-decimal, .ui-input-number, .ui-input-percentage {
    width: var(--ui-input-number-width);
    max-width: 100%;
    text-align: right;
}

.ui-input-date {
	width: var(--ui-input-date-width);
}
.ui-input-time, .ui-input-number {
	width: var(--ui-input-short-width);
}

.ui-input__control > input,
.ui-input__control > .ui-input__spinner {
    grid-area: 1 / 1;
}

.ui-input__control > input {
    min-width: 0;
}

.ui-input--live .ui-input__control > input {
    width: 100%;
    padding-right: 2rem;
}

.ui-input__spinner {
    justify-self: end;
    align-self: center;
    margin-right: 0.625rem;
    pointer-events: none;
}

.ui-input__help {
    margin: 0.375rem 0 0;
}

.ui-input label {
    font-size: var(--ui-input-font-size);
    line-height: var(--ui-input-line-height);
}

/* Toolkit controls own their presentation independently of Bootstrap defaults. */
.ui-input :is(input, select, textarea) {
    font-size: var(--ui-input-font-size);
    line-height: var(--ui-input-line-height);
    box-sizing: border-box;
}

.ui-input :is(.ui-input-text, .ui-input-password, .ui-input-select, .ui-input-date,
    .ui-input-time, .ui-input-number, .ui-input-decimal, .ui-input-percentage, .ui-input-textarea) {
    color: var(--ui-input-color);
    background-color: var(--ui-input-background);
    border: 1px solid var(--ui-input-border);
    border-radius: var(--ui-input-radius);
    padding: var(--ui-input-padding-block) var(--ui-input-padding-inline);
    box-shadow: var(--ui-input-shadow);
    transition: border-color 120ms ease, box-shadow 120ms ease;
    max-width: 100%;
}

.ui-input :is(.ui-input-text, .ui-input-password, .ui-input-select, .ui-input-date,
    .ui-input-time, .ui-input-number, .ui-input-decimal, .ui-input-percentage) {
    height: var(--ui-input-height);
}

.ui-input .ui-input-textarea {
    height: auto;
}

/* Leave space between right-aligned values and the native number spinner. */
.ui-input-number::-webkit-inner-spin-button {
    margin-inline-start: 4px;
}

.ui-input :is(input, select, textarea):disabled {
    cursor: not-allowed;
    opacity: var(--ui-disabled-opacity);
    box-shadow: none;
}

.ui-input :is(.ui-input-text, .ui-input-password, .ui-input-select, .ui-input-date,
    .ui-input-time, .ui-input-number, .ui-input-decimal, .ui-input-percentage, .ui-input-textarea):disabled {
    background-color: var(--ui-input-disabled-background);
}

.ui-input :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    margin: 0;
}

/* Explicit widths override type defaults and live-input presentation. */
.ui-input :is(input, select, textarea).ui-input-width--quarter {
    width: 25%;
}

.ui-input :is(input, select, textarea).ui-input-width--half {
    width: 50%;
}

.ui-input :is(input, select, textarea).ui-input-width--full {
    width: 100%;
}

.ui-input--error :is(.ui-input-text, .ui-input-textarea, .ui-input-select, .ui-input-date, .ui-input-time,
	.ui-input-number, .ui-input-decimal, .ui-input-percentage, .ui-input-file, .ui-input-password) {
    border-color: var(--ui-color-error);
}