Add newsletter dropdown caret hover (#15719)

* Fixup icons

* Update footer-newsletter dropdown carets

* Add black caret for focused dropdowns

* Fixup background color inherit

* Simplify background-position

media/css/m24/components/footer-newsletter.scss

@@ -179,14 +179,21 @@ $max-footer-content-width: $content-max;
         select {
             font-family: $primary-font;
             width: 100%;
-            background-position-x: 100%;
-            background-position-y: 9px;
-            background-image: url('/media/img/logos/mozilla/footer-refresh/icon-arrow-down.svg');
+            background-image: url('/media/img/icons/m24-small/down-caret-white.svg');
             background-repeat: no-repeat;
+            background-size: 16px 16px;
+            @include bidi(((background-position, right 8px center, 8px center),));
 
             @media #{$mq-lg} {
                 min-width: 100%;
             }
+
+            &:hover,
+            &:focus,
+            &:focus-visible,
+            &:focus-within {
+                background-image: url('/media/img/icons/m24-small/down-caret.svg');
+            }
         }
     }