Now you can use a custom prefix separator. Some systems don't parse the : separator character in the default USWDS responsive and state prefixes like tablet:margin-x-2. Now you can set the value of $theme-prefix-separator to output any character or string between the prefix and the main class.

Note that the default needs two \ characters to properly output the escaped : character in the final CSS.

$theme-prefix-separator: "\\:",
ex: .tablet\:margin-x-2
      <div class="margin:x-2">

$theme-prefix-separator: "--",
ex: .tablet--margin-x-2
      <div class="margin--x-2">

Fixes #3045