Fix invisible text selection on brand backgrounds

Since we were defining the selection to have the same text color and
background color as the element they were in, it resulted in the
selection being invisible.

It wasn't that noticeable because we were using this color combination
mainly in links and buttons, and selecting their text is not as common.
But we plan to use the `$brand` color on budget headers as well, and
this issue is more obvious there.

Browsers like Chrome weren't that affected because they automatically
make the selection semi-transparent and so the selected text still had a
slightly different color. In order to prevent this effect when the
selection is white, we're using a 0.99 opacity (in this case Chrome
ignores numbers higher that 0.998).

app/assets/stylesheets/mixins/buttons.scss

@@ -9,6 +9,7 @@
 
 @mixin regular-button($color: $brand) {
   @include button($background: $color);
+  @include inverted-selection;
   @extend %button;
 }
 

app/assets/stylesheets/mixins/colors.scss

@@ -1,6 +1,19 @@
-@mixin brand-background {
+@mixin brand-background($invert-selection: true) {
   background-color: $brand;
   color: $white;
+
+  @if $invert-selection {
+    @include inverted-selection;
+  }
+}
+
+@mixin inverted-selection {
+
+  &::selection,
+  *::selection {
+    background-color: rgba($white, 0.99);
+    color: $brand;
+  }
 }
 
 %brand-background {