input holder change border color on focus

src/app/login/login.component.html

@@ -7,7 +7,7 @@
         <h2> Login </h2>
 
         <div class="input-holder">
-            <label> Email </label>
+            <label> Email ID </label>
             <input type="email">
         </div>
 

src/app/login/login.component.scss

@@ -47,32 +47,36 @@
     }
 
     .input-holder {
-        background-color: white;
-        border: 1px solid var(--border-grey);
-        border-radius: 4rem;
-        overflow: hidden;
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        height: 5rem;
-        padding: 0 2rem;
+        position: relative;
         margin: 2rem 0;
 
         input {
-            border: none;
-            flex-grow: 1;
-            height: 100%;
-            padding-left: 1rem;
+            background-color: white;
+            border: 1px solid var(--border-grey);
+            border-radius: 4rem;
+            overflow: hidden;
+            height: 5rem;
+            padding: 0 2rem 0 10rem;
+            width: 100%;
+            display: block;
             color: var(--dark-grey);
-            font-size: 1.8rem;
+            font-size: 1.5rem;
+            transition: border-color 0.3s;
+            
+            &:focus {
+                border-color: var(--dark-grey);
+            }
         }
 
         label {
             font-size: 1.5rem;
             color: var(--dark-grey);
-            opacity: 0.9;
+            opacity: 0.7;
             font-weight: 300;
             letter-spacing: 0.05rem;
+            position: absolute;
+            left: 2rem;
+            top: 1.5rem;
         }
     }
 

src/app/login/login.component.ts

@@ -1,15 +1,15 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-login',
-  templateUrl: './login.component.html',
-  styleUrls: ['./login.component.scss']
+    selector: 'app-login',
+    templateUrl: './login.component.html',
+    styleUrls: ['./login.component.scss']
 })
 export class LoginComponent implements OnInit {
+    
+    constructor() { }
 
-  constructor() { }
-
-  ngOnInit(): void {
-  }
+    ngOnInit(): void {
+    }
 
 }