.input-textarea {
    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-textarea-border-color-hover: var(--color-border-brand);
    --input-textarea-label-color: var(--color-text-headers);
    --input-textarea-label-margin-bottom: 6px;
    --input-textarea-required-color: var(--color-text-error);
    --input-textarea-border-color: var(--color-border-basic);
    --input-textarea-bg-color: var(--color-bg-base);
    --input-textarea-focus-color: var(--color-analytics-blue);
    --input-textarea-placeholder-color: var(--color-text-disabled);
    --input-textarea-disabled-color: var(--color-text-disabled);
    --input-textarea-readonly-color: var(--color-text-basic);
    --input-textarea-description-color: var(--color-text-headers);
    --input-textarea-error-color: var(--color-text-error);
    --input-textarea-border-color-disabled: var(--color-border-basic);
    --input-textarea-bg-disabled: var(--color-bg-base-1);
    --input-textarea-border-color-error: var(--color-border-error);

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

        &__input {

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

    &__label {
        color: var(--input-textarea-label-color);
        margin-bottom: var(--input-textarea-label-margin-bottom);

        &_required {

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

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

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

    &__input {
        display: block;
        box-sizing: border-box;
        padding: 12px;
        margin: 0;
        border: solid 1px var(--input-textarea-border-color);
        border-radius: 4px;
        background-color: var(--input-textarea-bg-color);
        transition: border-color 200ms linear, box-shadow 200ms linear;
        min-height: 84px;
        font-family: inherit;
        font-style: inherit;
        font-weight: inherit;
        font-size: inherit;
        line-height: inherit;
        outline: none;
        width: 100%;
        resize: vertical;

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

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

        &[disabled],
        &[readonly] {
            background-color: var(--input-textarea-bg-disabled);
            border-color: var(--input-textarea-border-color-disabled);
        }

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

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

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

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

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

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