Improve styling

tp-time-input.js

@@ -17,14 +17,13 @@ class TpTimeInput extends FormElement(LitElement) {
           align-items: center;
           font-family: inherit;
           font-size: 14px;
-          border: solid 1px #000;
-          overflow: hidden;
           background: transparent;
           box-sizing: border-box;
+          outline: none;
         }
 
-        :host(:focus-within) {
-          border-color: var(--tp-time-input-focus-color, #007bff);
+        :host(:focus-within) .wrapper {
+          outline: var(--tp-time-input-focus-outline, solid 1px #007bff);
         }
 
         .wrapper {
@@ -115,10 +114,6 @@ class TpTimeInput extends FormElement(LitElement) {
           color: #ff0000;
         }
         
-        :host([invalid]) {
-          border-color: var(--tp-time-input-border-color-invalid, #ff0000);
-        }
-        
         .error-message {
           position: absolute;
           z-index: 1;