/**
 * @copyright   2010-2015, The Titon Project
 * @license     http://opensource.org/licenses/BSD-3-Clause
 * @link        http://titon.io
 */

@import "../common";

@include export("form") {
    fieldset {
        padding: $padding 0;
        margin: 0;
        border: 0;
        border-top: 1px solid $gray-dark;

        &.no-legend {
            border: 0;
            padding: 0;
        }
    }

    legend {
        font-size: 1.3rem;
        padding-#{$align-opposite-direction}: $padding;
    }

    select[multiple],
    select[size] { height: auto; }

    // Override normalize
    input[type="search"] {
        box-sizing: border-box;
        -webkit-appearance: none;
    }

    // Required values to match browser restrictions
    label,
    #{$form-class-input-static} {
        font-size: inherit;
        line-height: normal;
    }

    //-------------------- Inputs --------------------//

    #{$form-class-input},
    #{$form-class-input-static},
    #{$form-class-input-radio},
    #{$form-class-input-checkbox} {
        @include reset-inline-block;
        line-height: normal;
        border: 1px solid $gray-dark;
        border-radius: 0;
        -webkit-appearance: none; // Remove inner shadow on iOS
        @include size-medium;
        @include is-small(true, true) { @include size-small; }
        @include is-large(true, true) { @include size-large; }
    }

    #{$form-class-input} {
        background: $gray-lightest;
        border-radius: $round;
        transition: all $default-transition;

        &:hover { border-color: $gray-darkest; }

        &:focus {
            border-color: $info;
        }

        &[readonly] {
            color: $gray-darkest;
            border: 1px solid $gray-dark;
        }

        &.is-disabled,
        &[disabled],
        option[disabled],
        optgroup[disabled] {
            color: $gray-darkest;
            border-color: $gray;
        }
    }

    #{$form-class-input-static} {
        background: transparent;
        border-color: transparent;
        padding-#{$align-direction}: 0 !important;
        padding-#{$align-opposite-direction}: 0 !important;
    }

    #{$form-class-input-radio},
    #{$form-class-input-checkbox} {
        padding-#{$align-direction}: 0 !important;
        padding-#{$align-opposite-direction}: 0 !important;
        border: 0;

        input[type="checkbox"],
        input[type="radio"] {
            vertical-align: middle;
            position: relative;
            top: -2px;
            margin-#{$align-opposite-direction}: 5px;
        }

        &.is-disabled {
            color: $gray-darkest;
        }
    }

    select#{$form-class-input} {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;

        &[multiple] {
            max-height: 500px;
        }

        &::-ms-expand {
            display: none;
        }
    }

    textarea#{$form-class-input} {
        line-height: 135%;
        min-height: 150px;
    }

    //-------------------- Fields, Labels --------------------//

    #{$form-class-fields} {
        @include reset-list;
    }

    #{$form-class-field},
    #{$form-class-fields} li {
        margin-bottom: $margin;

        &.is-required {
            #{$form-class-field-label} { font-weight: bold; }
        }

        &:not(.is-disabled) {
            &.is-error {
                #{$form-class-input} {
                    border-color: $error;
                }

                #{$form-class-input-radio},
                #{$form-class-input-checkbox} {
                    color: $error-dark;
                }
            }

            &.is-success {
                #{$form-class-input} {
                    border-color: $success;
                }

                #{$form-class-input-radio},
                #{$form-class-input-checkbox} {
                    color: $success-dark;
                }
            }
        }
    }

    #{$form-class-field-label} {
        display: block;
        vertical-align: middle;
        margin-bottom: .5em;
    }

    #{$form-class-field-help} {
        margin-top: .5em;
        font-size: $small-size;
    }

    #{$form-class-actions} {
        text-align: center;
    }

    //-------------------- Modifiers --------------------//

    @if index($form-modifiers, "horizontal") {
        #{$form-class-modifier-horizontal} {
            #{$form-class-field},
            #{$form-class-fields} li { @include grid-row; }

            #{$form-class-field-label} {
                text-align: $align-opposite-direction;
                border: 1px solid transparent; // matches input sizes
                padding-top: $medium-padding;
            }

            #{$form-class-field-column} {
                padding-#{$align-direction}: $margin;
                text-align: $align-direction;
            }
        }
    }

    @if index($form-modifiers, "inline") {
        #{$form-class-modifier-inline} {
            margin-bottom: -($margin / 2);

            #{$form-class-field},
            #{$form-class-fields} li,
            #{$form-class-field-label},
            #{$form-class-actions},
            fieldset {
                display: inline-block;
                vertical-align: middle;
                line-height: normal;
                margin-#{$align-opposite-direction}: $margin;
                margin-bottom: $margin / 2;
            }

            fieldset {
                border: 0;
                margin: 0;
                padding: 0;
            }

            #{$form-class-field-label} {
                margin: 0;
                margin-#{$align-opposite-direction}: ($margin / 2);
            }

            legend,
            #{$form-class-field-help} { display: none; }
        }
    }
}