.tb-label {
    font-size: $text-sm;
    cursor: pointer;
}

.tb-input {
    line-height: 1;
    border: 1px solid theme('colors.gray.400');
    padding: .875rem $spacing-3;
    width: 100%;
    background: theme('colors.white');
    color: theme('colors.gray.900');
    border-radius: $radius-small;
    transition: border-color $transition-fast;

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

    &:focus {
        border-color: theme('colors.primary.500');
    }

    // 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.400');
    }
}

.tb-input--small {
    font-size: $text-sm;
    padding: $spacing-3;
}

.tb-input--large {
    font-size: $text-lg;
    padding: $spacing-3 $spacing-base;
}

/* stylelint-disable */
.tb-input--date {
    position: relative;
}

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

.tb-input--date::-webkit-clear-button {
    display: none;
    -webkit-appearance: none;
}

.tb-input--date::-webkit-inner-spin-button {
    display: none;
    -webkit-appearance: none;
}
/* stylelint-enable */

.tb-input--textarea {
    line-height: 1.5;
    padding: $spacing-3;
    resize: vertical;
    min-height: 20vh;
}

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

.tb-input--select {
    appearance: none;

    + .tb-icon {
        font-size: $text-2xl;
    }

    &::-ms-expand {
        display: none;
    }
}

