.input-text {
    display: grid;
    grid-row-gap: 2px;
    font-family: var(--font-family-primary);
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    width: 100%;

    --input-field-height: 44px;
    --input-field-padding: 9px 11px;
    --input-field-border-radius: 4px;
    --input-text-border-color-hover: var(--color-border-brand);
    --input-text-border-color: var(--color-border-basic);
    --input-text-bg-color: var(--color-bg-base);
    --input-text-bg-color-disabled: var(--color-bg-base-1);
    --input-text-border-color-disabled: var(--color-border-basic);
    --input-text-border-color-error: var(--color-border-error);
    --input-text-focus-color: var(--color-analytics-blue);
    --input-text-label-color: var(--color-text-headers);
    --input-text-label-required-color: var(--color-text-error);
    --input-text-color-placeholder: var(--color-text-disabled);
    --input-text-color-disabled: var(--color-text-disabled);
    --input-text-color-readonly: var(--color-text-basic);
    --input-text-color-error: var(--color-text-error);
    --input-text-color-description: var(--color-text-headers);

    @media (hover: hover) and (pointer: fine) {

        &__field {

            &:hover:not(&_disabled) {
                border-color: var(--input-text-border-color-hover);
            }
        }
    }

    &__label {
        color: var(--input-text-label-color);
        margin-bottom: 6px;

        &_required {

            &::after {
                content: "*";
                padding-left: 4px;
                color: var(--input-text-label-required-color);
                font-size: 16px;
            }
        }

        @media (hover: hover) and (pointer: fine) {

            &:not(&_disabled) {
                cursor: pointer;
            }
        }
    }

    &__field {
        display: grid;
        grid-auto-flow: column;
        grid-column-gap: 8px;
        padding: var(--input-field-padding);
        margin: 0;
        border: solid 1px var(--input-text-border-color);
        border-radius: var(--input-field-border-radius);
        background-color: var(--input-text-bg-color);
        height: var(--input-field-height);
        transition: all 200ms linear;
        fill: var(--color-icon-secondary);
        grid-template-columns: var(--grid-template-columns, 1fr);
        box-sizing: border-box;

        &:focus-within {
            box-shadow: 0 0 0 2px var(--input-text-focus-color);
        }

        &_disabled,
        &_read-only {
            background-color: var(--input-text-bg-color-disabled);
            border-color: var(--input-text-border-color-disabled);
        }

        &_is-error {
            border-color: var(--input-text-border-color-error);
        }

        &_before-and-after {
            --grid-template-columns: auto 1fr auto;
        }

        &_before {
            --grid-template-columns: auto 1fr;
        }

        &_after {
            --grid-template-columns: 1fr auto;
        }

        @media screen and (prefers-reduced-motion: reduce) {
            transition: none;
        }
    }

    &__input {
        min-width: 0;
        font-family: inherit;
        font-style: inherit;
        font-weight: inherit;
        font-size: inherit;
        line-height: inherit;
        outline: none;
        border: none;
        padding: 0;
        margin: 0;
        display: block;
        background-color: transparent;

        &::placeholder {
            color: var(--input-text-color-placeholder);
        }

        &[disabled] {
            color: var(--input-text-color-disabled);
        }

        &[readonly] {
            color: var(--input-text-color-readonly);
        }
    }

    &__error,
    &__description {
        color: var(--input-text-color-error);
        font-size: 13px;
        line-height: 16px;
    }

    &__description {
        color: var(--input-text-color-description);
    }
}