// --------------------------------------------------
// Base styles
// -------------------------
input,
textarea {
    border: 0;
    background-color: transparent;
    &:focus {
        outline: none;
    }
    &::-ms-clear {
        display: none; //Removing a clear button for IE10+ Browser. , supported only in Internet Explorer 10, Internet Explorer 11, and Microsoft Edge.
    }
}

input[type='text'],
input[type='url'],
input[type='tel'],
input[type='password'],
input[type='number'],
input[type='email'],
textarea {
    font-size: $font-size-base;
    color: $gray-darkest;
    @include placeholder {
        color: $gray-medium;
    }
}

textarea {
    width: 100%;
    padding: 1rem 1.4rem;
    border-radius: $border-radius-base;
    border: solid 1px $gray-medium;
    resize: none;
    &:disabled {
        border: 1px dashed $gray-light;
        @include placeholder {
            color: $gray-light;
        }
    }
}

.input-inline {
    display: inline;
    select {
        width: auto;
    }
    input[type="date"] {
        color: #9c9c9c;
        display: inline-block;
    }
}

.form-group {
    .input-group-disabled {
        label,
        small {
            color: $gray-light;
        }
    }
    legend {
        font-weight: bold;
    }
    @include clearfix;
    position: relative; // For dropdowns
    margin-bottom: 2em;
    border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table
    label {
        display: block;
    }
    small {
        display: inline-block;
        color: $gray-medium;
        font-size: $font-size-extra-small;
        line-height: 1.5;
        padding-left: .25em; // min-height: 1.75em;
        &.blank-helper {
            color: transparent;
        }
        &:before {
            // content: "\200b"; /* unicode zero width space character */
        }
        .rex-icon {
            padding-right: .3em;
            padding-bottom: .3em;
            vertical-align: middle;
        }
    }
    input {
        caret-color: $brand-primary;
        padding: 0 0 .5em 0;
        &:focus,
        &:active {
            &+label {
                color: $brand-focus;
                @include transition(0.05s);
            }
        } //Move Label above input
        &+label {
            top: 0px;
        }
        &:disabled {
            color: $gray-light;
            border-bottom: dashed 1px $gray-light !important;
            @include placeholder {
                color: $gray-light;
            }
        }
        &[type='text'],
        &[type='url'],
        &[type='tel'],
        &[type='password'],
        &[type='number'],
        &[type='email'] {
            border-bottom: 1px solid $gray-medium;
            margin-bottom: 0;
            &:focus {
                border-color: $brand-primary;
                border-width: 1px;
            }
        }
    }
    &[class*="col-"] {
        float: none;
        padding-left: 0;
        padding-right: 0;
    } // Disabled Input Group
    .input-area-read-only {
        input,
        input:hover {
            border-bottom: none;
            pointer-events: none;
        }
    }
    .form-control {
        // Ensure that the input is always above the *appended* addon button for
        // proper border colors.
        position: relative;
        z-index: 2; // IE9 fubars the placeholder attribute in text inputs and the arrows on
        // select elements in input groups. To fix it, we float the input. Details:
        // https://github.com/twbs/rex/issues/11561#issuecomment-28936855
        float: left;
        width: 100%;
        &:focus {
            z-index: 3;
            outline: none;
        }
    }
    select.form-control {
        padding-right: 1em;
    }
}