.form-group {
    padding: 0 10px;
    label {
        font-weight: normal;
        font-size: $default-text;
    }
}

@mixin placeholderStyle($color, $opacity) {
    &::-webkit-input-placeholder {
        color: $color;
        opacity: $opacity;
    }
    &::-moz-placeholder {
        color: $color;
        opacity: $opacity;
    }
    &::-ms-input-placeholder {
        color: $color;
        opacity: $opacity;
    }
}

.control-label {
    font-size: $default-text;
    font-weight: normal;
}

.help-block {
    color: lighten($fonts-color, 20%);
    vertical-align: sub;
    font-size: $sm-text;
}

.form-control {
    display: block;
    width: 100%;
    color: $fonts-color;
    background-color: transparent;
    box-shadow: none;
    font-size: 14px;
    @include placeholderStyle($fonts-color, 0.4);
    &:focus {
        @include box-shadow(none);
    }
}

.form-control-sm {
    font-size: 12px;
    height: 31px;
}

.form-control-lg {
    font-size: 16px;
    height: 50px;
}

input.form-control {
    border-radius: 0;
    border: none;
    border-bottom: 1px solid transparent;
    background: $border-color;
    @include transition(all 1s);
    &:focus {
        border-bottom: 1px solid $primary;
    }
}

input.form-control[disabled] {
    background-color: transparent;
}

input.form-control[readonly] {
    background-color: transparent;
    &:focus {
        border-bottom: 1px solid transparent;
    }
}

input.table-form-control {
    border: 1px solid $border-color;
    border-radius: 3px;
    background: $border-color;
    font-size: 12px;
    color: $fonts-color;
    text-align: center;
    &:focus {
        border: 1px solid $primary;
    }
}

textarea.form-control {
    font-size: 14px;
    max-width: 100%;
    height: 96px;
    background: $border-color;
    border: 1px solid transparent;
    border-radius: 0;
    @include transition(border 1s);
    &:focus {
        border: 1px solid $primary;
    }
}

select.form-control {
    border-radius: 0;
    border: 1px solid transparent;
    background: $border-color;
    appearance: none;
    -moz-appearance: none;
    background-image: url("../../assets/theme/select.png");
    background-repeat: no-repeat;
    background-position: calc(100% - 7px) 50%;
    background-size: 10px;
    padding-right: 20px;
    @include transition(border 1s);
    &:focus {
        border: 1px solid $primary;
    }
    option {
        background: $card-bg;
        color: $fonts-color;
        border: none;
    }
}

select.form-control[multiple] {
    background: $border-color;
    option {
        background: transparent;
        color: $fonts-color;
        border: none;
    }
}

.form-control[type="color"] {
    border: none;
    cursor: pointer;
    &:focus {
        border: none;
    }
}

input.with-primary-addon {
    &:focus {
        border-bottom: 1px solid $primary;
    }
}

input.with-success-addon {
    &:focus {
        border-bottom: 1px solid $success;
    }
}

input.with-warning-addon {
    &:focus {
        border-bottom: 1px solid $warning;
    }
}

input.with-danger-addon {
    &:focus {
        border-bottom: 1px solid $danger;
    }
}

input.with-info-addon {
    &:focus {
        border-bottom: 1px solid $info;
    }
}

.input-group-addon {
    line-height: inherit;
    color: $fonts-color;
}

.input-group-addon-primary,
.input-group-addon-success,
.input-group-addon-warning,
.input-group-addon-danger,
.input-group-addon-info {
    color: $white;
    border: 0;
}

.input-group-addon-primary {
    background: $primary;
}

.input-group-addon-success {
    background: $success;
}

.input-group-addon-warning {
    background: $warning;
}

.input-group-addon-danger {
    background: $danger;
}

.input-group-addon-info {
    background: $info;
}


/* 

checkbox && radio 

*/

.checkbox,
.radio {
    display: none;
}

.check-label,
.radio-label {
    display: block;
    width: 14px;
    height: 14px;
    line-height: 0.9em;
    text-indent: 19px;
    border: 1px solid rgba($fonts-color, .5);
    cursor: pointer;
    position: relative;
    white-space: nowrap;
}

.check-label:after,
.radio-label:after {
    display: block;
    content: '';
    width: 0;
    height: 0;
    background-color: rgba($fonts-color, .5);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    @include transition(all 0.2s);
}

.checkbox:checked+.check-label:after,
.radio:checked+.radio-label:after {
    width: 10px;
    height: 10px;
}

.check-label,
.check-label:after {
    border-radius: 1px;
}

.radio-label,
.radio-label:after {
    border-radius: 50%;
}

.checkbox-primary+.check-label,
.checkbox-primary+.radio-label {
    border: 1px solid $primary;
}

.checkbox-primary+.check-label:after,
.checkbox-primary+.radio-label:after {
    background-color: $primary;
}

.checkbox-success+.check-label,
.checkbox-success+.radio-label {
    border: 1px solid $success;
}

.checkbox-success+.check-label:after,
.checkbox-success+.radio-label:after {
    background-color: $success;
}

.checkbox-warning+.check-label,
.checkbox-warning+.radio-label {
    border: 1px solid $warning;
}

.checkbox-warning+.check-label:after,
.checkbox-warning+.radio-label:after {
    background-color: $warning;
}

.checkbox-danger+.check-label,
.checkbox-danger+.radio-label {
    border: 1px solid $danger;
}

.checkbox-danger+.check-label:after,
.checkbox-danger+.radio-label:after {
    background-color: $danger;
}

.checkbox-info+.check-label,
.checkbox-info+.radio-label {
    border: 1px solid $info;
}

.checkbox-info+.check-label:after,
.checkbox-info+.radio-label:after {
    background-color: $info;
}

.label {
    padding: 1px 4px;
    border-radius: 2px;
}

.label-primary {
    @extend .bg-primary;
}

.label-warning {
    @extend .bg-warning;
}

.label-success {
    @extend .bg-success;
}

.label-danger {
    @extend .bg-danger;
}

.label-info {
    @extend .bg-info;
}

@mixin alert($alertType) {
    border: 1px solid $alertType;
    background: rgba($alertType, .2);
    color: $fonts-color;
}

.alert-success {
    @include alert($success);
}

.alert-warning {
    @include alert($warning);
}

.alert-danger {
    @include alert($danger);
}

.alert-info {
    @include alert($info);
}

.alert {
    button.close {
        color: $fonts-color;
    }
}