/*!
 * 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>
 */

.mod-form {
    position: relative;

    *,
    *::before,
    *::after {
        font-size: inherit;
        font-family: inherit;
        line-height: inherit;
        box-sizing: border-box;
    }

    // this fieldset wrapper is created by JavaScript
    > fieldset {
        margin: 0;
        padding: 0;
        border: none;
    }

    .m-error {
        margin-bottom: 0.5 * $form-gutter;

        &:empty {
            margin-bottom: 0;
        }

        > ul {
            margin: 0;
            padding: 0;
            color: $form-color-error;
            list-style-position: inside;

            > li:only-child {
                list-style-type: none;
            }
        }
    }

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

        &.is-dependent {
            display: none;
        }

        .m-legend {
            padding: 0;
        }
    }

    .m-field {
        // margin-bottom: 0.5 * $form-gutter;

        &.is-dependent {
            display: none;
        }

        > .m-inner {
            > .m-label {
                display: inline-block;
                margin: 0 0 (0.5 * $form-gutter);

                > .m-mark {
                }
            }
        }

        > .m-description {
            margin-top: -0.5 * $form-gutter;
            margin-bottom: $form-gutter;
        }
    }

    .m-multi {
        display: flex;
        flex-flow: row wrap;
        margin-left: (-0.5 * $form-gutter);
        margin-right: (-0.5 * $form-gutter);

        &-radio,
        &-checkbox {
            margin-bottom: $form-gutter - max(0, $form-input-padding-vertical/* - $form-input-border-width*/);
        }

        &.is-dependent {
            display: none;
        }

        > * {
            margin-left: (0.5 * $form-gutter);
            margin-right: (0.5 * $form-gutter);
        }

        > .m-multi {
            margin-left: 0;
            margin-right: 0;

            //@include if-parent('.m-multi:not(.m-multi-radio):not(.m-multi-checkbox) .m-multi:not(.m-size)') {
            //    flex: 1 1 0;
            //}
        }

        > .m-field {
            @include if-parent('.m-multi:not(.m-multi-radio):not(.m-multi-checkbox) .m-field:not(.m-size)') {
                flex: 1 1 0%;
            }
        }

        > .m-item {
            // margin-left: (0.5 * $form-gutter);
            // margin-right: (0.5 * $form-gutter);

            @include if-parent('.m-multi:not(.m-multi-radio):not(.m-multi-checkbox) .m-item:not(.m-size)') {
                flex: 1 1 0%;
            }
        }
    }

    .m-item {
        margin-bottom: $form-gutter;

        &-radio,
        &-checkbox {
            padding-left: 13px + 0.5 * $form-gutter;
            margin-bottom: max(0, $form-gutter - max(0, $form-input-padding-vertical/* - $form-input-border-width*/));
        }

        &.is-dependent {
            display: none;
        }

        > .m-input {
            &-radio,
            &-checkbox {
                // max-width: fit-content;

                > input {
                    outline: none;
                    cursor: pointer;
                    vertical-align: middle;
                    margin: (-2 * $form-input-border-width) (0.5 * $form-gutter) 0 (-13px + -0.5 * $form-gutter);
                }

                > .m-label {
                    cursor: pointer;

                    &.is-error {
                        color: $form-color-error;
                    }

                    > a {
                        @include if-parent('.m-label.is-error') {
                            color: inherit;
                            text-decoration: underline;
                            text-decoration-color: silver;
                        }

                        &:hover,
                        &:focus {
                            @include if-parent('.m-label.is-error') {
                                text-decoration-color: gray;
                            }
                        }
                    }
                }
            }

            &-reset,
            &-submit {
                // max-width: fit-content;
            }

            > select,
            > textarea,
            > input[type='tel'],
            > input[type='url'],
            > input[type='text'],
            > input[type='date'],
            > input[type='email'],
            > input[type='number'],
            > input[type='search'],
            > input[type='password'] {
                width: 100%;
                appearance: none;
                text-overflow: ellipsis;
                color: $form-input-color;
                box-shadow: $form-input-shadow;
                border-radius: $form-input-radius;
                background-color: $form-input-background;
                padding: max(0, $form-input-padding-vertical - $form-input-border-width) max(0, $form-input-padding-horizontal - $form-input-border-width);
                border: $form-input-border-width $form-input-border-style $form-input-border-color;

                &.is-error {
                    border-color: $form-color-error;
                }

                &:focus {
                    outline: none;
                    border-color: $form-input-border-color-active;
                    background-color: $form-input-background-active;
                }

                &:hover {
                    border-color: $form-input-border-color-hover;
                    background-color: $form-input-background-hover;
                }

                &::placeholder {
                    opacity: 1;
                    color: $form-input-placeholder;
                }

                // &:focus::placeholder {
                //     opacity: 0;
                // }

                // Internet Explorer 10+
                &::-ms-clear {
                    display: none;
                }
            }

            > textarea {
                resize: vertical;

                @if $form-line-height and type-of($form-line-height) != string {
                    @if unitless($form-line-height) {
                        min-height: calc(#{$form-line-height * 1em} + #{2 * $form-input-padding-vertical + 2 * $form-input-border-width} + 1px);
                    }
                    @else {
                        min-height: $form-line-height + 2 * $form-input-padding-vertical + 2 * $form-input-border-width + 1px;
                    }
                }
            }

            > select {
                -webkit-appearance: menulist-button;

                // some browsers force a fixed line-height of 1
                @if $form-line-height and type-of($form-line-height) != string {
                    @if unitless($form-line-height) {
                        min-height: calc(#{$form-line-height * 1em} + #{2 * $form-input-padding-vertical});
                    }
                    @else {
                        min-height: $form-line-height + 2 * $form-input-padding-vertical;
                    }
                }

                // &:-moz-focusring {
                //     color: transparent;
                //     text-shadow: 0 0 0 $form-input-color;
                // }

                &::-ms-value {
                    background: none;
                    color: $form-input-color;
                }
            }

            > button {
                &::-moz-focus-inner {
                    padding: 0;
                    border: none;
                }
            }
        }
    }

    .m-size {
        flex: 0 1 auto;

        &--xs {
            flex-basis: $form-size-xs;
        }

        &--s {
            flex-basis: $form-size-s;
        }

        &--m {
            flex-basis: $form-size-m;
        }

        &--l {
            flex-basis: $form-size-l;
        }

        &--xl {
            flex-basis: $form-size-xl;
        }

        &--full {
            flex-basis: 100%;
        }

        // .m-size--3-4  ->  75% (3/4)
        @for $denominator from 1 through 8 {
            @for $numerator from 1 through $denominator {
                &--#{$numerator}-#{$denominator} {
                    flex-basis: calc(#{100% * ($numerator / $denominator)} - #{$form-gutter});
                }
            }
        }
    }

    // honeypot
    //
    // A special invisible field to trap spam bots
    .is-sweet-sugar:not(.is-error) {
        display: none !important;
    }
}