feat(search): implementa animaliaDS e externaliza para uso no portal

Implementa AnimaliaDS e externaliza para uso no portal

Fixes DTHFUI-7501

src/css/components/po-search/po-search.css

@@ -1,12 +1,7 @@
 .po-search {
   font-family: var(--font-family);
   font-size: var(--font-size);
-  width: 100%;
-
-  align-items: center;
-  display: inline-flex;
-  position: relative;
-
+  color: var(--text-color);
   border-color: var(--color);
   border-radius: var(--border-radius);
   background-color: var(--background);
@@ -15,12 +10,10 @@
   border-width: var(--border-width-sm);
   border-style: solid;
 
-  color: var(--text-color);
-}
-
-.po-search:not(.po-search-disabled):hover {
-  border-color: var(--color-hover);
-  background-color: var(--background-hover);
+  align-items: center;
+  display: inline-flex;
+  position: relative;
+  width: 100%;
 }
 
 .po-search:has(input:focus-visible) {
@@ -55,13 +48,27 @@
   height: 100%;
   outline: none;
   overflow: hidden;
-  padding-inline: 0.25em var(--spacing-xs);
   text-overflow: ellipsis;
   width: 100%;
+  border-radius: 3px;
+}
+
+.po-search .po-search-input {
+  padding-left: 44px;
+}
+
+.po-search .po-search-icon-right {
+  padding-right: 52px;
 }
 
 .po-search input::placeholder {
   color: var(--text-color-placeholder);
+  padding-left: 0.25em;
+  padding-right: var(--spacing-xs);
+}
+
+.po-search-input:not(:disabled):hover {
+  background-color: var(--background-hover);
 }
 
 .po-search .po-search-icon {
@@ -73,6 +80,28 @@
   align-self: stretch;
   display: flex;
   font-size: 1.5rem;
+
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  left: 0px;
+}
+
+.po-search-icon:hover + .po-search-input:not(:disabled) {
+  background-color: var(--background-hover);
+}
+
+.po-search .po-search-container-clean {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  right: 0px;
 }
 
 .po-search .po-search-clean {
@@ -92,6 +121,9 @@
   display: flex;
   font-size: 1.5rem;
   justify-content: center;
+  appearance: none;
+  border: none;
+  border-radius: 0px 3px 3px 0px;
 }
 
 .po-search .po-search-clean:empty {
@@ -129,3 +161,7 @@
   color: var(--color-disabled);
   cursor: not-allowed;
 }
+
+.po-search po-icon {
+  display: inline-flex;
+}