{"version":3,"sources":["../../../src/govuk/helpers/_focused.scss"],"names":[],"mappings":"AAAA,GAAG;AACH,+BAA+B;AAC/B,GAAG;;AAEH,eAAe;AACf,EAAE;AACF,8EAA8E;AAC9E,4CAA4C;AAC5C,EAAE;AACF,qDAAqD;AACrD,wBAAwB;AACxB,mCAAmC;AACnC,MAAM;AACN,EAAE;AACF,iBAAiB;;AAEjB;EACE,uEAAuE;EACvE,uEAAuE;EACvE,4DAA4D;;EAE5D,6CAA6C;EAC7C,0CAA0C;EAC1C,gDAAgD;EAChD;;6CAE2C;EAC3C,6DAA6D;EAC7D,iCAAiC;EACjC,qBAAqB;;EAErB,4EAA4E;EAC5E,0DAA0D;EAC1D,CAAC;EACD,4EAA4E;EAC5E,yEAAyE;EACzE,uEAAuE;EACvE,2BAA2B;EAC3B,CAAC;EACD,gCAAgC;EAChC,6DAA6D;EAC7D;IACE,mCAA2B;YAA3B,2BAA2B;EAC7B;AACF;;AAEA,cAAc;AACd,EAAE;AACF,8EAA8E;AAC9E,8EAA8E;AAC9E,sEAAsE;AACtE,yDAAyD;AACzD,EAAE;AACF,6DAA6D;AAC7D,8BAA8B;AAC9B,kCAAkC;AAClC,MAAM;AACN,EAAE;AACF,iBAAiB;;AAEjB;EACE,6CAA6C;EAC7C;;iDAE+C;AACjD;;AAEA,qBAAqB;AACrB,EAAE;AACF,8EAA8E;AAC9E,wBAAwB;AACxB,EAAE;AACF,2DAA2D;AAC3D,yBAAyB;AACzB,yCAAyC;AACzC,MAAM;AACN,EAAE;AACF,iBAAiB;;AAEjB;EACE,iCAAiC;EACjC,6CAA6C;EAC7C,+CAA+C;EAC/C,iBAAiB;EACjB,wEAAwE;EACxE,mEAAmE;EACnE,uEAAuE;EACvE,qEAAqE;EACrE,wDAAwD;EACxD,8FAA8F;AAChG","file":"_focused.scss","sourcesContent":["////\n/// @group helpers/accessibility\n////\n\n/// Focused text\n///\n/// Provides an outline to clearly indicate when the target element is focused.\n/// Used for interactive text-based elements.\n///\n/// @example scss - Styling the focus state for a link\n///   .govuk-link:focus {\n///     @include govuk-focused-text;\n///   }\n///\n/// @access public\n\n@mixin govuk-focused-text {\n  // When colours are overridden, for example when users have a dark mode,\n  // backgrounds and box-shadows disappear, so we need to ensure there's a\n  // transparent outline which will be set to a visible colour.\n\n  outline: $govuk-focus-width solid transparent;\n  color: govuk-functional-colour(focus-text);\n  background-color: govuk-functional-colour(focus);\n  box-shadow:\n    0 -2px govuk-functional-colour(focus),\n    0 4px govuk-functional-colour(focus-text);\n  // When link is focussed, hide the default underline since the\n  // box shadow adds the \"underline\"\n  text-decoration: none;\n\n  // Fixes an issue in Chromium 108–111 where the box-shadow on the focus state\n  // is missing on links that wrap across multiple lines [1].\n  //\n  // However, text-wrap: balance doesn't play nicely with box-decoration-break:\n  // clone, causing links to re-flow when focused [2]. As text-wrap: balance\n  // wasn't introduced until Chromium 114 we can use it as a way to target\n  // this fix to just 108–111.\n  //\n  // [1]: http://crbug.com/40884971\n  // [2]: https://github.com/alphagov/govuk-frontend/issues/5878\n  @supports not (text-wrap: balance) {\n    box-decoration-break: clone;\n  }\n}\n\n/// Focused box\n///\n/// Provides an outline to clearly indicate when the target element is focused.\n/// Unlike govuk-focused-text, which only draws an underline below the element,\n/// govuk-focused-box draws an outline around all sides of the element.\n/// Best used for non-text content contained within links.\n///\n/// @example scss - Styling the focus state for a linked image\n///   .govuk-link-image:focus {\n///     @include govuk-focused-box;\n///   }\n///\n/// @access public\n\n@mixin govuk-focused-box {\n  outline: $govuk-focus-width solid transparent;\n  box-shadow:\n    0 0 0 4px govuk-functional-colour(focus),\n    0 0 0 8px govuk-functional-colour(focus-text);\n}\n\n/// Focused form input\n///\n/// Provides an outline to clearly indicate when the target element is focused.\n/// Used for form inputs.\n///\n/// @example scss - Styling the focus state for a form input\n///   .govuk-input:focus {\n///     @include govuk-focused-form-input;\n///   }\n///\n/// @access public\n\n@mixin govuk-focused-form-input {\n  outline: $govuk-focus-width solid;\n  outline-color: govuk-functional-colour(focus);\n  // Ensure outline appears outside of the element\n  outline-offset: 0;\n  // Double the border by adding its width again. Use `box-shadow` for this\n  // instead of changing `border-width` - this is for consistency with\n  // components such as textarea where we avoid changing `border-width` as\n  // it will change the element size. Also, `outline` cannot be utilised\n  // here as it is already used for the yellow focus state.\n  box-shadow: inset 0 0 0 $govuk-border-width-form-element govuk-functional-colour(input-border);\n}\n"]}