.ui-input {
    --ui-input-icon-size: 12px;
    --ui-input-icon-inset: calc(var(--ui-input-padding-inline) + 2px);
    --ui-input-end-inset: var(--ui-input-padding-inline);
    --ui-input-adornment-gap: var(--ui-space-xs);
    --ui-input-spinner-width: 14px;
    --ui-input-clear-space: 0px;
    min-width: 0;
    width: 100%;
}

.ui-input--horizontal {
    display: flex;
    align-items: flex-start;
    flex-direction: var(--ui-form-direction, row);
    gap: var(--ui-form-responsive-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: var(--ui-form-label-flex, 0 0 var(--ui-form-label-width));
    padding-top: var( --ui-form-label-offset-top );
}
.ui-input--horizontal .ui-input__label {
	text-align: var(--ui-form-label-align, right);
}

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

.ui-input__control {
    --ui-input-clear-width: calc(var(--ui-input-height) - 2 * var(--ui-input-end-inset));
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    flex: 1 1 auto;
    min-width: 0;
}

.ui-input--horizontal .ui-input__content {
    flex: var(--ui-form-content-flex, 1 1 auto);
    width: var(--ui-form-content-width, 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: var(--ui-input-text-align, right);
}

.ui-input-text, .ui-input-password, .ui-input-textarea, .ui-input-date, .ui-input-time {
    text-align: var(--ui-input-text-align, left);
}

.ui-input--align-left { --ui-input-text-align: left; }
.ui-input--align-center { --ui-input-text-align: center; }
.ui-input--align-right { --ui-input-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,
.ui-input__control > .ui-input__icon,
.ui-input__control > .ui-input__clear {
    grid-area: 1 / 1;
}

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

.ui-input--live .ui-input__control > input {
    width: 100%;
    padding-right: calc(var(--ui-input-end-inset) + var(--ui-input-clear-space)
        + var(--ui-input-spinner-width) + var(--ui-input-adornment-gap));
}

.ui-input__spinner {
    justify-self: end;
    align-self: center;
    margin-right: calc(var(--ui-input-end-inset) + var(--ui-input-clear-space));
    pointer-events: none;
}

.ui-input__spinner .ui-spinner__icon {
    width: var(--ui-input-spinner-width);
    height: var(--ui-input-spinner-width);
}

.ui-input--clearable .ui-input__control:has(> input[data-ui-filled="true"]:enabled:not([readonly])) {
    --ui-input-end-inset: 1px;
    --ui-input-clear-space: calc(var(--ui-input-clear-width) + var(--ui-input-adornment-gap));
}

.ui-input--clearable .ui-input__control > input {
    padding-right: calc(var(--ui-input-end-inset) + var(--ui-input-clear-space));
}

.ui-input--clearable.ui-input--live .ui-input__control > input {
    padding-right: calc(var(--ui-input-end-inset) + var(--ui-input-clear-space)
        + var(--ui-input-spinner-width) + var(--ui-input-adornment-gap));
}

.ui-input--icon .ui-input__control > input {
    padding-left: calc(var(--ui-input-icon-inset) + var(--ui-input-icon-size) + var(--ui-input-adornment-gap));
}

.ui-input__icon {
    justify-self: start;
    align-self: center;
    margin-left: var(--ui-input-icon-inset);
    width: var(--ui-input-icon-size);
    height: var(--ui-input-icon-size);
    color: var(--ui-color-text-subtle);
    pointer-events: none;
}

.ui-input__control > .ui-input__clear.ui-button {
    --ui-button-hover-background: color-mix(in srgb, var(--ui-color-primary) 4%, var(--ui-input-background));
    --ui-button-hover-border: transparent;
    --ui-button-hover-color: var(--ui-color-primary);
    justify-self: end;
    align-self: center;
    width: var(--ui-input-clear-width);
    height: var(--ui-input-clear-width);
    margin-right: var(--ui-input-end-inset);
    padding: 0;
    border-radius: 0 var(--ui-input-radius) var(--ui-input-radius) 0;
    visibility: hidden;
}

.ui-input__clear > .ui-svg-icon {
    width: 20px;
    height: 20px;
}

.ui-input--clearable .ui-input__control:has(> input[data-ui-filled="true"]:enabled:not([readonly])) > .ui-input__clear {
    visibility: visible;
}

.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);
}