// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
//
//  Ninja Forms 3 - Enhancements & Fixes | Version: Beta 3.0
//
// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
//  Variable Declaration
// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

$nf-border: rgba( contrasted( $base ), 0.25 ); // The color used for borders of the form and input fields
$nf-error: #CC0000; // A color utilized in various error areas

$nf-button: ( // Set a variable map to store the colors used for various button styles
    basic: ( // The colors used for the default state of a button
        color: contrasted( $accent1 ), // The buttons text color
        bg: $accent1, // The buttons background color
    ),
    hover: ( // The colors used for the hovered state of a button
        color: contrasted( $accent2 ), // The buttons text color
        bg: $accent2, // The buttons background color
    )
);

// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
//  Placeholder Styles
// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

// A SCSS Placeholder Selector for Ninja Form Buttons
%nf-button {
    @include transitions( color 250ms, background 250ms ); // Allow a favorable transition
    @include appearance( none ); // Force the button to not use apple default on mobile
    padding: 0.5em 2.5em; // Increase width of the button
    color: map-get( map-get( $nf-button, basic ), color ); // Set the text color to the custom color defined for basic
    background: map-get( map-get( $nf-button, basic ), bg ); // Set the backgroud to the custom color defined for basic
    border: none; // Remove the border set to inputs
    cursor: pointer; // Alter the cursor to inform user that the button may be clicked
    
    //Extra custom//
    font-weight: bold;
    text-transform: uppercase;
    font-family: $font1;

    &:hover {
        color: map-get( map-get( $nf-button, hover ), color ); // Set the text color to the custom color defined for hover
        background: map-get( map-get( $nf-button, hover ), bg ); // Set the background to the custom color defined for hover
    }
}

// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
//  Form Styles
// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

// Ninja Forms Minor Fixes
.nf-form-wrap {
    padding: 1em; // Add in white space
    //border: 1px solid $nf-border; // Add a border to define the area

    // Required Field Indicator
    .nf-before-form-content {
        .nf-form-fields-required {
            font-size: 0.75em; // Shrink text for aesthetics
            text-align: right; // Align to the right of the form
        }
    }

    // Ninja Form Fields
    .nf-field-container {
        margin-bottom: 0; // Due to fixing the required field's height (below), we no longer need to define spacing here

        .nf-field {
            // Ninja Form Labels
            .nf-field-label {
                @include flex-grow( 1 ); // Corrects an issue with single checkboxes which forces the label to wrap
                margin-bottom: 0; // Removes unwanted spacing between the label and the input
            }

            // Ninja Form Elements
            .nf-field-element {
                input,
                textarea {
                    padding: 0.5em; // Add in white space
                    border: 1px solid $nf-border; // Unify the border color to match that of the form
                }

                textarea {
                    resize: vertical; // Restrict user from being able to shrink the text-area horizontally, vertical alignment is allowed
                }
            }

            // Select Lists
            .list-select-wrap select,
            .list-multiselect-wrap option {
                padding: 0.5em; // Add in white space
            }

            // File Uploads
            .file_upload-wrap {
                button {
                    @extend %nf-button; // Extend the Placeholder Ninja Form Button SCSS
                    margin-top: 0.5em; // Add in white space
                }
            }

            // Table Editor
            .table_editor-wrap {
                .htCore {
                    display: table; // Ninja Forms converts the table to be a block which prevents proper spacing on responsive. - Undoing the delcaration
                    table-layout: auto; // This is set to fixed by Ninja Forms which causes a sizeable horizontal scroll while resizing the viewport. - Undoing the declaration
                }

                .handsontable,
                .htCore,
                .wtHider,
                .wtSpreader {
                    width: 100% !important; // Force the table to be full width
                }
            }

            // The Submit Button
            .submit-wrap {
                .nf-field-element {
                    input {
                        @extend %nf-button; // Extend the Placeholder Ninja Form Button SCSS
                    }
                }
            }

            // Ninja Form Errors
            .nf-error {
                .nf-field-element {
                    input {
                        border-color: $nf-error; // Highlight the errored input to draw user attention
                    }
                }
            }
        }

        // Ninja Form Errors
        &:not( .submit-container ) .nf-after-field {
            min-height: 1.5em; // Prevent the forms height from jumping when an error appears

            .nf-error-msg {
                color: $nf-error; // Set the text color to the custom color defined for errors
                font-size: 0.75em; // Shrink text for aesthetics
                text-align: right; // Align to the right of the field
            }
        }
    }
}

// Form Title Spacing Fix
.nf-form-title {
    h3 {
        padding-bottom: 0.5em; // Adds a space to the title only when the H3 is present
    }
}

// Multi Part Form Fixes
.nf-mp-header,
.nf-mp-footer {
    padding: 0.25em; // Add in white space

    // Multi Part Bread Crumbs
    .nf-breadcrumbs {
        li {
            a {
                @include transitions( color 250ms, background 250ms ); // Allow a favorable transition
                padding: 0.5em; // Add in white space
                color: map-get( map-get( $nf-button, basic ), color ); // Set the text color to the custom color defined for basic
                font-size: 0.85em; // Shrink text for aesthetics
                background: map-get( map-get( $nf-button, basic ), bg ); // Set the backgroud to the custom color defined for basic
            }

            &.active > a,
            a:hover {
                color: map-get( map-get( $nf-button, hover ), color ); // Set the text color to the custom color defined for hover
                font-weight: inherit; // Remove the bold active indicator as we are altering other properties
                background: map-get( map-get( $nf-button, hover ), bg ); // Set the background to the custom color defined for hover
            }
        }
    }

    // Multi Part Next and Previous Buttons
    .nf-next-previous {
        li {
            min-width: 15%; // Uniform the buttons widths

            input {
                @extend %nf-button; // Extend the Placeholder Ninja Form Button SCSS
                width: 100%; // Uniform the buttons widths
                padding: 0.5em 1em; // Reduce padding for button
            }
        }
    }

    h3 {
        margin: 0 0 1em; // Uniform the space around the heading while separating it from the form below
        padding: 0 0 0.25em; // Uniform the space around the heading while separating it from the border below
        border-bottom: 1px solid $nf-border; // Add a border to define the area
    }
}