{"version":3,"sources":["../../../src/govuk/helpers/_visually-hidden.scss"],"names":[],"mappings":"AAAA,GAAG;AACH,+BAA+B;AAC/B,GAAG;;AAEH,qEAAqE;AACrE,EAAE;AACF,gFAAgF;AAChF,sEAAsE;AACtE,2HAA2H;AAC3H,uCAAuC;AACvC,EAAE;AACF,uEAAuE;AACvE,EAAE;AACF,iBAAiB;;AAEjB;EACE,mDAAmD;;EAEnD,qEAAqE;EACrE,0EAA0E;EAC1E,4EAA4E;EAC5E,0CAA0C;EAC1C;IACE,gBAAgB;EAClB;;EAEA;IACE,gBAAgB;EAClB;;EAEA,2CAA2C;EAC3C,4CAA4C;EAC5C,2EAA2E;EAC3E,sCAAsC;EACtC,0CAA0C;EAC1C,2CAA2C;;EAE3C,iDAAiD;EACjD,oDAAoD;EACpD,8DAAsD;UAAtD,sDAAsD;;EAEtD,0CAA0C;;EAE1C,4EAA4E;EAC5E,yCAAyC;EACzC,uFAAuF;EACvF,oDAAoD;AACtD;;AAEA,4EAA4E;AAC5E,8EAA8E;AAC9E,qBAAqB;AACrB,EAAE;AACF,yEAAyE;AACzE,wCAAwC;AACxC,EAAE;AACF,uEAAuE;AACvE,EAAE;AACF,iBAAiB;;AAEjB;EACE,mDAAmD;;EAEnD,2CAA2C;EAC3C,4CAA4C;EAC5C,2EAA2E;EAC3E,sCAAsC;EACtC,0CAA0C;;EAE1C,iDAAiD;EACjD,oDAAoD;EACpD,8DAAsD;UAAtD,sDAAsD;;EAEtD,4EAA4E;EAC5E,yCAAyC;EACzC,uFAAuF;EACvF,oDAAoD;;EAEpD;;IAEE,iDAAiD;;IAEjD,4CAA4C;IAC5C,6CAA6C;IAC7C,gDAAgD;;IAEhD,kDAAkD;IAClD,2CAA2C;IAC3C,wDAAgD;YAAhD,gDAAgD;;IAEhD,qDAAqD;EACvD;AACF","file":"_visually-hidden.scss","sourcesContent":["////\n/// @group helpers/accessibility\n////\n\n/// Hide an element visually, but have it available for screen readers\n///\n/// @link https://snook.ca/archives/html_and_css/hiding-content-for-accessibility\n/// - Hiding Content for Accessibility, Jonathan Snook, February 2011\n/// @link https://github.com/h5bp/html5-boilerplate/blob/9f13695d21ff92c55c78dfa9f16bb02a1b6e911f/src/css/main.css#L121-L158\n/// - h5bp/html5-boilerplate - Thanks!\n///\n/// @param {Boolean} $important [true] - Whether to mark as `!important`\n///\n/// @access public\n\n@mixin govuk-visually-hidden($important: true) {\n position: absolute if($important, !important, null);\n\n // Absolute positioning has the unintended consequence of removing any\n // whitespace surrounding visually hidden text from the accessibility tree.\n // Insert a space character before and after visually hidden text to separate\n // it from any visible text surrounding it.\n &:before {\n content: \"\\00a0\";\n }\n\n &:after {\n content: \"\\00a0\";\n }\n\n width: 1px if($important, !important, null);\n height: 1px if($important, !important, null);\n // If margin is set to a negative value it can cause text to be announced in\n // the wrong order in VoiceOver for OSX\n margin: 0 if($important, !important, null);\n padding: 0 if($important, !important, null);\n\n overflow: hidden if($important, !important, null);\n clip: rect(0 0 0 0) if($important, !important, null);\n clip-path: inset(50%) if($important, !important, null);\n\n border: 0 if($important, !important, null);\n\n // For long content, line feeds are not interpreted as spaces and small width\n // causes content to wrap 1 word per line:\n // https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe\n white-space: nowrap if($important, !important, null);\n}\n\n/// Hide an element visually, but have it available for screen readers whilst\n/// allowing the element to be focused when navigated to via the keyboard (e.g.\n/// for the skip link)\n///\n/// This is slightly less opinionated about borders and padding to make it\n/// easier to style the focussed element.\n///\n/// @param {Boolean} $important [true] - Whether to mark as `!important`\n///\n/// @access public\n\n@mixin govuk-visually-hidden-focusable($important: true) {\n position: absolute if($important, !important, null);\n\n width: 1px if($important, !important, null);\n height: 1px if($important, !important, null);\n // If margin is set to a negative value it can cause text to be announced in\n // the wrong order in VoiceOver for OSX\n margin: 0 if($important, !important, null);\n\n overflow: hidden if($important, !important, null);\n clip: rect(0 0 0 0) if($important, !important, null);\n clip-path: inset(50%) if($important, !important, null);\n\n // For long content, line feeds are not interpreted as spaces and small width\n // causes content to wrap 1 word per line:\n // https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe\n white-space: nowrap if($important, !important, null);\n\n &:active,\n &:focus {\n position: static if($important, !important, null);\n\n width: auto if($important, !important, null);\n height: auto if($important, !important, null);\n margin: inherit if($important, !important, null);\n\n overflow: visible if($important, !important, null);\n clip: auto if($important, !important, null);\n clip-path: none if($important, !important, null);\n\n white-space: inherit if($important, !important, null);\n }\n}\n"]}