// Name:            Form
// Description:     Defines styles for forms
//
// Component:       `uk-form`
//
// Sub-objects:     `uk-form-row`
//                  `uk-form-help-inline`
//                  `uk-form-help-block`
//                  `uk-form-label`
//                  `uk-form-controls`
//                  `uk-form-controls-condensed`
//
// Modifiers:       `uk-form-stacked`
//                  `uk-form-horizontal`
//
// Sub-modifiers:   `uk-form-danger`
//                  `uk-form-success`
//                  `uk-form-small`
//                  `uk-form-large`
//                  `uk-form-blank`
//                  `uk-form-width-mini`
//                  `uk-form-width-small`
//                  `uk-form-width-medium`
//                  `uk-form-width-large`
//                  `uk-form-controls-text`
//
// Markup:
//
// <!-- uk-form -->
// <form class="uk-form">
//     <div class="uk-form-row">
//         <label class="uk-form-label" for="form-input-1"></label>
//         <div class="uk-form-controls">
//             <input type="text" id="form-input-1" placeholder="Text">
//         </div>
//     </div>
// </form>
//
// ========================================================================


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


@form-height:                                   @global-height;
@form-placeholder-color:                        lighten(@global-color, 10%);
@form-gutter:                                   1em;

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

@form-small-font-size:                          round((@global-font-size * 0.85)); // 12px / 14px
@form-large-font-size:                          round((@global-font-size * 1.14)); // 16px / 18px

@form-disabled-color:                           @global-muted-color;

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

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

@form-blank-border:                             fade(@global-border, 75%);
@form-dark-blank-border:                        fade(@global-dark-border, 60%);
@form-blank-border-style:                       dashed;

@form-mini-width:                               64px;
@form-small-width:                              128px;
@form-medium-width:                             256px;
@form-large-width:                              512px;

@form-help-inline-margin-left:                  @global-margin-small;
@form-help-block-margin-top:                    @global-margin-small;

@form-controls-condensed-margin-vertical:       @global-margin-small;

@form-stacked-margin-bottom:                    @global-margin-small;
@form-stacked-font-weight:                      500;

@form-horizontal-label-width:                   120px;
@form-horizontal-label-margin-top:              @global-margin-mini;
@form-horizontal-controls-text-padding-top:     @global-margin-small;

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

/*
 * 1. Correct `font` properties not being inherited.
 * 2. Don't inherit the `font-weight` and use `bold` instead.
 * NOTE: Both declarations don't work in Chrome, Safari and Opera.
 */

.uk-form optgroup {
    /* 1 */
    font: inherit;
    /* 2 */
    font-weight: bold;
}

/*
 * Define consistent border, margin, and padding.
 */

.uk-form fieldset {
    border: none;
    margin: 0;
    padding: 0;
}


/* Style
 ========================================================================== */

/*
 * Removes placeholder transparency in Firefox.
 */

.uk-form ::-moz-placeholder { opacity: 1; }

 /*
 * Removes `box-shadow` for invalid controls in Firefox.
 */

.uk-form :invalid { box-shadow: none; }

/*
 * Placeholder
 */

.uk-form :-ms-input-placeholder { color: @form-placeholder-color !important; }
.uk-form ::-moz-placeholder { color: @form-placeholder-color; }
.uk-form ::-webkit-input-placeholder { color: @form-placeholder-color; }

.uk-form :disabled:-ms-input-placeholder { color: @form-disabled-color !important; }
.uk-form :disabled::-moz-placeholder { color: @form-disabled-color; }
.uk-form :disabled::-webkit-input-placeholder { color: @form-disabled-color; }

/*
 * Legend
 * 1. Behave like block element
 * 2. Correct `color` not being inherited in IE 8/9/10/11.
 * 3. Remove padding
 * 4. `margin-bottom` is not working in Safari and Opera.
 *    Using `padding` and :after instead to create the border
 * 5. Style
 */

.uk-form legend {
    /* 1 */
    width: 100%;
    /* 2 */
    border: 0;
    /* 3 */
    /* 4 */
    padding: 0 0 @form-gutter;
    /* 5 */
    font-size: @form-legend-font-size;
    line-height: @form-legend-line-height;
    .hook-form-legend;
}

/*
 * 1. Fixes IE9
 */

.uk-form legend:after {
    content: "";
    display: block;
    border-bottom: @form-legend-border-width solid @form-legend-border;
    /* 1 */
    width: 100%;
}


/* Size modifiers
 * Higher specificity needed to override defaults
 ========================================================================== */

select.uk-form-small,
textarea.uk-form-small,
input[type].uk-form-small,
input:not([type]).uk-form-small {
    font-size: @form-small-font-size;
}

select.uk-form-large,
textarea.uk-form-large,
input.uk-form-large  {
    font-size: @form-large-font-size;
}


/* Reset height
 * Must be after size modifiers
 ========================================================================== */

