/*!
 * Copyright (c) 2017 Edelweiss72 GmbH - All Rights Reserved
 * Unauthorized usage or distribution of this file, via any medium is strictly prohibited
 * Proprietary and confidential
 *
 * @author Wladimir Eberts <w.eberts@edelweiss72.de>
 */

$form-valid-svg: '../svg/icon-check.svg' !default;
$form-invalid-svg: '../svg/icon-cross.svg' !default;

.mod-form {
    max-width: 560px;
    //font-size: 15px;
    font-family: Arial, Helvetica, sans-serif;

    .m-error {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.5s ease;

        &:empty {
            opacity: 0;
            visibility: hidden;
        }
    }

    .m-group {
        margin-bottom: 3 * $form-gutter;

        > .m-legend {
            width: 100%;
            padding: 5px 10px;
            font-weight: bold;
            background: #ededed;
            margin: 0 0 $form-gutter 0;
        }

        > .m-field {
            max-width: 520px;
            margin-left: 10px;
            margin-right: 30px;

            > .m-label {
                font-weight: bold;

                > * {
                    font-weight: normal;
                }
            }

            > .m-multi {
                &.is-error,
                &.is-valid {
                    position: relative;

                    &::after {
                        content: '';
                        width: 24px;
                        height: 24px;
                        display: block;
                        @include absolute(0.5 * $form-input-padding-vertical, $right: -30px + 0.5 * $form-gutter);

                        @include if-parent('.m-multi.is-error') {
                            background-image: embed($form-invalid-svg);
                        }

                        @include if-parent('.m-multi.is-valid') {
                            background-image: embed($form-valid-svg);
                        }
                    }
                }

                //> .m-description {
                //    margin-bottom: $form-gutter;
                //}
            }

            > .m-item {
                &.is-error,
                &.is-valid {
                    position: relative;

                    &::after {
                        content: '';
                        width: 24px;
                        height: 24px;
                        display: block;
                        @include absolute(0.5 * $form-input-padding-vertical, $right: -30px);

                        @include if-parent('.m-item.is-error') {
                            background-image: embed($form-invalid-svg);
                        }

                        @include if-parent('.m-item.is-valid') {
                            background-image: embed($form-valid-svg);
                        }
                    }
                }
            }
        }
    }
}