@import "variable"; // variable

/*    Input Style
------------------------*/

.form-group {
    margin-bottom: 20px;
}

.form-control {
    height: 42px;
    border-radius: 0px;
    box-shadow: none;
    border-color: $border;
    font-family: $mol;
    &:hover {
        box-shadow: none;
        border-color: $border;
    }
    &:focus,
    &.active {
        box-shadow: none;
        border-color: $default;
    }
}

.input-default {
    border-radius: 4px;
}

.input-flat {
    border-radius: 0px;
}

.input-rounded {
    border-radius: 100px;
}

.input-focus {
    border-color: $primary;
    &:focus {
        border-color: $primary;
    }
}


/*    Search Box Input Button
--------------------------------*/

.input-group-btn {
    .btn {
        padding: 10px 12px;
    }
}

.input-group-default {
    .form-control {
        border-radius: 4px;
    }
}

.input-group-flat {
    .form-control {
        border-radius: 4px;
    }
    .btn {
        border-radius: 0px;
        border-radius: 0px;
    }
}

.input-group-rounded {
    .form-control {
        border-radius: 100px;
    }
    .btn-group-left {
        border-top-left-radius: 100px;
        border-bottom-left-radius: 100px;
    }
    .btn-group-right {
        border-top-right-radius: 100px;
        border-bottom-right-radius: 100px;
    }
}

.input-group-close-icon {
    background: none;
    color: $black;
    border-color: $border;
    //    border-left: 1px solid $white;
    &:hover,
    &:focus,
    &.active {
        background: none;
        border-color: $border;
        color: $black;
    }
}


/*    Input States
-----------------------*/

.has-default,
.has-success,
.has-warning,
.has-error {
    .form-control {
        &:hover,
        &:focus,
        &.active {
            box-shadow: none;
        }
    }
}

.has-default {
    .control-label {
        color: $default;
    }
    .form-control {
        border-color: $default;
        &:hover,
        &:focus,
        &.active {
            border-color: $default;
        }
    }
}

.has-success {
    .control-label {
        color: $success;
    }
    .form-control {
        border-color: $success;
        &:hover,
        &:focus,
        &.active {
            border-color: $success;
        }
    }
}

.has-warning {
    .control-label {
        color: $warning;
    }
    .form-control {
        border-color: $warning;
        &:hover,
        &:focus,
        &.active {
            border-color: $warning;
        }
    }
}

.has-error {
    .control-label {
        color: $danger;
    }
    .form-control {
        border-color: $danger;
        &:hover,
        &:focus,
        &.active {
            border-color: $danger;
        }
    }
}

.has-feedback label ~ .form-control-feedback {
    top: 35px;
}

.form-horizontal .has-feedback .form-control-feedback {
  top: 5px;
}

.has-success {
    .form-control-feedback {
        color: $success;
    }
}

.has-warning {
    .form-control-feedback {
        color: $warning;
    }
}

.has-error {
    .form-control-feedback {
        color: $danger;
    }
}

.has-success .input-group-addon {
    background-color: lighten($success, 25%);
    border-color: $success;
    color: $success;
}

.has-warning .input-group-addon {
    background-color: lighten($warning, 25%);
    border-color: $warning;
    color: $warning;
}

.has-error .input-group-addon {
    background-color: lighten($danger, 25%);
    border-color: $danger;
    color: $danger;
}



/*    Input Size
--------------------*/
.input-sm {
//  border-radius: 3px;
  font-size: 12px;
  height: 30px;
  line-height: 1.5;
//  padding: 5px 10px;
}

.input-lg {
//  border-radius: 6px;
  font-size: 18px;
  height: 46px;
  line-height: 1.33333;
//  padding: 10px 16px;
}


/*    Basic form
----------------------*/

label {
    font-weight: 400;
    margin-bottom: 10px;
}


/*    Form Horizontal
----------------------*/

.form-horizontal {
    .control-label {
        padding-top: 12px;
    }
}

.form-horizontal {
    .form-group {
  margin-left: 0px;
  margin-right: 0px;
}
}