@mixin form-skin-natural-input($color: #999, $border: #3399e9)
{
    padding: .4em;

    border: 1px solid $border;
    border-top-color: lighten($border, 4%);
    border-bottom-color: darken($border, 4%);

    @include border-radius(.4em);
    @include background(linear-gradient(#fff, darken(#fff, 10%) 1%, #fff 30%));

    @include box-shadow(rgba(0, 0, 0, .1) 0 0 .4em); // , inset rgba(0, 0, 0, .2) 0 1px 2px

    $border-transition: border linear .2s;
    $box-shadow-transition: box-shadow linear .2s;
    $transition: $box-shadow-transition, $border-transition;
    -moz-transition: -moz-$transition;
    -webkit-transition: -webkit-$transition;
    transition: $transition;
}

    @mixin form-skin-natural-input-hover($border: #3399e9)
    {
        @include box-shadow(0 0 .8em rgba($border,.4));
    }

    @mixin form-skin-natural-input-focus($border: #3399e9)
    {
        outline:none; // reset default browser behavior
        border-color: $border;
        @include box-shadow(0 0 .4em rgba($border,.65));
    }

@mixin form-skin-natural-label($color: #999)
{
    cursor: pointer;
    color: $color;
}

    // here we can make better selector because when including mixin, & is too long
    @mixin form-skin-natural-label-adjacent-effect($color-hover, $color-focus)
    {
        label:hover input,      // <label><input /></label>
        label:hover select,     // <label><select /></label>
        label:hover textarea,   // <label><textarea /></label>
        input:hover     + label, // <input /> <label> </label>
        select:hover    + label, // <select /> <label> </label>
        textarea:hover  + label // <textarea /> <label> </label>
        /* CANT WORK :( we need oposited of the + adjacent selector
        label + input:hover,    // <label> </label> <input />
        label + select:hover,   // <label> </label> <select />
        label + textarea:hover, // <label> </label> <textarea />
        */
        {
            color: $color-hover;
        }

        label:focus input,      // <label><input /></label>
        label:focus select,     // <label><select /></label>
        label:focus textarea,   // <label><textarea /></label>
        input:focus     + label, // <input /> <label> </label>
        select:focus    + label, // <select /> <label> </label>
        textarea:focus  + label // <textarea /> <label> </label>
        /* CANT WORK :( we need oposited of the + adjacent selector
        label + input:focus,    // <label> </label> <input />
        label + select:focus,   // <label> </label> <select />
        label + textarea:focus, // <label> </label> <textarea />
        */
        {
            color: $color-focus;
        }
    }

@mixin form-skin-natural-button($color: #fff, $background: #3399e9)
{

    cursor: pointer;
    display: inline-block;
    width: auto;

    color: $color;

    padding: .6em 1em;

    text-shadow: 0 1px 0 rgba(darken($background, 80%), .4);

    border: 1px solid darken($background, 5%);
    border-top-color: darken($background, 10%);
    border-bottom-color: lighten($background, 10%);
    background: $background; //fallback
    @include background(linear-gradient(lighten($background, 10%), darken($background, 10%)));

    @include border-radius(.6em);
    @include box-shadow(rgba(0, 0, 0, .4) 0 .1em .2em);

    &:focus,
    &:hover
    {
        text-decoration: none; // for <a>
        background: darken($background, 5%); //fallback
        @include background(linear-gradient(lighten($background, 12%), darken($background, 12%)));
    }

    &:active
    {
        text-decoration: none; // for <a>
        background: darken($background, 8%); //fallback
        @include background(linear-gradient(darken($background, 12%), lighten($background, 12%)));
    }
}


@mixin form-skin-natural($color-label: #666, $color-input: #999, $border-input: #3399e9, $color-button: #fff, $background-button: #3399e9)
{
    label
    {
        @include form-skin-natural-label($color-label);
    }

    input,
    select,
    textarea
    {
        @include form-skin-natural-input($color-input, $border-input);

        &:hover,
        label:hover + &
        {
            @include form-skin-natural-input-hover($border-input);
        }

        &:focus
        {
            @include form-skin-natural-input-focus($border-input);
        }
    }

    button,
    .button
    {
        @include form-skin-natural-button($color-button, $background-button);
    }
}
