Convert .scopes-list to global CSS class

This prepares for the migration to ember-scoped-css, which does not support `composes`.

Author: Turbo87

app/components/support/crate-report-form.hbs

@@ -34,7 +34,7 @@
 
   <fieldset local-class="form-group" data-test-id="fieldset-reasons">
     <div class="form-group-name">Reasons</div>
-    <ul role="list" local-class="reasons-list {{if this.reasonsInvalid "invalid"}}">
+    <ul role="list" local-class="reasons-list" class="scopes-list {{if this.reasonsInvalid "invalid"}}">
       {{#each this.reasons as |option|}}
         <li>
           <label>

app/components/support/crate-report-form.module.css

@@ -19,7 +19,6 @@
 }
 
 .reasons-list {
-  composes: scopes-list from '../../styles/settings/tokens/new.module.css';
   label {
     flex-wrap: nowrap;
   }

app/styles/settings/tokens/new.module.css

@@ -54,15 +54,15 @@
     font-size: 0.9em;
 }
 
-.scopes-list {
+:global(.scopes-list) {
     list-style: none;
     padding: 0;
     margin: 0;
     background-color: light-dark(white, #141413);
     border: 1px solid var(--gray-border);
     border-radius: var(--space-3xs);
 
-    &.invalid {
+    &:global(.invalid) {
         background: light-dark(#fff2f2, #170808);
         border-color: red;
     }

app/templates/settings/tokens/new.hbs

@@ -89,7 +89,7 @@
       </a>
     </div>
 
-    <ul role="list" local-class="scopes-list {{if this.scopesInvalid "invalid"}}">
+    <ul role="list" class="scopes-list {{if this.scopesInvalid "invalid"}}">
       {{#each this.ENDPOINT_SCOPES as |scope|}}
         <li>
           <label data-test-scope={{scope}}>