.FormField {
    .form-label {
        margin-bottom: var(--padding-small);
    }

    &-note {
        @include text-body-small;

        margin-top: 2px;
        color: var(--text-secondary);
    }

    &-message {
        @include text-body-small;

        margin-top: 2px;
        display: flex;
        align-items: center;
        color: var(--text-secondary);
        gap: 4px;

        &.error {
            color: var(--text-error);

            .GlyphIcon {
                color: var(--glyphs-error);
            }

            input {
                border-color: var(--fields-stroke-error);
            }
        }

        &.warning {
            .GlyphIcon {
                color: var(--glyphs-warning);
            }
        }
    }

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