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

// sass-lint:disable no-important

// helper
@mixin highlight-box($color, $prefix: null) {
    $space: 15px;

    width: auto !important;
    float: none !important;
    padding: $space !important;
    font-size: medium !important;
    margin: $space 0 0 0 !important;
    border: 1px solid $color !important;
    background-color: lighten($color, 45%) !important;

    &::before {
        color: $color !important;
        display: block !important;
        font-size: medium !important;
        font-weight: normal !important;
        margin: 0 0 $space 0 !important;
        content: $prefix attr(class) !important;
    }
}

%highlight-unknown {
    > :not(.m-error):not(.m-group):not(.m-legend):not(.m-field):not(.m-label):not(.m-multi):not(.m-item):not(.m-input) {
        display: block !important;

        @include highlight-box(hsl(0deg, 0%, 50%), 'Custom: ');
    }
}

// style
.mod-form {
    @extend %highlight-unknown;
    @include highlight-box(hsl(0deg, 0%, 40%), 'Form: ');

    .m-error {
        @include highlight-box(hsl(0deg, 100%, 40%), 'Error: ');
    }

    .m-group {
        @extend %highlight-unknown;
        @include highlight-box(hsl(90deg, 100%, 40%), 'Group: ');

        .m-legend {
            @include highlight-box(hsl(90deg, 100%, 40%), 'Legend: ');
        }
    }

    .m-field {
        @extend %highlight-unknown;
        @include highlight-box(hsl(280deg, 100%, 40%), 'Field: ');
    }

    .m-label {
        display: inline-block !important;
        @include highlight-box(hsl(40deg, 100%, 40%), 'Label: ');
    }

    .m-multi {
        @extend %highlight-unknown;
        @include highlight-box(hsl(190deg, 100%, 40%), 'Multi: ');
    }

    .m-item {
        @extend %highlight-unknown;
        @include highlight-box(hsl(220deg, 100%, 40%), 'Item: ');

        .m-input {
            @include highlight-box(hsl(220deg, 50%, 40%), 'Input: ');
        }
    }

    .is-error,
    &.is-error {
        $color: hsla(0, 100%, 50%, 0.1);

        background-size: 25px 25px !important;
        background-image: linear-gradient(-45deg, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent) !important;
    }
}