chore: style issues resolved

Author: ArathyKumar

elements/pf-search-input/demo/pf-search-input.html

@@ -1,12 +1,12 @@
 <pf-search-input placeholder="Select a title"
              accessible-label="Title">
-    <pf-search-input-option>Mr</pf-search-input-option>
-    <pf-search-input-option>Miss</pf-search-input-option>
-    <pf-search-input-option>Mrs</pf-search-input-option>
-    <pf-search-input-option>Ms</pf-search-input-option>
+    <pf-option>Mr</pf-option>
+    <pf-option>Miss</pf-option>
+    <pf-option>Mrs</pf-option>
+    <pf-option>Ms</pf-option>
     <hr>
-    <pf-search-input-option>Dr</pf-search-input-option>
-    <pf-search-input-option>Other</pf-option>
+    <pf-option>Dr</pf-option>
+    <pf-option>Other</pf-option>
 </pf-search-input>
 
 <script type="module">

elements/pf-search-input/pf-search-input.css

@@ -268,6 +268,7 @@
 	align-items: center;
 	justify-content: center;
 	border-radius: 0px;
+	position: relative;
 }
 
 #close-button svg {
@@ -350,13 +351,7 @@ div.search-icon {
 
 #outer:focus-within {
 	#toggle {
-		border-top-left-radius:  var(--pf-global--spacer--sm, 0.5rem);
-		border-bottom-left-radius:  var(--pf-global--spacer--sm, 0.5rem);
-		border-bottom: var(--pf-global--spacer--xs, 0.25rem) solid transparent;
-	}
-	#close-button {
-		border-bottom-width: var(--pf-global--spacer--xs, 0.125rem);
-		border-bottom-color: var(--pf-theme--color--accent, #0066cc);
-		box-sizing: border-box;
+		border-bottom: var(--pf-global--spacer--xs, 0.125rem) solid var(--pf-theme--color--accent, #0066cc);
+		box-sizing: content-box;
 	}
 }