fix(TextInput): fixes hover, focus issues with visibility icon (#7680)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: tw15egan

packages/components/src/components/text-input/_text-input.scss

@@ -100,17 +100,25 @@
 
     .#{$prefix}--text-input--password__visibility,
     // TODO: remove selector above
-    .#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger {
+     .#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger {
+      @include focus-outline('reset');
+
       position: absolute;
-      right: $carbon--spacing-05;
-      width: rem(16px);
-      height: rem(16px);
+      right: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: rem(40px);
+      height: rem(40px);
+      min-height: auto;
       padding: 0;
       background: none;
       border: 0;
       cursor: pointer;
+      transition: outline $duration--fast-01 motion(standard, productive);
 
       svg {
+        transition: fill $duration--fast-01 motion(standard, productive);
         fill: $icon-02;
 
         // Windows, Firefox HCM Fix
@@ -122,6 +130,16 @@
       }
     }
 
+    .#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger:focus {
+      @include focus-outline('outline');
+    }
+
+    .#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger:hover,
+    .#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger:focus
+      svg {
+      fill: $icon-01;
+    }
+
     .#{$prefix}--text-input--invalid {
       padding-right: $carbon--spacing-08;
     }