@mixin form-control-base($fz:$font-size-default,$bg-color:$color-bg,$border-color:$color-border,$color:$color-text,$radius:$border-radius) {
    display: inline-block;
    box-sizing: border-box;
    vertical-align: middle;
    height: $form-height;
    padding-left: 10px;
    padding-right: 10px;
    font-size: $fz;
    border: 1px solid $border-color;
    border-radius: $radius;
    background-color: $bg-color;
    color: $color;
    transition: .2s ease-in-out;
    transition-property: color, background-color, border;
}

@mixin form-control-hover($border-color:$color-border-hover) {
    &:hover {
        border-color: $border-color;
        outline: 0;
    }
}

@mixin form-control-focus($border-color:$color-primary) {
    &:focus {
        border-color: $border-color  ;
        outline: 0;
    }
}

@mixin form-control-disabled($bg-color:$color-bg-disabled,$border-color:$color-border-disabled,$color:$color-text-disabled) {
    &:disabled {
        background-color: $bg-color;
        border-color:$border-color;
        color: $color;
        background-image: none;
        cursor: not-allowed;
    }
    &:disabled:hover,
    &:disabled:focus {
        border-color: $border-color;
    }
}

@mixin form-control-readonly($bg-color:$color-bg-disabled,$border-color:$color-border-disabled,$color:$color-text-disabled) {
    &[readonly],
    &[readonly="readonly"] {
        border-color: $border-color;
        background-color: $bg-color;
        color: $color;
    }
    &[readonly]:focus,
    &[readonly="readonly"]:focus,
    &[readonly]:hover,
    &[readonly="readonly"]:hover {
        outline: 0 none;
        border-color: $border-color;
    }
}

@mixin form-control-placeholder() {
    /* Chrome/Opera/Safari */
    /* Firefox 19+ */
    /* IE 10+ */
    /* Firefox 18- */
    &::-webkit-input-placeholder {
        color: $form-placeholder;
    }
    &::-moz-placeholder {
        color: $form-placeholder;
    }
    &:-ms-input-placeholder {
        color: $form-placeholder;
    }
    &:-moz-placeholder {
        color: $form-placeholder;
    }
}

@mixin form-control-invalid() {
    .is-error & {
        color: $color-error;
        border-color: $color-error;
    }
}