Improve styling

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tp/tp-time-input",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "",
   "main": "tp-time-input.js",
   "scripts": {

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;