//==============================================================================
// FORMS
//==============================================================================

// FORM VARIABLES
// -----------------------------------------------------------------------------

$fieldPadding: .5em;
$fieldBorderColor: #ccc;





// BASIC FORM STYLING
// -----------------------------------------------------------------------------

legend {
    display: table; // Enable line-wrapping in IE8+
    white-space: normal; // Enable line-wrapping in old versions of some other browsers
}



input,
textarea,
button,
select {
    margin: 0;
    font-size: 100%;
    font-family: $font-stack;
    line-height: normal;
    vertical-align: baseline;
}



label,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="image"],
button {
    cursor: pointer;
}



input,
button {
    &::-moz-focus-inner {
        padding: 0;
        border: 0;
    }
}



[disbaled] {
    cursor: default;
}



input[type="search"] {
    &::-webkit-search-cancel-button {
        cursor: pointer;
    }
}




@include _placeholder {
    font-style: italic;
};



select {
    cursor: pointer;
}



textarea {
    resize: vertical;
    overflow: auto; // Safari 6 fix
    min-height: 6em;
}



input[type="checkbox"],
input[type="radio"] {
    @include rem(margin-right, 5px);
}



input[type="color"]{
}



input[type="range"]{
}



input[type="image"]{
}



input[type="date"],
input[type="month"],
input[type="week"],
input[type="datetime"],
input[type="datetime-local"]{
}



input[type="tel"],
input[type="number"],
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="search"],
select,
textarea {
    width: 100%;
}



input[type="submit"],
button {
}




input[type="reset"] {
}





// BLANK FORM COMPONENTS
// -----------------------------------------------------------------------------

/*==============================================================================
Forms

 Styling for forms & form related elements like, <legend>, <fieldset>.

 Markup:
 <form class="b-form">

 </form>

 #{$namespace}form    - Generic class for forms
 ==============================================================================*/

#{$namespace}form {
    &,
    fieldset {
        @include rem(margin-bottom, $verticalspace);
    }

    > :last-child,
    > :last-child > :last-child {
        margin-bottom: 0;
    }
}



/*==============================================================================
 Form Holder

 The wrapper that holds form input & labels, can be whatever element.

 Markup:
 <div class="b-form__holder">
    Form elements here
 </div>

 #{$namespace}form__holder
 ==============================================================================*/

#{$namespace}form__holder {
    @include rem(margin-bottom, $verticalspace);
}





/*==============================================================================
 Form field

 The form field itself, textfields, select, textarea

 Markup:
 <input class="b-form__field">

 #{$namespace}form__field
 ==============================================================================*/

#{$namespace}form__field {
    border: 1px solid $fieldBorderColor;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-border-radius: 0;
    padding: $fieldPadding;
    box-shadow: inset 0 .15em .15em rgba($fieldBorderColor, .5);

    &:hover {

    }

    &:focus {

    }
}






/*==============================================================================
 Custom select

 Select element with custom styling

 Markup:
 <select class="b-select">
 </select>

 #{$namespace}select
 ==============================================================================*/

#{$namespace}select {
    padding: $fieldPadding/2 $fieldPadding;
    box-shadow: 0 .15em .15em rgba($fieldBorderColor, .5);
    background-repeat: no-repeat;
    background-position: right 50%;
    background-image: url(../img/select-arrow.svg);
    background-size: 11px 41%;

    // IE 10+
    &::-ms-expand {
        display: none;
    }

    // FF hack doesn't work anymore https://gist.github.com/joaocunha/6273016
    @-moz-document url-prefix() {
        & {
            background-image: none;
        }
    }

    // Others who doesn't support SVG
    .no-svg &{
        background-image: url(../img/select-arrow.png);
    }

    &:hover,
    &:focus {

    }
}





// FORM MESSAGES
// -----------------------------------------------------------------------------

/*==============================================================================
 Form Messages

 Error, Succes or info messages in forms

 Markup:
 <form class="b-form">
     <ul>
         <li class="b-form__holder bl-form__message--error|success">
             <label>Label</label>
             <input>
             <span class="b-form-message">Message</span>
         </li>
     </ul>
 </form>

 #{$namespace}form__message--error|success   - remove the class for an info message
 #{$namespace}form__message
 ==============================================================================*/

#{$namespace}form__message {
    font-size: 75%;
    padding: .5em;
    display: block;
}



#{$namespace}form__message--error {
    > label,
    > #{$namespace}form__field,
    > #{$namespace}form__message {
        color: $error;
        border-color: $error;
    }

    > #{$namespace}form__field {
        &::-webkit-input-placeholder {
            color: $error;
        }

        &:-moz-placeholder {
            color: $error;
        }

        &:-ms-input-placeholder {
            color: $error;
        }
    }

    > #{$namespace}form__message {
        background-color: lighten($error, 50%);
    }
}



#{$namespace}form__message--success {
    > label,
    > #{$namespace}form__field,
    > #{$namespace}form__message {
        color: $success;
        border-color: $success;
    }

    > #{$namespace}form__field{
        &::-webkit-input-placeholder {
            color: $success;
        }

        &:-moz-placeholder {
            color: $success;
        }

        &:-ms-input-placeholder {
            color: $success;
        }
    }

    > #{$namespace}form__message {
        background-color: lighten($success, 50%);
    }
}