// Copyright (C) YOOtheme GmbH, YOOtheme Proprietary Use License (http://www.yootheme.com/license) */

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


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

@form-padding:                                  @form-padding-vertical @form-padding-horizontal;
@form-small-padding:                            @form-small-padding-vertical @form-small-padding-horizontal;
@form-large-padding:                            @form-large-padding-vertical @form-large-padding-horizontal;
@form-height:                                   @global-height;
@form-small-height:                             @global-height-small;
@form-large-height:                             @global-height-large;

@form-small-font-size:                          14px;
@form-large-font-size:                          @global-font-size;

@form-border:                                   @global-border;
@form-border-width:                             @global-border-width;
@form-background:                               @global-background;
@form-color:                                    @global-color;
@form-placeholder-color:                        @global-muted-color;
@form-focus-border:                             @global-primary-background;
@form-focus-background:                         @global-background;
@form-focus-color:                              @global-highlight-color;

@form-disabled-border:                          @global-border;
@form-disabled-background:                      rgba(0,0,0,0);
@form-disabled-color:                           @global-muted-color;

@form-danger-border:                            @global-danger-background;
@form-danger-background:                        @form-background;
@form-danger-color:                             @global-danger-color;

@form-success-border:                           @global-success-background;
@form-success-background:                       @form-background;
@form-success-color:                            @global-success-color;

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

@form-mini-width:                               80px;

@form-legend-border:                            @global-border;
@form-legend-border-width:                      @global-border-width;
@form-legend-font-size:                         round((@global-font-size * 1.28)); // 18px
@form-legend-line-height:                       round((@form-legend-font-size * 1.66)); // 30px

@form-gutter:                                   @global-margin;

@form-icon-width:                               @global-height;
@form-icon-font-size:                           @global-font-size;
@form-icon-color:                               @global-muted-color;

//
// New
//

@form-border-radius:                            @global-border-radius;
@form-padding-horizontal:                       (@form-padding-vertical * 2);
@form-padding-vertical:                         5px;
@form-small-border-radius:                      @global-border-radius;
@form-small-padding-horizontal:                 (@form-small-padding-vertical * 2);
@form-small-padding-vertical:                   @form-padding-vertical;
@form-large-border-radius:                      @global-border-radius;
@form-large-padding-horizontal:                 (@form-large-padding-vertical * 2);
@form-large-padding-vertical:                   @form-padding-vertical;

@form-textarea-border-radius:                   @global-border-radius;

@form-focus-shadow:                             inset 1px 1px 2px rgba(0,0,0,0.1);

@form-autofill-border:                          @form-border;


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

.hook-form() {
    position: relative;
    border-radius: @form-border-radius;
    font-weight: inherit;
}

// Focus state
.hook-form-focus() { box-shadow: @form-focus-shadow; }

// 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() { box-shadow: none; }


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

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

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


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

.hook-form-misc() {

    // Padding for textarea and select element
    .uk-form textarea,
    .uk-form select {
        padding: @form-padding-horizontal;
        border-radius: @form-textarea-border-radius;
    }

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

    // Size modifiers
    select.uk-form-small,
    textarea.uk-form-small,
    input[type].uk-form-small,
    input:not([type]).uk-form-small { border-radius: @form-small-border-radius; }

    select.uk-form-large,
    textarea.uk-form-large,
    input[type].uk-form-large,
    input:not([type]).uk-form-large  { border-radius: @form-large-border-radius; }

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

    // 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-autofill-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;
    }

}
