fix: fontawesome icon visibility styles (@MirruK) (#7436)

Add styles for fontawesome icons to respect hidden and invisible classes

### Description

Icons were removed from layers, this caused the .hidden class to not
have any effect on icons, this fixes the problem globally

Author: MirruK

frontend/src/styles/vendor.scss

@@ -1,5 +1,25 @@
 @import "fontawesome-5"; // the screenshotting library has some issues with css layers
 
+/* fontawesome icon styles do not respect the hidden class from the hidden layer.
+* By having these rules outside any layer we make sure that the display none is
+* correctly applied when an element possesses both a .fa* class and the hidden class */
+.fas.hidden,
+.fab.hidden,
+.fa.hidden,
+.far.hidden {
+  display: none;
+}
+
+// same for invisible
+.fas.invisible,
+.fab.invisible,
+.fa.invisible,
+.far.invisible {
+  opacity: 0;
+  pointer-events: none;
+  visibility: hidden;
+}
+
 @import "normalize.css" layer(normalize);
 @layer vendor {
   @import "slim-select/styles";