Display: Fix styles for primevue password

Author: AngelFQC

assets/css/scss/atoms/_password.scss

@@ -1,21 +1,56 @@
 .p-password {
-  @apply inline-flex w-full;
-}
+  @apply inline-flex relative w-full;
 
-.p-password-input {
-  &::-ms-reveal,
-  &::-ms-clear {
-    @apply hidden;
+  & &-overlay {
+    @apply min-w-full;
   }
-}
 
-.p-float-label {
-  .p-password {
-    &.p-inputwrapper-filled,
-    &.p-inputwrapper-focus {
-      ~ label {
-        @apply top-0 text-primary text-caption;
-      }
+  &-meter {
+    @apply rounded-lg;
+
+    &-label {
+      @apply h-full w-0 rounded-lg;
+    }
+
+    &-weak {
+      @apply bg-danger;
+    }
+
+    &-medium {
+      @apply bg-warning;
+    }
+
+    &-strong {
+        @apply bg-success;
     }
   }
+
+  &-fluid {
+    @apply flex;
+
+    & .p-password-input {
+      @apply w-full;
+    }
+  }
+
+  &-input::-ms-reveal,
+  &-input::-ms-clear {
+    display: none;
+  }
+
+  &-overlay {
+    @apply p-4 bg-white text-gray-90 border-none border-0 outline-none outline-0 drop-shadow-lg rounded-lg;
+  }
+
+  &-content {
+    @apply flex flex-col gap-4;
+  }
+
+  &-toggle-mask-icon {
+    @apply inset-y-3.5 right-3.5 text-gray-90 absolute w-4 h-4;
+  }
+
+  &:has(&-mask-icon) &-input {
+    @apply pr-4;
+  }
 }