@import 'commons';

$m-validation-message--color-error: $m-color-error !default;
$m-validation-message--color-success: $m-color-success !default;
$m-validation-message--color-helper: $m-color-text-light !default;
$m-validation-message--margin: $m-space-2xs !default;

.m-validation-message {
    display: flex;
    flex-direction: column;
    line-height: 1.2;

    &__icon {
        display: table-cell;
        position: relative;
        top: 1px; // Magic number: align icon with text
        flex-shrink: 0;
        @include m-font-size('sm');
        margin-right: $m-space-2xs;
    }

    &__error,
    &__valid {
        display: inline-flex;
        align-items: flex-start;

        ~ .m-validation-message__helper {
            margin-top: 2px; // Magic number
        }
    }

    &__error {
        color: $m-validation-message--color-error;
    }

    &__valid {
        color: $m-validation-message--color-success;
    }

    &__helper {
        color: $m-validation-message--color-helper;
    }

    &__text {
        position: relative;
        flex: 1 1 auto;
    }

    p {
        transition: opacity $m-transition-duration ease;
        margin: 0;
        @include m-font-size('sm');
    }
}