.FormControl {
    &-error-message {
        @include text-body-small;

        display: none;
        color: var(--text-error);
    }

    &-Input {
        margin-bottom: 4px;
    }

    &-append {
        .form-control {
            border-bottom-right-radius: 0;
            border-top-right-radius: 0;
            display: inline-block;
            width: inherit;
        }

        .btn {
            border-left: 0;
            border-bottom-left-radius: 0;
            border-top-left-radius: 0;
            vertical-align: inherit;
        }
    }

    &-note {
        color: var(--text-secondary);
    }
}

.was-validated {
    .form-control:invalid,
    .form-control.is-invalid {
        border-color: var(--fields-stroke-error);
    }

    .FormControl {
        &-error {
            .form-control,
            .Select-control,
            .RichTextEditor {
                border-color: var(--fields-stroke-error);
            }

            .form-control:valid:focus {
                border-color: var(--fields-stroke-error);
            }

            &-message {
                display: block;
            }
        }
    }
}