//
// Component: Form
//
// ========================================================================


// Variables
// ========================================================================

@form-height:                                   @global-height;
@form-border:                                   rgba(0,0,0,0.15);
@form-border-width:                             1px;
@form-background:                               @global-background;
@form-color:                                    @global-color;

@form-focus-border:                             fade(@global-primary-background, 75%);
@form-focus-background:                         @global-background;
@form-focus-color:                              @global-color;

@form-disabled-border:                          @global-border;
@form-disabled-background:                      @global-light-background;
@form-disabled-color:                           @global-muted-color;

@form-placeholder-color:                        fade(@global-color, 50%);

@form-gutter:                                   @global-margin;

@form-legend-border:                            rgba(0,0,0,0);
@form-legend-font-size:                         round((@global-font-size * 1.28));
@form-legend-line-height:                       round((@form-legend-font-size * 1.66));

@form-small-height:                             @global-small-height;
@form-large-height:                             @global-large-height;
@form-large-padding:                            8px 12px;
@form-small-font-size:                          round((@global-font-size * 0.85));
@form-large-font-size:                          @global-font-size;

@form-danger-border:                            fade(@form-danger-color, 50%);
@form-danger-background:                        fade(@form-danger-color, 10%);
@form-danger-color:                             @global-danger-background;

@form-success-border:                           fade(@form-success-color, 70%);
@form-success-background:                       fade(@form-success-color, 10%);
@form-success-color:                            @global-success-background;

@form-blank-border:                             @global-border;

@form-icon-width:                               @global-height;
@form-icon-font-size:                           @global-font-size;
@form-icon-color:                               @global-dark-2-shadow;

@form-font-weight:                              @global-body-font-weight;
@form-font-size:                                @global-font-size;
@form-input-border-radius:                      50px;

// Component
// ========================================================================

.hook-form() { 
    font-weight: @form-font-weight;
    border-radius: @form-input-border-radius;
    padding: 5px 10px;
    box-shadow: 0 0 30px 0 fade(@global-dark-background, 15%);
}

// Focus state
.hook-form-focus() {
    box-shadow: 5px 0 40px 0 fade(@global-primary-background, 25%);
}

// Disabled state
.hook-form-disabled() {}

// Legend
.hook-form-legend() {}


// Validation states
// ========================================================================

//
// Error state
//

.hook-form-danger() {}

//
// Success state
//

.hook-form-success() {}


// Style modifiers
// ========================================================================

.hook-form-blank() {}
.hook-form-blank-focus() {}


// Sub-object: `uk-form-label`
// ========================================================================

.hook-form-stacked-label() {}

.hook-form-horizontal-label() {}


// Miscellaneous
// ========================================================================

.hook-form-misc() {

    // Adding more space to the label
    .uk-form-label + input,
    .uk-form-label + textarea { margin-top: 5px !important; }

    textarea {
        border-radius: 20px !important;
        box-shadow: 0 0 30px 0 fade(@global-dark-background, 15%);

        &:focus {
            box-shadow: 5px 0 40px 0 fade(@global-primary-background, 25%) ;
        }
    }

    // Form icon
    .uk-form-icon > [class*='ut-icon-'] {
        position: absolute;
        top: 50%;
        z-index: 1;
        line-height: 1;
        width: @form-icon-width;
        margin-top: round(@form-icon-font-size / -2);
        font-size: @form-icon-font-size + 2;
        color: @form-icon-color;
        text-align: center;
        pointer-events: none;
    }

    .uk-form-icon > [class*='uk-icon-'] { 
        z-index: 1;
    }

    .tm-textarea-icon {
        > [class*='uk-icon-'] {top: 22px; }
        textarea { padding-left: 40px !important; }
    }

    .uk-form input {
        border-radius: @form-input-border-radius;
    }

    .uk-form input[type="checkbox"] {
        border-radius: 2px;
    }

    .uk-form label.radio {
        line-height: 0.5;
        padding-left: 30px;
    }

    .uk-form-password-toggle {
        i {
            font-family: @global-utouch-icon;
        }

        .uk-icon-eye:before {
            content: "\f23a";
        }

        .uk-icon-eye-slash:before {
            content: "\f23e";
        }
    }

    // Reseting -webkit- autofill styling in Chrome browser
    .uk-form input:-webkit-autofill {
        -webkit-box-shadow: 0 0 0px @form-height @form-background inset !important;
        border-color: @form-border !important;
        -webkit-text-fill-color: @form-placeholder-color;
    }

    .uk-form input:-webkit-autofill:focus {
        -webkit-box-shadow: 0 0 0px @form-height @form-focus-background inset !important;
        border-color: @form-focus-border !important;
        -webkit-text-fill-color: @form-focus-color;
    }

    // invalid fields
    input:focus:invalid:focus, 
    textarea:focus:invalid:focus,
    select:focus:invalid:focus {
        border-color: @global-danger-background;
        box-shadow: 0 0 30px 0 fade(@global-danger-background, 15%);
    }

    .tm-primary-background,
    .tm-primary-2-background,
    .tm-primary-3-background,
    .tm-primary-4-background,
    .tm-secondary-background,
    .tm-primary-2-overlay,
    .tm-primary-3-overlay {

        .sppb-optin-form,
        .uk-form {
            select,
            textarea,
            input:not([type]),
            input[type="text"],
            input[type="password"],
            input[type="datetime"],
            input[type="datetime-local"],
            input[type="date"],
            input[type="month"],
            input[type="time"],
            input[type="week"],
            input[type="number"],
            input[type="email"],
            input[type="url"],
            input[type="search"],
            input[type="tel"],
            input[type="color"] {
                color: @global-contrast-color;
                border-width: 1px;
                background-color: rgba(0,0,0,0.075);
                border-color: rgba(255,255,255,0.25);
                box-shadow: inset 0 0px 3px @global-dark-15-shadow;

                &:focus {
                    color: @global-color;
                    background-color: @global-contrast-color;
                    border-color: rgba(0,0,0,0.1);

                    &:-ms-input-placeholder { color: fade(@global-color, 30%) !important; }
                    &::-moz-placeholder { color: fade(@global-color, 30%); }
                    &::-webkit-input-placeholder { color: fade(@global-color, 30%); }
                }
            }

            :-ms-input-placeholder { color: fade(@global-contrast-color, 70%) !important; }
            ::-moz-placeholder { color: fade(@global-contrast-color, 70%); }
            ::-webkit-input-placeholder { color: fade(@global-contrast-color, 70%); }
        }
    }
}