@import 'commons';
@import './../input-style/input-style.scss';

.m-input-group {
    border: none;
    padding: 0;
    margin: inherit 0 0;


    &.m--has-validation-message {
        &:not(.m--is-validation-message-position-bottom) {
            .m-input-group__label {
                ~ .m-input-group__body {
                    margin-top: $m-space-2xs;
                }
            }

            .m-input-group__content {
                margin-top: $m-space-xs;
            }
        }

        &.m--is-validation-message-position-bottom {
            .m-input-group__body {
                flex-direction: column-reverse;
                margin-top: $m-space-2xs;
            }

            .m-input-group__message {
                margin-top: $m-space-2xs;
            }
        }
    }

    &__label {
        margin: 0;
        @include m-font-size();
        font-weight: $m-font-weight-semi-bold;
        display: flex;
        align-items: center;

        ~ .m-input-group__body {
            margin-top: $m-space-xs;
        }
    }

    &__icon {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        margin-left: 3px;
    }

    &__required-marker {
        color: $m-color-accent;
        font-size: inherit;
        font-weight: $m-font-weight-bold;
        vertical-align: baseline;
    }

    &__body {
        display: flex;
        flex-direction: column;
    }

    &__validation__message {
        transition: margin $m-transition-duration ease;
    }
}