.o-ui {
    --o-ui-input-padding: var(--o-ui-sp-3);
    --o-ui-input-padding-with-icon: var(--o-ui-sp-7);
    --o-ui-input-padding-with-button: var(--o-ui-sp-8);
    --o-ui-input-padding-loading: var(--o-ui-sp-8);
    --o-ui-input-border-color: var(--o-ui-b-alias-mid-break);
    --o-ui-input-border-radius: var(--o-ui-br-2);
    --o-ui-input-background-color: var(--o-ui-bg-alias-mid-break);
}

.o-ui-input {
    display: inline-flex;
    position: relative;
    transition: var(--o-ui-focus-ring-transition);
    color: var(--o-ui-text-alias-primary);
    width: var(--o-ui-sz-16);
    align-items: center;
}

.o-ui-input input {
    -webkit-appearance: none;
    font-family: inherit;
    font-size: inherit;
    outline: transparent;
    border: none;
    width: 100%;
    background-color: inherit;
    color: inherit;
    min-height: calc(var(--o-ui-sz-6) - 2px);
    margin: 0;
    padding: 0;
}

.o-ui-input textarea {
    width: 100%;
}

/* MS EDGE FIX */
/* Removing Edge input field decoration. */
.o-ui-input[type="text"]::-ms-clear,
.o-ui-input[type="text"]::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
}

.o-ui-text-input,
.o-ui-text-area textarea,
.o-ui-number-input {
    font-size: var(--o-ui-fs-3);
    padding: 0;
    border-radius: var(--o-ui-input-border-radius);
    border: 1px solid var(--o-ui-input-border-color);
    background-color: var(--o-ui-bg-alias-surface);
    transition: all var(--o-ui-easing-duration-2) var(--o-ui-easing-productive), padding 0s linear;
    line-height: inherit;
    font-family: inherit;
}

.o-ui-text-input input,
.o-ui-text-area textarea,
.o-ui-number-input input {
    padding: 0 var(--o-ui-input-padding);
}

.o-ui-text-input input,
.o-ui-text-area {
    border-radius: var(--o-ui-input-border-radius);
}

.o-ui-number-input input {
    border-top-left-radius: var(--o-ui-input-border-radius);
    border-bottom-left-radius: var(--o-ui-input-border-radius);
}

.o-ui-text-input.o-ui-input-has-button input {
    padding-right: 0.25rem;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.o-ui-text-input.o-ui-input-has-icon input,
.o-ui-number-input.o-ui-input-has-icon input {
    padding-left: 0.25rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* SELECTION */
.o-ui-input input::selection,
.o-ui-input textarea::selection {
    background-color: var(--o-ui-bg-alias-input-selection);
}

/* AUTOFILL */
.o-ui-input input:-webkit-autofill,
.o-ui-input textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--o-ui-bg-alias-accent-faint) inset !important;
    -webkit-text-fill-color: var(--o-ui-text-alias-primary) !important;
}

/* STATE | HOVER */
.o-ui-input:not(.o-ui-input-focus):not(.o-ui-input-disabled):hover,
.o-ui-input:not(.o-ui-input-focus):hover textarea:not(:disabled) {
    border-color: var(--o-ui-b-alias-high-break);
}

/* PLACEHOLDER */
.o-ui-input input::placeholder,
.o-ui-input textarea::placeholder {
    color: var(--o-ui-text-alias-input-placeholder);
    opacity: 1;
    font-size: var(--o-ui-fs-3);
}

.o-ui-input-disabled input::placeholder,
.o-ui-input textarea:disabled::placeholder {
    color: var(--o-ui-text-alias-secondary);
}

/* FLUID */
.o-ui-input.o-ui-input-fluid {
    width: 100%;
}

/* INVALID */
.o-ui-input-invalid:not(.o-ui-input-disabled),
.o-ui-input-invalid:not(.o-ui-input-disabled) textarea {
    --o-ui-input-border-color: var(--o-ui-b-alias-alert);
}

/* INVALID | DISABLED */
.o-ui-input-invalid.o-ui-input-disabled,
.o-ui-input-invalid.o-ui-text-area textarea:disabled {
    background-color: var(--o-ui-bg-alias-alert-light);
    --o-ui-input-border-color: var(--o-ui-bg-alias-alert-light);
}

.o-ui-input.o-ui-input-invalid:not(.o-ui-text-area):focus-within,
.o-ui-input-focus.o-ui-input-invalid {
    box-shadow: var(--o-ui-focus-ring-inset-md);
}

/* STATE | HOVER | INVALID */
.o-ui-input.o-ui-input-invalid:not(.o-ui-input-focus):not(.o-ui-input-disabled):hover,
.o-ui-input.o-ui-input-invalid:not(.o-ui-input-focus):hover textarea:not(:disabled),
.o-ui-input-hover.o-ui-input-invalid:not(.o-ui-input-focus):not(.o-ui-input-disabled) {
    border-color: var(--o-ui-b-alias-alert-hover);
}

/* ICON */
.o-ui-input-icon {
    display: inline-flex;
    flex-shrink: 0;
    margin-right: 0.5rem;
    margin-left: 0.5rem;
}

/* ICON | MEDIUM */
.o-ui-input-has-icon {
    padding-left: 0;
}

/* BUTTON | INPUT */
.o-ui-text-input .o-ui-input-button,
.o-ui-number-input .o-ui-input-button {
    position: inline-flex !important;
    display: flex;
    text-align: center;
    margin-right: .625rem;
    margin-left: .625rem;
}

.o-ui-input-has-button.o-ui-text-input,
.o-ui-input-has-button.o-ui-number-input {
    padding-right: 0;
}

/* STATES */
/* STATES | FOCUS */
.o-ui-text-input:not(.o-ui-input-disabled).o-ui-input-has-focus,
.o-ui-number-input:not(.o-ui-input-disabled):focus-within,
.o-ui-text-area:not(.o-ui-input-disabled).o-ui-input-has-focus textarea,
.o-ui-input-focus:not(.o-ui-input-disabled):not(.o-ui-has-button-disabled) {
    box-shadow: var(--o-ui-focus-ring-inset-md) !important;
    outline: transparent;
}

/* STATES | DISABLED */
.o-ui-text-input.o-ui-input-disabled,
.o-ui-number-input.o-ui-input-disabled,
.o-ui-input textarea:disabled {
    opacity: var(--o-ui-disabled-opacity);
    background-color: var(--o-ui-input-background-color);
    cursor: not-allowed;
}

.o-ui-input-disabled > * {
    cursor: not-allowed;
}

/* STATES | LOADING */
@keyframes o-ui-input-spinner {
    0% {
        transform: translate(0, -50%) rotate(0deg);
    }
    100% {
        transform: translate(0, -50%) rotate(360deg);
    }
}

.o-ui-input-spinner {
    position: absolute;
    right: calc((var(--o-ui-input-padding-with-button) - var(--o-ui-sp-5)) / 2);
    z-index: 1;
}

.o-ui-input-loading .o-ui-button {
    display: none;
}

.o-ui-text-input.o-ui-input-loading,
.o-ui-number-input.o-ui-input-loading,
.o-ui-text-area.o-ui-input-loading textarea {
    padding-right: var(--o-ui-input-padding-loading);
}