.tb-search-form {
    @apply flex relative w-full;
}

.tb-search-form__input {
    border: 1px solid theme('colors.gray.400');
    appearance: none;
    padding: theme('padding.4') theme('padding.3');
    font-size: theme('fontSize.base');
    color: theme('colors.gray.900');
    flex: 1;

    &::placeholder {
        color: inherit;
        opacity: .5;
    }

    &::-webkit-search-cancel-button {
        cursor: pointer;
    }

    &:hover,
    &:focus {
        &::placeholder {
            opacity: .25;
        }
    }
}

.tb-search-form__input--suggestions {
    border-bottom: 0;
}

.tb-search-form__submit-button {
    margin-left: theme('margin.2');
}
