Contain offscreen contents in an invisible single-pixel onscreen element

- Solves reading issues in both NVDA and VoiceOver, due to lack of linebreaks
- Being inside the parent element lets you add an outline (eg: to visually indicate focus) without it stretching off the side of the screen

- 2px indent causes the beginning of the text to start outside the visible edge of the element
  - 1px would cause some subpixel bleedover, causing it to be visible
- Disallowing line break causes the entire text to overflow, and fixes the NVDA & VoiceOver issues
- Setting padding, margin, border, etc. to nothing so any potential visibility is removed in case it's being used on an element that may later appear on screen
- Keeping absolute position so it doesn't affect the page flow, particularly of anyone who's already relying on it

offscreen.scss

@@ -1,17 +1,20 @@
 
 @mixin vui-offscreen() {
-
-	$offset: -10000px;
-
 	position: absolute !important;
-	left: $offset;
 	overflow: hidden;
+
 	width: 1px;
 	height: 1px;
 
-	[dir="rtl"] & {
-		left: auto;
-		right: $offset;
-	}
+	font-size: 1px;
+	line-height: 1px;
+	text-indent: 2px;
+	white-space: nowrap;
 
+	padding: 0;
+	margin: 0;
+	background: none;
+	border: none;
+	box-shadow: none;
+	outline: none !important; // important to override :focus
 }