// Copyright (c) 2016-2018 VMware, Inc. All Rights Reserved.
// This software is released under MIT license.
// The full license information can be found in LICENSE in the root directory of this project.

//Validation Tooltips Arrow Color
// TODO: color should be a variable
@mixin vertical-tooltip-arrow-color($dirA:top,$dirB:right,$color:#000000) {
    $oppA: map-get($opp-directions, $dirA);
    $oppB: map-get($opp-directions, $dirB);

    border-#{$oppB}-color: $color;
    border-#{$dirA}-color: $color;
    border-#{$dirB}-color: transparent;
    border-#{$oppA}-color: transparent;
}

@mixin horizontal-tooltip-arrow-color($dirA:top,$dirB:right,$color:#000000) {
    $oppA: map-get($opp-directions, $dirA);
    $oppB: map-get($opp-directions, $dirB);

    border-top-color: $color;
    border-#{$dirB}-color: $color;
    border-bottom-color: transparent;
    border-#{$oppB}-color: transparent;
}

@mixin generate-required-indicator() {
    &.required {
        &:after {
            content: '*';
            font-size: 1.1em;
            color: $clr-red;
            margin-left: 0.25rem;
        }
    }
}

@include exports('forms.clarity') {

    // added `.form` class because we may not always have proper HTML with form fields within a form.
    // there may be weird cases where we have form fields inside a div or li tag with no wrapping form.
    // that's bad, i know. but webdevs do it.
    form,
    .form {
        padding-top: 0.5rem;

        label, span {
            display: inline-block;
        }

        .form-block {
            margin: 0.5rem 0 1.5rem 0;
            & > label {
                @include clr-getTypePropertiesForDomElement(form_block_label, (font-size, letter-spacing, font-weight));
                color: $clr-form-text-color;
                margin-bottom: 0.25rem;
            }
        }

        //form-group Style and Layout using FlexBox for large screens
        .form-group {
            display: flex;
            flex-wrap: wrap;
            position: relative;
            // original
            // padding-left: 9.5rem;
            padding-left: 6.5rem;
            padding-right: 1.5rem;
            //Everything else except for the first label starts after this padding on large screens
            margin-bottom: 1rem;
            // original
            // margin-bottom: 0.5rem;
            @include clr-getTypePropertiesForDomElement(form_group_fields, (font-size, letter-spacing, line-height));

            &.row {
                padding-left: 0;
                position: static;
            }

            //The first label in a form-group always appears on the left hand side for large screens
            //TODO: Figure out a fix for labels wrapping large text
            & > label:first-child, & > span:first-child {
                position: absolute;
                width: 5.5rem;
                // original
                // left: 0; 
                left: 1rem;
                top: 0.25rem;
                margin: 0;
            }

            &.row > [class*='col-']:first-child > label,
            &.row > [class*='col-']:first-child > span {
                position: static;
            }

            & > label:first-child,
            & > span:first-child,
            &.row > [class*='col-'] > label,
            &.row > [class*='col-'] > span {
                color: $clr-form-text-color;

                @include generate-required-indicator();
            }

            .form-control {
                width: 100%;
            }

            //Form fields side margins & flex properties apply only when they are direct children of form-groups
            & > label:not(:first-child),
            & > span:not(:first-child),
            & > #{$styledInputs},
            & > .tooltip-validation,
            & > .select,
            & > .checkbox-inline,
            & > .radio-inline,
            & > button,
            & > a,
            & > #{$styledInputs1},
            & > .btn {
                flex: 0 1 auto;
                margin-left: 0;
                margin-right: 0.5rem;
            }

            //Link buttons have no right margin
            & > .btn.btn-link {
                margin-right: 0;
            }

            & > .checkbox,
            & > .radio {
                flex: 1 1 100%;
                margin-left: 0;
                margin-right: 1rem;
            }

            & > .toggle-switch {
                flex: 0 1 auto;
                margin-left: 0;
                margin-right: 1rem;
            }

            & > textarea {
                margin-left: 0;
                margin-right: 0.5rem;
            }

            //All children have a top and bottom margin regarless if they are direct descendants or if they are
            //in a grid
            label,
            span,
            #{$styledInputs},
            .tooltip-validation,
            textarea,
            .select,
            .checkbox-inline,
            .radio-inline,
            .checkbox,
            .radio,
            .toggle-switch,
            button,
            a,
            #{$styledInputs1},
            .btn {
                margin-top: 0;
                margin-bottom: 0;
                // original
                // margin-top: 0.25rem;
                // margin-bottom: 0.25rem;
            }

            .btn-sm {
                margin-top: 0;
                margin-bottom: 0;
                // original
                // margin-top: 0.5rem;
                // margin-bottom: 0.5rem;
            }

            .tooltip-validation {
                height: 1rem;
                input {
                    margin: 0;
                }
            }

            .radio,
            .checkbox,
            .radio-inline,
            .checkbox-inline,
            .toggle-switch {
                label {
                    margin-top: 0;
                    margin-bottom: 0;
                }
            }
        }

        //Media Queries for the form-group for small screens
        @media screen and (max-width: map-get($clr-breakpoints, small)) {

            .form-group {
                padding-left: 0;
                margin-bottom: 1rem;

                & > label:first-child,
                & > label:not(:first-child),
                #{$styledInputs},
                .tooltip-validation,
                .select,
                .toggle-switch,
                .checkbox,
                .radio,
                .checkbox-inline,
                .radio-inline {
                    flex: 1 1 100%;
                }

                & > label:first-child {
                    position: relative;
                    margin: 0 0 0.5rem 0;
                }

                & > label:not(:first-child),
                span {
                    margin: 0.5rem 0.5rem 0 0;
                }

                .tooltip-validation {
                    input {
                        margin: 0;
                        width: 100%;
                    }
                }
            }
        }
    }

    //This class is used to provide validation styling to textboxes.
    //Wrap the textbox with a container extending this class
    .tooltip.tooltip-validation {
        $error-icon-width: $clr-form-icon-dim;
        $error-icon-margin: 0.25rem;

        & > input {
            //6px to the right & left of the error icon + 16px for the width of the error icon
            padding-right: (2 * $error-icon-margin) + $error-icon-width;
        }

        //Tooltips are not visible on hover for validation.
        //They are visible when the user focuses on the input
        &:hover > .tooltip-content {
            visibility: hidden;
            opacity: 0;
        }

        &.invalid {
            & > input {
                $invalid_red: $clr-forms-input-invalid-color;

                border-bottom: $clr-default-borderwidth solid $invalid_red;
                background: linear-gradient(to bottom, transparent 95%, $clr-forms-input-invalid-color 95%);
                transition: none;
            }

            //Show on input focus
            & > input:focus + .tooltip-content {
                background: $clr-forms-input-invalid-color;
                visibility: visible;
                opacity: 1;
            }

            //Adjust tooltip position to be on the icon and
            //not on the middle of the input element
            & > input:focus + .tooltip-content,
            &.tooltip-top-right > input:focus + .tooltip-content,
            &.tooltip-bottom-right > input:focus + .tooltip-content {
                left: 100%;
                right: auto;
                //6px to the right & left of the error icon + 8px for half width of the error icon
                margin-left: -1 * ($error-icon-margin + $error-icon-width / 2);
            }

            &.tooltip-top-left > input:focus + .tooltip-content,
            &.tooltip-bottom-left > input:focus + .tooltip-content {
                right: 0;
                left: auto;
                //6px to the right & left of the error icon + 8px for half width of the error icon
                margin-right: $error-icon-margin + $error-icon-width / 2;
            }

            //Set arrow colors to red :(
            & > .tooltip-content::before, &.tooltip-top-right > .tooltip-content::before {
                @include vertical-tooltip-arrow-color(top, right, $clr-forms-input-invalid-color);
            }

            &.tooltip-top-left > .tooltip-content::before {
                @include vertical-tooltip-arrow-color(top, left, $clr-forms-input-invalid-color);
            }

            &.tooltip-bottom-right > .tooltip-content::before {
                @include vertical-tooltip-arrow-color(bottom, right, $clr-forms-input-invalid-color);
            }

            &.tooltip-bottom-left > .tooltip-content::before {
                @include vertical-tooltip-arrow-color(bottom, left, $clr-forms-input-invalid-color);
            }

            &.tooltip-left > input:focus + .tooltip-content {
                right: 100%;
                left: auto;
                margin: 0 ($error-icon-margin + $error-icon-width/2) 0 0;

                &::before {
                    @include horizontal-tooltip-arrow-color(top, left, $clr-forms-input-invalid-color);
                }
            }

            &.tooltip-right > input:focus + .tooltip-content {
                left: 100%;
                right: auto;
                margin: 0 0 0 ($error-icon-margin + $error-icon-width/2);

                &::before {
                    @include horizontal-tooltip-arrow-color(top, right, $clr-forms-input-invalid-color);
                }
            }

            //Icon
            &::before {
                position: absolute;
                content: '';
                height: $clr-form-icon-dim;
                width: $clr-form-icon-dim;
                top: 0.125rem;
                right: 0.25rem;
                // TODO: move to clr-icon
                background-image: generateErrorIcon($clr-forms-input-invalid-icon-color);
                @include icon-background-styles();
                margin: 0;
            }
        }
    }

    form,
    .form {
        &.compact {
            .form-block {
                margin: 0.5rem 0 1rem 0;
                & > label {
                    margin-bottom: 0;
                }
            }

            .form-group {
                margin-bottom: 0;
            }
        }
    }

    @include fixForIE10AndUp() {
        #{$styledInputs} {
            padding-bottom: 0.125rem;
        }
    }

    // order here is important b/c we need to override the IE10 styles
    @include fixForMsEdge() {
        #{$styledInputs} {
            padding-bottom: 0;
        }
    }
}