:root {
    --form-control-40-min-height: var(--size-xs-height);
    --form-control-s-min-height: var(--size-s-height);
    --form-control-m-min-height: var(--size-m-height);
    --form-control-l-min-height: var(--size-l-height);
    --form-control-xl-min-height: var(--size-xl-height);
}

:root {
    --input-error-icon-display: none;
    --input-success-icon-display: flex;
    --input-error-icon-not-alone-display: none;
}

.input {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background: none;
    border: none;
    margin: var(--gap-0);
    outline: none;
    text-overflow: ellipsis;
    box-sizing: border-box;
    -webkit-appearance: none;
}

.input::-moz-placeholder {
        font-size: 16px;
        line-height: 20px;
        font-weight: 400;
        font-family: var(--font-family-system);
    }

.input,
    .input::placeholder {
        font-size: 16px;
        line-height: 20px;
        font-weight: 400;
        font-family: var(--font-family-system);
    }

.input.bold::-moz-placeholder {
            font-size: 16px;
            line-height: 20px;
            font-weight: 700;
            font-family: var(--font-family-system);
        }

.input.bold,
        .input.bold::placeholder {
            font-size: 16px;
            line-height: 20px;
            font-weight: 700;
            font-family: var(--font-family-system);
        }

.input.medium::-moz-placeholder {
            font-size: 16px;
            line-height: 20px;
            font-weight: 500;
            font-family: var(--font-family-system);
        }

.input.medium,
        .input.medium::placeholder {
            font-size: 16px;
            line-height: 20px;
            font-weight: 500;
            font-family: var(--font-family-system);
        }

.input::-moz-placeholder {
        -moz-transition:
            opacity 0.2s ease,
            color 0.2s ease;
        transition:
            opacity 0.2s ease,
            color 0.2s ease;
    }

.input::placeholder {
        transition:
            opacity 0.2s ease,
            color 0.2s ease;
    }

.input.size-40 {
        padding: var(--gap-0) var(--gap-8);
    }

.input.size-40::-moz-placeholder {
            font-size: 14px;
            line-height: 18px;
            font-weight: 400;
            font-family: var(--font-family-system);
        }

.input.size-40,
        .input.size-40::placeholder {
            font-size: 14px;
            line-height: 18px;
            font-weight: 400;
            font-family: var(--font-family-system);
        }

.input.size-40.bold::-moz-placeholder {
                font-size: 14px;
                line-height: 18px;
                font-weight: 700;
                font-family: var(--font-family-system);
            }

.input.size-40.bold,
            .input.size-40.bold::placeholder {
                font-size: 14px;
                line-height: 18px;
                font-weight: 700;
                font-family: var(--font-family-system);
            }

.input.size-40.medium::-moz-placeholder {
                font-size: 14px;
                line-height: 18px;
                font-weight: 500;
                font-family: var(--font-family-system);
            }

.input.size-40.medium,
            .input.size-40.medium::placeholder {
                font-size: 14px;
                line-height: 18px;
                font-weight: 500;
                font-family: var(--font-family-system);
            }

.input:-webkit-autofill:first-line, .input:-webkit-autofill:hover:first-line, .input:-webkit-autofill:focus:first-line, .input:-webkit-autofill:active:first-line {
            font-size: 16px;
            line-height: 20px;
            font-weight: 400;
            font-family: var(--font-family-system);
        }

.input:-webkit-autofill,
    .input:-webkit-autofill:hover,
    .input:-webkit-autofill:focus,
    .input:-webkit-autofill:active {
        -webkit-transition: background-color 999999s ease-in-out 0s;
        transition: background-color 999999s ease-in-out 0s;
    }

.input:-webkit-autofill {
        animation: onautofillstart 999999s forwards;
    }

.input:not(:-webkit-autofill) {
        animation: onautofillcancel 999999s;
    }

.input::-webkit-outer-spin-button,
    .input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }

.input[type='number'] {
        -moz-appearance: textfield;
    }

.hasInnerLabel::-moz-placeholder {
        opacity: 0;
    }

.hasInnerLabel::placeholder {
        opacity: 0;
    }

.hasInnerLabel.size-40 {
        height: var(--form-control-40-min-height);
    }

.hasInnerLabel.size-48 {
        height: var(--form-control-s-min-height);
    }

.hasInnerLabel.size-56 {
        height: var(--form-control-m-min-height);
    }

.hasInnerLabel.size-64 {
        height: var(--form-control-l-min-height);
    }

.hasInnerLabel.size-72 {
        height: var(--form-control-xl-min-height);
    }

.block {
    width: 100%;
}

.errorIcon {
    display: var(--input-error-icon-display);
}

* + .errorIcon {
    display: var(--input-error-icon-not-alone-display);
}

.successIcon {
    display: var(--input-success-icon-display);
}

.errorIcon:not(.size_40), .successIcon:not(.size_40) {
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
    }

.input:disabled {
    cursor: var(--disabled-cursor);
    opacity: 1;
}

.input:focus.hasInnerLabel::-moz-placeholder, .input:focus.hasInnerLabel.disableUserInput::-moz-placeholder {
    opacity: 1;
}

.input:focus.hasInnerLabel::placeholder,
.input:focus.hasInnerLabel.disableUserInput::placeholder {
    opacity: 1;
}

.focusVisible.focusVisible {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
}

.hasInnerLabel:read-only:focus::-moz-placeholder {
    opacity: 0;
}

.hasInnerLabel:-moz-read-only:focus::placeholder {
    opacity: 0;
}

.hasInnerLabel:read-only:focus::placeholder {
    opacity: 0;
}

@keyframes onautofillstart {
    from {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
    to {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.01);
    }
}

@keyframes onautofillcancel {
    from {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
    to {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.01);
    }
}