@mixin input-size($padding-vertical, $padding-horizontal){

padding: $padding-vertical $padding-horizontal;

}

@mixin form-control-placeholder($color, $opacity){

.form-control::-moz-placeholder{
    color: $color;
    @include opacity(1);
}
.form-control:-moz-placeholder{
    color: $color;
    @include opacity(1);
}
.form-control::-webkit-input-placeholder{
    color: $color;
    @include opacity(1);
}
.form-control:-ms-input-placeholder{
    color: $color;
    @include opacity(1);
}

}

@mixin placeholder() {

&::-moz-placeholder {@content; } // Firefox
&:-ms-input-placeholder {@content; } // Internet Explorer 10+
&::-webkit-input-placeholder  {@content; } // Safari and Chrome

}

@mixin light-form(){

border-radius: 0;
border:0;
padding: 0;
background-color: transparent;

}

@mixin form-control-lg-padding($padding-vertical, $padding-horizontal) {

.form-group.no-border.form-control-lg,
.input-group.no-border.form-control-lg{
    .input-group-append .input-group-text{
        padding: $padding-vertical 0 $padding-vertical $padding-horizontal;
    }

    .form-control{
        padding: $padding-vertical $padding-horizontal;

        & + .input-group-prepend .input-group-text,
        & + .input-group-append .input-group-text{
            padding: $padding-vertical $padding-horizontal $padding-vertical 0;
        }

    }
}

.form-group.form-control-lg,
.input-group.form-control-lg{
    .form-control{
        padding: $padding-vertical - 1 $padding-horizontal - 1;
        height: 100%;

        & + .input-group-prepend .input-group-text,
        & + .input-group-append .input-group-text{
            padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 0;
        }
    }

    .input-group-prepend .input-group-text,
    .input-group-append .input-group-text{
        padding: $padding-vertical - 1 0 $padding-vertical $padding-horizontal - 1;

        & + .form-control{
            padding: $padding-vertical  $padding-horizontal - 1 $padding-vertical $padding-horizontal - 3;
        }
    }
}

}

@mixin input-base-padding($padding-vertical, $padding-horizontal) {

.form-group.no-border,
.input-group.no-border{
    .form-control{
        padding: $padding-vertical $padding-horizontal;

        & + .input-group-prepend .input-group-text,
        & + .input-group-append .input-group-text{
            padding: $padding-vertical $padding-horizontal $padding-vertical 0;
        }
    }

    .input-group-prepend .input-group-text,
    .input-group-append .input-group-text{
        padding: $padding-vertical 0 $padding-vertical $padding-horizontal;
    }
}

.form-group,
.input-group{
    .form-control{
        padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 $padding-horizontal - 1;

        & + .input-group-prepend .input-group-text,
        & + .input-group-append .input-group-text{
            padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 0;
        }
    }

    .input-group-prepend .input-group-text,
    .input-group-append .input-group-text{
        padding: $padding-vertical - 1 0 $padding-vertical - 1 $padding-horizontal - 1;

        & + .form-control,
        & ~ .form-control{
            padding:$padding-vertical - 1 $padding-horizontal $padding-vertical $padding-horizontal - 3;
        }
    }
}

}

//color1 = $opacity-5 //color2 = $opacity-8 //color3 = $white-color //color4 = $transparent-bg //color5 = $opacity-1 //color6 = $opacity-2

@mixin input-coloured-bg($color1, $color2, $color3, $color4, $color5, $color6) {

@include form-control-placeholder(rgba($white, 0.4), 1);

.form-control{
    border-color: $color1;
    color: $color2;

    &:focus{
        border-color: $color3;
        background-color: $color4;
        color: $color3;
    }
}

.has-success,
.has-danger{
    &:after{
        color: $color3;
    }
}

.has-danger{
    .form-control{
        background-color: $color4;
    }
}

.input-group-prepend{
  margin-right: 0;
}

.input-group-prepend .input-group-text,
.input-group-append .input-group-text{
    background-color: rgba($background-black, 0.2);
    border-color: $color1;
    color: $color2;

}

.input-group-focus{
    .input-group-prepend .input-group-text,
    .input-group-append .input-group-text{
        background-color: rgba($background-black, 0.3);
        border-color: $color3;
        color: $color3;
    }
}

.form-group.no-border,
.input-group.no-border{
    .form-control{
        background-color: rgba($background-black,0.2);
        color: $color2;

        &:focus,
        &:active,
        &:active{
            background-color: rgba($background-black,0.3);
            color: $color3;
        }
    }

    .form-control + .input-group-prepend .input-group-text,
    .form-control + .input-group-append .input-group-text{
        background-color: rgba($background-black,0.2);;

        &:focus,
        &:active,
        &:active{
            background-color: rgba($background-black,0.3);
            color: $color3;
        }
    }

    .form-control{
        &:focus{
            & + .input-group-prepend .input-group-text,
            & + .input-group-append .input-group-text{
                background-color: rgba($background-black, 0.3);
                color: $color3;
            }
        }
    }

    .input-group-prepend .input-group-text,
    .input-group-append .input-group-text{
        background-color: rgba($background-black, 0.2);
        border: none;
        color: $color2;
    }

    &.input-group-focus{
        .input-group-prepend .input-group-text,
        .input-group-append .input-group-text{
            background-color: rgba($background-black, 0.3);
            color: $color3;
        }
    }
}

}