.uk-form textarea,
.uk-form select[multiple],
.uk-form select[size] { height: auto; }


/* Validation states
 * Using !important to keep the selector simple
 ========================================================================== */

/*
 * Error state
 */

.uk-form-danger {
    border-color: @form-danger-border !important;
    color: @form-danger-color !important;
    .hook-form-danger;
}

/*
 * Success state
 */

.uk-form-success  {
    border-color: @form-success-border !important;
    color: @form-success-color !important;
    .hook-form-success;
}


/* Style modifiers
 * Using !important to keep the selector simple
 ========================================================================== */

/*
 * Blank form
 */

.uk-form-blank {
    border: @form-blank-border-style transparent !important;
    background: none !important;
    .hook-form-blank;
}

.uk-form-blank:focus {
    border-color: @form-blank-border !important;
    .hook-form-blank-focus;
}


/* Size sub-modifiers
 ========================================================================== */

/*
 * Fixed widths
 * Different widths for mini sized `input` and `select` elements
 */

input.uk-form-width-mini { width: @form-mini-width; }
select.uk-form-width-mini { width: (@form-mini-width + 25px); }
.uk-form-width-small { width: @form-small-width; }
.uk-form-width-medium { width: @form-medium-width; }
.uk-form-width-large { width: @form-large-width; }


/* Sub-objects: `uk-form-row`
 * Groups labels and controls in rows
 ========================================================================== */

/*
 * Micro clearfix
 * Needed for `uk-form-horizontal` modifier
 */

.uk-form-row:before,
.uk-form-row:after {
    content: "";
    display: table;
}

.uk-form-row:after { clear: both; }

/*
 * Vertical gutter
 */

.uk-form-row + .uk-form-row { margin-top: @form-gutter; }

/*
 * Line style
 */
.uk-form-line .uk-form-row {
    border-bottom: solid 1px @form-blank-border;
    padding: 0 @form-gutter @form-gutter;

    .dark & {
        border-color: @form-dark-blank-border;
    }
}


/* Help text
 * Sub-object: `uk-form-help-inline`, `uk-form-help-block`
 ========================================================================== */

.uk-form-help-inline {
    display: inline-block;
    margin: 0 0 0 @form-help-inline-margin-left;
}

.uk-form-help-block { margin: @form-help-block-margin-top 0 0 0; }


/* Controls content
 * Sub-object: `uk-form-controls`, `uk-form-controls-condensed`
 ========================================================================== */

/*
 * Remove margins
 */

.uk-form-controls > :first-child { margin-top: 0; }
.uk-form-controls > :last-child { margin-bottom: 0; }

/*
 * Group controls and text into blocks with a small spacing between blocks
 */

.uk-form-controls-condensed { margin: @form-controls-condensed-margin-vertical 0; }


/* Modifier: `uk-form-stacked`
 * Requires sub-object: `uk-form-label`
 ========================================================================== */

.uk-form-stacked .uk-form-label {
    display: block;
    margin-bottom: @form-stacked-margin-bottom;
    font-weight: @form-stacked-font-weight;
    .hook-form-stacked-label;
}


/* Modifier: `uk-form-horizontal`
 * Requires sub-objects: `uk-form-label`, `uk-form-controls`
 ========================================================================== */

/* Tablet portrait and smaller */
@media (max-width: @breakpoint-mini-max) {

    .uk-form-horizontal .uk-form-label {
        width: @form-horizontal-label-width * 0.75;
        margin-top: @form-horizontal-label-margin-top * 0.75;
        float: left;
        .hook-form-horizontal-label;
    }

    .uk-form-horizontal .uk-form-controls {
        height: @form-height;

        &::before {
            content: '';
            display: inline-block;
            height: 100%;
            vertical-align: middle;
        }
    }

    /* Better vertical alignment if controls are checkboxes and radio buttons with text */
    .uk-form-horizontal .uk-form-controls-text { padding-top: @form-horizontal-controls-text-padding-top; }

}

/* Desktop and bigger */
@media (min-width: @breakpoint-small) {

    .uk-form-horizontal .uk-form-label {
        width: @form-horizontal-label-width;
        margin-top: @form-horizontal-label-margin-top;
        float: left;
        .hook-form-horizontal-label;
    }

    .uk-form-horizontal .uk-form-controls {
        height: @form-height;

        &::before {
            content: '';
            display: inline-block;
            height: 100%;
            vertical-align: middle;
        }
    }

    /* Better vertical alignment if controls are checkboxes and radio buttons with text */
    .uk-form-horizontal .uk-form-controls-text { padding-top: @form-horizontal-controls-text-padding-top; }

}


// Hooks
// ========================================================================

.hook-form-legend() {}
.hook-form-danger() {}
.hook-form-success() {}
.hook-form-blank() {}
.hook-form-blank-focus() {}
.hook-form-stacked-label() {}
.hook-form-horizontal-label() {}