.c-input-group [type=text],
.c-input-group [type=email],
.c-input-group [type=date],
.c-input-group [type=number],
.c-input-group [type=password],
.c-input-group [type=tel],
.c-input-group [type=url],
.c-input-group textarea {
    font-size: 1rem;
    line-height: 1.5;
    border-bottom: 1px solid theme('colors.gray.400');
    height: 46px;
    padding: .75rem 0 .625rem;
    width: 100%;
    color: theme('colors.gray.900');
    background: white;
    transition: $transition-time;

    &:hover {
        border-color: theme('colors.gray.600');
    }

    &:focus,
    &:active {
        border-color: theme('colors.secondary.600');
    }

    // If a field is required, it will be validated.
    &:required:valid {
        border-color: theme('colors.positive.500');
    }

    &:hover:required:valid {
        border-color: theme('colors.positive.600');
    }

    // &:focus:required:valid,
    &:active:required:valid {
        border-color: theme('colors.positive.700');
    }
}

.c-input-group [type=radio],
.c-input-group [type=checkbox] {
    width: auto;
}

/* stylelint-disable */
.c-input-group [type=date] {
    position: relative;
}

.c-input-group [type=date]::-webkit-clear-button {
    display: none;
    -webkit-appearance: none;
}

.c-input-group [type=date]::-webkit-inner-spin-button {
    display: none;
    -webkit-appearance: none;
}
/* stylelint-enable */

// Push the datepicker trigger to a reasonable position in Webkit browsers.
.c-input-group [type=date]::-webkit-calendar-picker-indicator {
    position: absolute;
    left: 12ch;
}

.c-input-group textarea {
    resize: vertical;
    min-height: 20vh;
}

// Remove IE default UI.
::-ms-clear {
    display: none;
}
