Fix text selection in budget heading

The `inverted-selection` rules defined in the `%brand-background`
selector weren't being applied because we were using this selector in
`::before` and `::after` pseudoelements. Not sure about the reason, but
it looks like the saturation of `::after::selection` pseudoelements
resulted in invalid selectors and so the inverted selection rules were
ignored for every selection using `%brand-background`, like
`%budget-header`.

Using `@include brand-background` instead of `@extend %brand-background`
in pseudoelements solves the issue. The inverted selection might not
work in these pseudoelements, but we don't need it there since these
pseudoelements don't have content.

app/assets/stylesheets/admin/budgets_wizard/creation_timeline.scss

@@ -13,7 +13,7 @@
     text-transform: uppercase;
 
     &::before {
-      @extend %brand-background;
+      @include brand-background;
       border-radius: 50%;
       content: "";
       height: 20px;

app/assets/stylesheets/budgets/single_heading.scss

@@ -4,7 +4,7 @@
   position: relative;
 
   &::after {
-    @extend %brand-background;
+    @include brand-background;
     bottom: 0;
     content: "";
     height: rem-calc(6);